AI game creator

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

No:15183

←

Prev Next

→

Snake Game
Developer User6556｜Date and time 23/9/7 2:57:38
Build time 73.866 sec｜Game capacity 4.365KB｜

Script

Sure! Here's a simple implementation of the classic Snake game as a single HTML file using JavaScript:

To play the game, simply open the HTML file in a web browser on your smartphone. The snake can be controlled using the arrow keys, and the objective is to eat the food to grow the snake without colliding with the game board boundaries or its own body.

←

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 as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #game-board {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #000;
      }
      .snake {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #000;
      }
      .food {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

// Snake starting position
      let snakeX = 0;
      let snakeY = 0;
      let snakeDirection = "right";

// Food starting position
      let foodX = Math.floor(Math.random() * 20) * 20;
      let foodY = Math.floor(Math.random() * 20) * 20;

// Game loop
      setInterval(function() {
        // Move the snake
        if (snakeDirection === "right") {
          snakeX += 20;
        } else if (snakeDirection === "left") {
          snakeX -= 20;
        } else if (snakeDirection === "up") {
          snakeY -= 20;
        } else if (snakeDirection === "down") {
          snakeY += 20;
        }

// Check for collision with food
        if (snakeX === foodX && snakeY === foodY) {
          // Increase snake length
          const snakeTail = document.createElement("div");
          snakeTail.className = "snake";
          gameBoard.appendChild(snakeTail);

// Move food to a new random position
          foodX = Math.floor(Math.random() * 20) * 20;
          foodY = Math.floor(Math.random() * 20) * 20;
        }

// Check for collision with game board boundaries
        if (snakeX < 0 || snakeY < 0 || snakeX >= 400 || snakeY >= 400) {
          // Game over
          clearInterval();
          alert("Game Over!");
          location.reload(); // Reload the page to play again
        }

// Update snake position
        const snake = document.getElementsByClassName("snake");
        snake[snake.length - 1].style.left = snakeX + "px";
        snake[snake.length - 1].style.top = snakeY + "px";

// Check for collision with snake body
        for (let i = 0; i < snake.length - 1; i++) {
          if (
            parseInt(snake[i].style.left) === snakeX &&
            parseInt(snake[i].style.top) === snakeY
          ) {
            // Game over
            clearInterval();
            alert("Game Over!");
            location.reload(); // Reload the page to play again
          }
        }

// Move snake tail by removing the first snake element and appending it to the end
        const firstSnake = snake[0];
        const parent = firstSnake.parentElement;
        parent.removeChild(firstSnake);
        parent.appendChild(firstSnake);

// Add new snake tail element
        const newTail = document.createElement("div");
        newTail.className = "snake";
        gameBoard.appendChild(newTail);
      }, 200);

// Listen for arrow key presses to change snake direction
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowUp" && snakeDirection !== "down") {
          snakeDirection = "up";
        } else if (event.key === "ArrowDown" && snakeDirection !== "up") {
          snakeDirection = "down";
        } else if (event.key === "ArrowLeft" && snakeDirection !== "right") {
          snakeDirection = "left";
        } else if (event.key === "ArrowRight" && snakeDirection !== "left") {
          snakeDirection = "right";
        }
      });

// Add initial snake and food elements
      const snake = document.createElement("div");
      const food = document.createElement("div");
      snake.className = "snake";
      food.className = "food";
      gameBoard.appendChild(snake);
      gameBoard.appendChild(food);
      food.style.left = foodX + "px";
      food.style.top = foodY + "px";
    </script>
  </body>
</html>
```