AI game creator

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

No:39915

←

Prev Next

→

Snake Game
Developer User17863｜Date and time 24/1/30 21:28:24
Build time 19.213 sec｜Game capacity 4.624KB｜

Script

Sure! Here's a simple implementation of the Snake game using JavaScript and HTML. You can play it directly by saving the code in a single HTML file and opening it in a web browser.

This implementation creates a game board with a snake and a randomly generated food item. You can control the snake's direction using the arrow keys. The game ends when the snake hits the walls or collides with itself. I hope you enjoy playing the Snake game!

←

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 Snake game using JavaScript and HTML. You can play it directly by saving the code in a single HTML file and opening it in a web browser.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

.snake-dot {
      width: 20px;
      height: 20px;
      background-color: green;
      border: 1px solid black;
      position: absolute;
    }

#food {
      width: 20px;
      height: 20px;
      background-color: red;
      border: 1px solid black;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Helper function to generate random positions
    function getRandomPosition() {
      return Math.floor(Math.random() * boardSize);
    }

// Helper function to generate food position
    function generateFoodPosition() {
      return { x: getRandomPosition(), y: getRandomPosition() };
    }

// Helper function to validate if the snake has collided with the food
    function hasCollidedWithFood() {
      return snake[0].x === food.x && snake[0].y === food.y;
    }

// Helper function to update the game state
    function updateGameState() {
      const head = { ...snake[0] };

// Update the head position based on the current direction
      if (direction === 'up') {
        head.y -= 1;
      } else if (direction === 'down') {
        head.y += 1;
      } else if (direction === 'left') {
        head.x -= 1;
      } else if (direction === 'right') {
        head.x += 1;
      }

// Add the new head to the snake
      snake.unshift(head);

// Check if the snake has collided with the food
      if (hasCollidedWithFood()) {
        food = generateFoodPosition();
      } else {
        // Remove the tail if the snake did not eat the food
        snake.pop();
      }
    }

// Helper function to check if the game is over
    function isGameOver() {
      const head = snake[0];

// Check if the snake has collided with the walls
      if (
        head.x < 0 || head.x >= boardSize ||
        head.y < 0 || head.y >= boardSize
      ) {
        return true;
      }

// Check if the snake has collided with itself
      for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
          return true;
        }
      }

return false;
    }

// Helper function to handle keyboard events
    function handleKeydown(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';
      }
    }

// Helper function to render the game board
    function render() {
      const gameBoard = document.getElementById('game-board');

// Clear the game board
      gameBoard.innerHTML = '';

// Render the snake
      snake.forEach((dot) => {
        const snakeDot = document.createElement('div');
        snakeDot.className = 'snake-dot';
        snakeDot.style.left = `${dot.x * dotSize}px`;
        snakeDot.style.top = `${dot.y * dotSize}px`;
        gameBoard.appendChild(snakeDot);
      });

// Render the food
      const foodDot = document.createElement('div');
      foodDot.id = 'food';
      foodDot.style.left = `${food.x * dotSize}px`;
      foodDot.style.top = `${food.y * dotSize}px`;
      gameBoard.appendChild(foodDot);
    }

// Start the game
    function startGame() {
      setInterval(() => {
        if (isGameOver()) {
          alert('Game Over!');
          location.reload();
        }

updateGameState();
        render();
      }, 200);

document.addEventListener('keydown', handleKeydown);
    }

// Call the startGame function to begin the game
    startGame();
  </script>
</body>
</html>
```

I hope you enjoy playing the Snake game!