AI game creator

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

No:30528

←

Prev Next

→

Snake game
Developer User14825｜Date and time 23/12/22 13:49:21
Build time 29.852 sec｜Game capacity 4.995KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using HTML, CSS, and JavaScript:

You can save the above code in a single HTML file and open it in a web browser to play the Snake game. The game board will be displayed as a square box where the snake (represented by red dot and green tail) will move and try to eat the blue food. Use the arrow keys on your smartphone to control the movement of the snake. The game ends if the snake collides with itself or the borders. Once the game is over, an alert will be shown, and you can restart the game by clicking "OK".

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a simple implementation of the classic Snake game using HTML, CSS, and JavaScript:

```
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>

.dot {
      position: absolute;
      height: 20px;
      width: 20px;
    }

#head {
      background-color: red;
    }

.tail {
      background-color: green;
    }

#food {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Game variables
    var snake = [];
    var direction = 'right';
    var food = {};
    var intervalId;
    var speed = INITIAL_SPEED;

function startGame() {
      // Create initial snake
      createSnake();

// Create initial food
      createFood();

// Set up keyboard event listener
      document.addEventListener('keydown', setDirection);

// Set up game loop
      intervalId = setInterval(moveSnake, speed);
    }

function createDot(x, y, className) {
      var dot = document.createElement('div');
      dot.className = className;
      dot.style.top = y + 'px';
      dot.style.left = x + 'px';
      return dot;
    }

function createSnake() {
      for (var i = 0; i < 5; i++) {
        var dot = createDot(i * DOT_SIZE, 0, i === 0 ? 'dot' : 'tail');
        document.getElementById('game-board').appendChild(dot);
        snake.push(dot);
      }
    }

function createFood() {
      var x = Math.floor(Math.random() * (BOARD_SIZE / DOT_SIZE)) * DOT_SIZE;
      var y = Math.floor(Math.random() * (BOARD_SIZE / DOT_SIZE)) * DOT_SIZE;

food = createDot(x, y, 'dot');
      document.getElementById('game-board').appendChild(food);
    }

function setDirection(event) {
      if (event.key === 'ArrowUp' && direction !== 'down')
        direction = 'up';
      else if (event.key === 'ArrowDown' && direction !== 'up')
        direction = 'down';
      else if (event.key === 'ArrowLeft' && direction !== 'right')
        direction = 'left';
      else if (event.key === 'ArrowRight' && direction !== 'left')
        direction = 'right';
    }

function moveSnake() {
      var head = snake[0];
      var tail = snake.pop();
      var oldHeadX = parseInt(head.style.left);
      var oldHeadY = parseInt(head.style.top);

if (direction === 'up')
        head.style.top = (oldHeadY - DOT_SIZE) + 'px';
      else if (direction === 'down')
        head.style.top = (oldHeadY + DOT_SIZE) + 'px';
      else if (direction === 'left')
        head.style.left = (oldHeadX - DOT_SIZE) + 'px';
      else if (direction === 'right')
        head.style.left = (oldHeadX + DOT_SIZE) + 'px';

snake.unshift(head);

// Check for collision with food
      if (collision(head, food)) {
        document.getElementById('game-board').removeChild(food);
        createFood();
        var newTail = createDot(0, 0, 'tail');
        snake.push(newTail);
        document.getElementById('game-board').appendChild(newTail);

// Increase speed every time the snake eats the food
        clearInterval(intervalId);
        speed *= 0.9;
        intervalId = setInterval(moveSnake, speed);
      }
      
      // Check for self-collision
      for (var i = 1; i < snake.length; i++) {
        if (collision(head, snake[i])) {
          clearInterval(intervalId);
          alert('Game Over!');
          resetGame();
          return;
        }
      }
      
      // Check for collision with borders
      if (
        parseInt(head.style.left) >= BOARD_SIZE || parseInt(head.style.left) < 0 ||
        parseInt(head.style.top) >= BOARD_SIZE || parseInt(head.style.top) < 0
      ) {
        clearInterval(intervalId);
        alert('Game Over!');
        resetGame();
        return;
      }
    }

function collision(obj1, obj2) {
      return (
        parseInt(obj1.style.left) === parseInt(obj2.style.left) &&
        parseInt(obj1.style.top) === parseInt(obj2.style.top)
      );
    }

function resetGame() {
      snake.forEach(function(dot) {
        document.getElementById('game-board').removeChild(dot);
      });
      snake = [];
      direction = 'right';
      speed = INITIAL_SPEED;
      startGame();
    }

startGame();
  </script>
</body>
</html>
```

Use the arrow keys on your smartphone to control the movement of the snake. The game ends if the snake collides with itself or the borders. Once the game is over, an alert will be shown, and you can restart the game by clicking "OK".