AI game creator

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

No:12525

←

Prev Next

→

Snake Game
Developer User5172｜Date and time 23/8/19 6:46:03
Build time 14.793 sec｜Game capacity 3.89KB｜

Script

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

This implementation will create a snake game that you can play on any device with a web browser, including smartphones. The snake is controlled using arrow keys, and the goal is to eat the randomly generated food while avoiding collisions with the walls or the snake's own body.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    canvas {
      border: 1px solid #ffffff;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="320"></canvas>

// Define game settings
    const gridSize = 16;
    const gridWidth = canvas.width / gridSize;
    const gridHeight = canvas.height / gridSize;
    const initialSnakeLength = 5;
    const initialSnakeSpeed = 150; // milliseconds per frame

// Set up game state
    let snake = [];
    let snakeSpeed = initialSnakeSpeed;
    let direction = "right";
    let food = {};

// Generate a random position for the food
    function generateFood() {
      food = {
        x: Math.floor(Math.random() * gridWidth) * gridSize,
        y: Math.floor(Math.random() * gridHeight) * gridSize,
      };
    }

// Initialize the snake
    function initializeSnake() {
      for (let i = initialSnakeLength - 1; i >= 0; i--) {
        snake.push({ x: i * gridSize, y: 0 });
      }
    }

// Handle player input
    document.addEventListener("keydown", (event) => {
      const key = event.keyCode;
      if (key === 37 && direction !== "right") direction = "left";
      else if (key === 38 && direction !== "down") direction = "up";
      else if (key === 39 && direction !== "left") direction = "right";
      else if (key === 40 && direction !== "up") direction = "down";
    });

// Update game state
    function update() {
      // Move the snake
      const head = { x: snake[0].x, y: snake[0].y };
      switch (direction) {
        case "right":
          head.x += gridSize;
          break;
        case "left":
          head.x -= gridSize;
          break;
        case "up":
          head.y -= gridSize;
          break;
        case "down":
          head.y += gridSize;
          break;
      }
      snake.unshift(head);

// Check if snake eats food
      if (head.x === food.x && head.y === food.y) {
        snakeSpeed -= 5; // Increase speed after eating food
        generateFood();
      } else {
        snake.pop();
      }

// Check for collision
      if (
        head.x < 0 ||
        head.x >= canvas.width ||
        head.y < 0 ||
        head.y >= canvas.height ||
        snake.some((segment, index) =>
          index !== 0 && segment.x === head.x && segment.y === head.y
        )
      ) {
        // Game over
        clearInterval(gameLoop);
      }

// Render the game
      draw();
    }

// Draw the game state on the canvas
    function draw() {
      // Clear the canvas
      context.fillStyle = "#333333";
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw the snake
      snake.forEach((segment, index) => {
        context.fillStyle = index === 0 ? "#ffffff" : "#bbbbbb";
        context.fillRect(segment.x, segment.y, gridSize, gridSize);
      });

// Draw the food
      context.fillStyle = "#ff0000";
      context.fillRect(food.x, food.y, gridSize, gridSize);
    }

// Start the game
    function startGame() {
      initializeSnake();
      generateFood();
      const gameLoop = setInterval(update, snakeSpeed);
    }

// Initialize and start the game
    startGame();
  </script>
</body>
</html>
```