AI game creator

Click here for free DL of the app version that can save data.

No:12407

←

Prev Next

→

Snake Game
Developer User5088｜Date and time 23/8/16 0:10:52
Build time 34.773 sec｜Game capacity 4.337KB｜

Script

Sure, here's an implementation of the Snake Game in a single HTML file using JavaScript. The game will be playable on a smartphone and will use pictograms for the snake and food.

To play the game, simply copy and paste the above code into a new HTML file, save it as "snake.html", and open the file in a web browser on your smartphone. The game will start automatically and you can control the snake's direction using the arrow keys. Try to eat as much food as possible without colliding with the walls or yourself. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

Sure, here's an implementation of the Snake Game in a single HTML file using JavaScript. The game will be playable on a smartphone and will use pictograms for the snake and food.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Game settings
    const canvasSize = 400;
    const gridSize = 20;
    const initialSnakeLength = 3;
    
    // Initial game state
    let snake = [];
    let direction = 'right';
    let food = { x: 0, y: 0 };
    let score = 0;
    
    // Initialize game
    function startGame() {
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      canvas.width = canvasSize;
      canvas.height = canvasSize;
      
      snake = [
        { x: Math.floor(gridSize / 2), y: Math.floor(gridSize / 2) }
      ];
      
      generateFood();
      
      // Game loop
      setInterval(() => {
        clearCanvas();
        moveSnake();
        drawFood();
        drawSnake();
        checkCollision();
      }, 100);
      
      // Input handling
      document.addEventListener('keydown', (event) => {
        if (event.keyCode === 37 && direction !== 'right') { // left arrow
          direction = 'left';
        } else if (event.keyCode === 38 && direction !== 'down') { // up arrow
          direction = 'up';
        } else if (event.keyCode === 39 && direction !== 'left') { // right arrow
          direction = 'right';
        } else if (event.keyCode === 40 && direction !== 'up') { // down arrow
          direction = 'down';
        }
      });
    }
    
    // Clear canvas
    function clearCanvas() {
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvasSize, canvasSize);
    }
    
    // Move snake
    function moveSnake() {
      const head = { ...snake[0] };
      
      if (direction === 'right') {
        head.x++;
      } else if (direction === 'left') {
        head.x--;
      } else if (direction === 'up') {
        head.y--;
      } else if (direction === 'down') {
        head.y++;
      }
      
      snake.unshift(head); // Add new head
      if (snake.length > score + initialSnakeLength) {
        snake.pop(); // Remove tail if not eating food
      }
    }
    
    // Generate food
    function generateFood() {
      const x = Math.floor(Math.random() * gridSize);
      const y = Math.floor(Math.random() * gridSize);
      food = { x, y };
    }
    
    // Draw food
    function drawFood() {
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'red';
      ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
    }
    
    // Draw snake
    function drawSnake() {
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'black';
      
      snake.forEach(segment => {
        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
      });
    }
    
    // Check collision
    function checkCollision() {
      const head = snake[0];
      
      // Check wall collision
      if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) {
        gameOver();
      }
      
      // Check self collision
      for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
          gameOver();
        }
      }
      
      // Check food collision
      if (head.x === food.x && head.y === food.y) {
        score++;
        generateFood();
      }
    }
    
    // Game over
    function gameOver() {
      alert('Game over! Your score: ' + score);
      score = 0;
      startGame();
    }
    
    // Start the game
    startGame();
  </script>
</body>
</html>
```