AI game creator

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

No:17802

←

Prev Next

→

Snake Game
Developer User7794｜Date and time 23/9/24 17:48:30
Build time 49.251 sec｜Game capacity 4.028KB｜

Script

Sure! Here's a simple implementation of the Snake Game using JavaScript in a single HTML file:

In this implementation, the game is played on a 300x300 game board represented by the HTML canvas element. The snake is controlled using the arrow keys on a smartphone. The goal is to eat the red fruit that appears randomly on the board without colliding with the boundaries or the snake's own body. The game logic updates and renders the game state on the canvas every 100 milliseconds, creating the illusion of continuous motion. The game will reset if the snake collides with the boundaries or its own body. You can copy this entire code into a single HTML file and open it in a web browser on your smartphone to play the Snake Game. Remember to open the file in a web browser, as the JavaScript code needs to run inside a browser context.

←

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 in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      border: 1px solid #000;
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <canvas id="game-board"></canvas>
  
  <script>
    // Create game board
    const canvas = document.getElementById("game-board");
    const context = canvas.getContext("2d");
    
    // Set initial snake position and direction
    let snakeX = 10;
    let snakeY = 10;
    let directionX = 0;
    let directionY = 0;
    
    // Set initial fruit position
    let fruitX = 15;
    let fruitY = 15;
    
    // Set initial snake body size
    let snakeBody = [
      { x: 10, y: 10 }
    ];
    
    // Function to handle keyboard input
    document.addEventListener("keydown", handleKeyPress);
    
    function handleKeyPress(event) {
      if (event.key === "ArrowUp" && directionY !== 1) {
        directionY = -1;
        directionX = 0;
      } else if (event.key === "ArrowRight" && directionX !== -1) {
        directionX = 1;
        directionY = 0;
      } else if (event.key === "ArrowDown" && directionY !== -1) {
        directionY = 1;
        directionX = 0;
      } else if (event.key === "ArrowLeft" && directionX !== 1) {
        directionX = -1;
        directionY = 0;
      }
    }
    
    // Function to update game state
    function update() {
      // Update snake position
      snakeX += directionX;
      snakeY += directionY;
      
      // Add new segment to the snake body
      snakeBody.push({ x: snakeX, y: snakeY });
      
      // Remove tail segment if snake didn't eat a fruit
      if (snakeX !== fruitX || snakeY !== fruitY) {
        snakeBody.shift();
      } else {
        // Generate new fruit location
        fruitX = Math.floor(Math.random() * (canvas.width / 10));
        fruitY = Math.floor(Math.random() * (canvas.height / 10));
      }
      
      // Check for collision with game boundaries
      if (
        snakeX < 0 || 
        snakeY < 0 || 
        snakeX >= canvas.width / 10 || 
        snakeY >= canvas.height / 10
      ) {
        // Game over, reset game
        resetGame();
        return;
      }
      
      // Check for collision with snake body
      for (let i = 0; i < snakeBody.length - 1; i++) {
        if (snakeBody[i].x === snakeX && snakeBody[i].y === snakeY) {
          // Game over, reset game
          resetGame();
          return;
        }
      }
      
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw snake
      context.fillStyle = "#000";
      snakeBody.forEach(segment => {
        context.fillRect(segment.x * 10, segment.y * 10, 10, 10);
      });
      
      // Draw fruit
      context.fillStyle = "#f00";
      context.fillRect(fruitX * 10, fruitY * 10, 10, 10);
      
      // Schedule next update
      setTimeout(update, 100);
    }
    
    // Function to reset game state
    function resetGame() {
      snakeX = 10;
      snakeY = 10;
      directionX = 0;
      directionY = 0;
      snakeBody = [
        { x: 10, y: 10 }
      ];
      fruitX = 15;
      fruitY = 15;
    }
    
    // Start game
    update();
  </script>
</body>
</html>
```

The game logic updates and renders the game state on the canvas every 100 milliseconds, creating the illusion of continuous motion. The game will reset if the snake collides with the boundaries or its own body.

You can copy this entire code into a single HTML file and open it in a web browser on your smartphone to play the Snake Game. Remember to open the file in a web browser, as the JavaScript code needs to run inside a browser context.