AI game creator

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

No:7963

2744

←

Prev Next

→

Snake Game
Developer User4111｜Date and time 23/7/11 12:17:23
Build time 19.296 sec｜Game capacity 4.948KB｜

Script

Sure! Here's a simple implementation of the Snake game using JavaScript, enclosed in script tags, and playable in a single HTML file:

To play the game, copy and paste the above code into a new HTML file and open it using a web browser. Use the arrow keys to control the snake and try to eat the red food while avoiding collisions with the snake's own body or the game board boundary. Enjoy!

←

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      #game-board {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid black;
        margin: 0 auto;
      }
      
      .snake-body {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: green;
      }
      
      #food {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>
    
    <script>
      // Constants
      const boardSize = 20;
      const tileSize = 20;
      const initialSnakeSpeed = 200; // in milliseconds
      
      // Variables
      let gameBoard;
      let snake;
      let food;
      let direction;
      let score;
      let gameInterval;
      
      // Initialization
      function init() {
        gameBoard = document.getElementById("game-board");
        snake = [
          { x: 10, y: 10 },
          { x: 9, y: 10 },
          { x: 8, y: 10 }
        ];
        food = { x: 15, y: 10 };
        direction = "right";
        score = 0;
        
        renderSnake();
        renderFood();
        
        gameInterval = setInterval(moveSnake, initialSnakeSpeed);
        document.addEventListener("keydown", changeDirection);
      }
      
      // Rendering Functions
      function renderSnake() {
        gameBoard.innerHTML = "";
        
        snake.forEach(part => {
          const snakePart = document.createElement("div");
          snakePart.className = "snake-body";
          snakePart.style.left = part.x * tileSize + "px";
          snakePart.style.top = part.y * tileSize + "px";
          gameBoard.appendChild(snakePart);
        });
      }
      
      function renderFood() {
        const foodElement = document.createElement("div");
        foodElement.id = "food";
        foodElement.style.left = food.x * tileSize + "px";
        foodElement.style.top = food.y * tileSize + "px";
        gameBoard.appendChild(foodElement);
      }
      
      function gameOver() {
        clearInterval(gameInterval);
        document.removeEventListener("keydown", changeDirection);
        alert("Game Over! Your Score: " + score);
      }
      
      // Game Logic Functions
      function moveSnake() {
        const head = { x: snake[0].x, y: snake[0].y };
        
        switch(direction) {
          case "up":
            head.y--;
            break;
          
          case "down":
            head.y++;
            break;
          
          case "left":
            head.x--;
            break;
          
          case "right":
            head.x++;
            break;
        }
        
        if (isCollision(head) || isOutOfBounds(head)) {
          gameOver();
          return;
        }
        
        snake.unshift(head);
        
        if (head.x === food.x && head.y === food.y) {
          score++;
          generateFood();
        } else {
          snake.pop();
        }
        
        renderSnake();
      }
      
      function changeDirection(event) {
        const key = event.keyCode;
        
        switch(key) {
          case 37: // left arrow key
            if (direction !== "right")
              direction = "left";
            break;
          
          case 38: // up arrow key
            if (direction !== "down")
              direction = "up";
            break;
          
          case 39: // right arrow key
            if (direction !== "left")
              direction = "right";
            break;
          
          case 40: // down arrow key
            if (direction !== "up")
              direction = "down";
            break;
        }
      }
      
      function isCollision(position) {
        return snake.some(part => part.x === position.x && part.y === position.y);
      }
      
      function isOutOfBounds(position) {
        return (
          position.x > boardSize ||
          position.x < 0 ||
          position.y > boardSize ||
          position.y < 0
        );
      }
      
      function generateFood() {
        const maxX = boardSize - 1;
        const maxY = boardSize - 1;
        
        food = {
          x: Math.floor(Math.random() * maxX),
          y: Math.floor(Math.random() * maxY)
        };
        
        if (isCollision(food)) {
          generateFood();
        }
        
        renderFood();
      }
      
      // Start the game
      init();
    </script>
  </body>
</html>
```