AI game creator

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

No:14565

←

Prev Next

→

Snake Game
Developer User6282｜Date and time 23/9/3 3:51:35
Build time 33.36 sec｜Game capacity 3.671KB｜

Script

Sure! Here's an example of a Snake Game implemented in a single HTML file using JavaScript and enclosed in script tags:

This implementation creates a Snake Game where the snake (green) moves around on a game board and tries to eat the food (red). The game ends if the snake collides with itself or the game board edges. You can control the direction of the snake using the arrow keys on your smartphone. The score is displayed as an alert when the game ends.

←

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 in a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid black;
    }
    
    .snake, .food {
      position: absolute;
      width: 20px;
      height: 20px;
    }
    
    .snake {
      background-color: green;
    }
    
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  <script>
    // Snake Game implementation
    var gameBoard = document.getElementById('game-board');
    var snake = [{ x: 140, y: 140 }]; // initial position of the snake
    var food = { x: 60, y: 60 }; // initial position of the food
    var direction = 'right'; // starting direction
    var interval;
    
    function draw() {
      gameBoard.innerHTML = ''; // clear game board
      // draw snake
      snake.forEach(function(segment) {
        var snakeElement = document.createElement('div');
        snakeElement.className = 'snake';
        snakeElement.style.left = segment.x + 'px';
        snakeElement.style.top = segment.y + 'px';
        gameBoard.appendChild(snakeElement);
      });
      // draw food
      var foodElement = document.createElement('div');
      foodElement.className = 'food';
      foodElement.style.left = food.x + 'px';
      foodElement.style.top = food.y + 'px';
      gameBoard.appendChild(foodElement);
    }
    
    function move() {
      var head = { x: snake[0].x, y: snake[0].y };
      // update head position based on current direction
      if (direction === 'up') head.y -= 20;
      if (direction === 'down') head.y += 20;
      if (direction === 'left') head.x -= 20;
      if (direction === 'right') head.x += 20;
      snake.unshift(head);
      if (head.x === food.x && head.y === food.y) {
        // snake ate the food, generate new food
        food.x = Math.floor(Math.random() * 15) * 20;
        food.y = Math.floor(Math.random() * 15) * 20;
      } else {
        // remove tail segment
        snake.pop();
      }
      // check if snake collided with itself or the game board
      if (head.x < 0 || head.x >= 300 || head.y < 0 || head.y >= 300 || checkCollision(head)) {
        clearInterval(interval);
        alert('Game Over! Your Score: ' + (snake.length - 1));
        startGame();
        return;
      }
      draw();
    }
    
    function checkCollision(segment) {
      return snake.slice(1).some(function(bodySegment) {
        return bodySegment.x === segment.x && bodySegment.y === segment.y;
      });
    }
    
    function changeDirection(event) {
      if (event.keyCode === 38 && direction !== 'down') direction = 'up';
      if (event.keyCode === 40 && direction !== 'up') direction = 'down';
      if (event.keyCode === 37 && direction !== 'right') direction = 'left';
      if (event.keyCode === 39 && direction !== 'left') direction = 'right';
    }
    
    function startGame() {
      snake = [{ x: 140, y: 140 }];
      food = { x: 60, y: 60 };
      direction = 'right';
      interval = setInterval(move, 200);
    }
    
    // Start the game
    startGame();
    window.addEventListener('keydown', changeDirection);
  </script>
</body>
</html>
```