AI game creator

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

No:41407

←

Prev Next

→

Snake Game
Developer User16468｜Date and time 24/2/7 9:34:07
Build time 12.945 sec｜Game capacity 3.537KB｜

Script

Sure! Here's an example of a snake game implemented as a single HTML file, with JavaScript code enclosed in script tags:

To play the game, you can open the HTML file on a smartphone or in a web browser. The game board will be displayed as a 400x400 pixels canvas, and the snake (represented as green squares) will move around the board to eat red food squares. The game will end if the snake hits the edge of the board or collides with itself.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an example of a snake game implemented as a single HTML file, with JavaScript code enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Snake Game</title>
  <style>
    #game-board {
      margin: 0 auto;
      border: 1px solid #ccc;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Initial position of the snake
      let snake = [];
      snake[0] = { x: 10, y: 10 };

// Initial position of the food
      let food = {
         x: Math.floor(Math.random() * canvasSize),
         y: Math.floor(Math.random() * canvasSize)
      };

// Initial direction of the snake
      let d;

// Function to draw the snake and food
      function draw() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the snake
        for (let i = 0; i < snake.length; i++) {
          ctx.fillStyle = (i === 0) ? 'green' : 'white';
          ctx.fillRect(snake[i].x * box, snake[i].y * box, box, box);
        }

// Draw the food
        ctx.fillStyle = 'red';
        ctx.fillRect(food.x * box, food.y * box, box, box);
      }

// Function to update the game state and handle game logic
      function update() {
        // Update the snake's position based on the current direction
        let head = { x: snake[0].x, y: snake[0].y };
        if (d === 'UP') head.y--;
        if (d === 'DOWN') head.y++;
        if (d === 'LEFT') head.x--;
        if (d === 'RIGHT') head.x++;

// Check if the snake eats the food
        if (head.x === food.x && head.y === food.y) {
          // Generate new food position
          food = {
            x: Math.floor(Math.random() * canvasSize),
            y: Math.floor(Math.random() * canvasSize)
          };
        } else {
          // Remove the last segment of the snake if no food is eaten
          snake.pop();
        }

// Check for game over conditions
        if (
          head.x < 0 || head.x >= canvasSize ||
          head.y < 0 || head.y >= canvasSize ||
          snake.some(segment => segment.x === head.x && segment.y === head.y)
        ) {
          clearInterval(game);
          alert('Game over!');
          return;
        }

// Add the head to the beginning of the snake
        snake.unshift(head);

// Draw the game
        draw();
      }

// Function to handle key press events and change the direction of the snake
      function keyPressed(event) {
        if (event.keyCode === 37 && d !== 'RIGHT') d = 'LEFT';
        if (event.keyCode === 38 && d !== 'DOWN') d = 'UP';
        if (event.keyCode === 39 && d !== 'LEFT') d = 'RIGHT';
        if (event.keyCode === 40 && d !== 'UP') d = 'DOWN';
      }

// Start the game
      document.addEventListener('keydown', keyPressed);
      const game = setInterval(update, 100);
    });
  </script>
</body>
</html>
```