AI game creator

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

No:29845

104

←

Prev Next

→

Snake Game
Developer User14643｜Date and time 23/12/19 9:17:36
Build time 11.642 sec｜Game capacity 3.316KB｜

Script

Sure! Here's an example of a simple Snake Game implemented as a single HTML file using JavaScript:

This code sets up a basic Snake Game where the player controls a snake using arrow keys on a smartphone. The snake moves around the canvas, and its goal is to eat the randomly generated food. As the snake eats the food, it grows longer. The game ends if the snake collides with itself. The game loop continuously updates the game state and renders it on the canvas. Please note that this code is a basic implementation, and you can further enhance it by adding scoring, game over conditions, and more interactive features.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's an example of a simple Snake Game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    canvas {
      background: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game variables
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
    const box = 20; // Size of each box/pixel
    let snake = [{ x: 10 * box, y: 10 * box }]; // Initial position of the snake
    let direction = "right";
    let food = { x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box }; // Random position of the food

// Game loop
    function gameLoop() {
      setTimeout(function () {
        clearCanvas(); // Clear the canvas
        drawFood(); // Draw the food
        moveSnake(); // Move the snake
        drawSnake(); // Draw the snake

// Repeat the game loop
        gameLoop();
      }, 100);
    }

// Event listener for arrow key press
    document.addEventListener("keydown", changeDirection);

function changeDirection(event) {
      if (event.keyCode == 37 && direction !== "right") direction = "left";
      else if (event.keyCode == 38 && direction !== "down") direction = "up";
      else if (event.keyCode == 39 && direction !== "left") direction = "right";
      else if (event.keyCode == 40 && direction !== "up") direction = "down";
    }

// Move the snake
    function moveSnake() {
      let head = { x: snake[0].x, y: snake[0].y };
      if (direction === "left") head.x -= box;
      else if (direction === "up") head.y -= box;
      else if (direction === "right") head.x += box;
      else if (direction === "down") head.y += box;
      snake.unshift(head); // Add the new head to the snake

// Check if the snake has collided with the food
      if (snake[0].x === food.x && snake[0].y === food.y) {
        // Create new food at random position
        food = { x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box };
      } else {
        // Remove the tail of the snake
        snake.pop();
      }
    }

// Draw the snake
    function drawSnake() {
      snake.forEach(function (segment) {
        context.fillStyle = "#000";
        context.fillRect(segment.x, segment.y, box, box);
      });
    }

// Draw the food
    function drawFood() {
      context.fillStyle = "#f00";
      context.fillRect(food.x, food.y, box, box);
    }

// Clear the canvas
    function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>
```

Please note that this code is a basic implementation, and you can further enhance it by adding scoring, game over conditions, and more interactive features.