AI game creator

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

No:19584

←

Prev Next

→

Snake Game
Developer User8704｜Date and time 23/10/5 1:33:09
Build time 24.407 sec｜Game capacity 3.745KB｜

Script

Sure, here's a simple implementation of the classic Snake Game using JavaScript. You can copy and save the code as a single HTML file and open it in a browser to play the game.

This code sets up a canvas element where the game is rendered. The snake is controlled using arrow keys, and the objective is to eat the randomly placed food while avoiding colliding with the walls or the snake's own body. The game loop updates the snake's movement, checks for collisions, and updates the canvas accordingly. Once the game is over, an alert is displayed, and the game loop is stopped.

←

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 using JavaScript. You can copy and save the code as a single HTML file and open it in a browser to play the game.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #gameCanvas { border: 1px solid #000; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Set up initial variables
    const gridSize = 20;
    const totalSize = canvas.width / gridSize;
    let snake = [{ x: 10, y: 10 }];
    let direction = "right";
    let food = getRandomFood();

// Event listener for arrow key controls
    document.addEventListener("keydown", function(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";
    });

// Main game loop
    function gameLoop() {
      clearCanvas();
      moveSnake();
      drawSnake();
      drawFood();

if (gameOver()) {
        clearInterval(gameInterval);
        alert("Game Over!");
        return;
      }
    }

// Move the snake
    function moveSnake() {
      const head = { x: snake[0].x, y: snake[0].y };

if (direction === "right") head.x++;
      else if (direction === "left") head.x--;
      else if (direction === "up") head.y--;
      else if (direction === "down") head.y++;

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
        food = getRandomFood();
      } else {
        snake.pop();
      }
    }

// Check if game over
    function gameOver() {
      const head = snake[0];

if (
        head.x < 0 ||
        head.x >= totalSize ||
        head.y < 0 ||
        head.y >= totalSize ||
        checkCollision()
      ) {
        return true;
      }
      return false;
    }

// Check if snake collides with itself
    function checkCollision() {
      const head = snake[0];

for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
          return true;
        }
      }
      return false;
    }

// Generate random food position
    function getRandomFood() {
      return {
        x: Math.floor(Math.random() * totalSize),
        y: Math.floor(Math.random() * totalSize)
      };
    }

// Drawing functions
    function clearCanvas() {
      context.fillStyle = "#ffffff";
      context.fillRect(0, 0, canvas.width, canvas.height);
    }

function drawSnake() {
      snake.forEach(segment => {
        context.fillStyle = "#000000";
        context.fillRect(
          segment.x * gridSize,
          segment.y * gridSize,
          gridSize,
          gridSize
        );
      });
    }

function drawFood() {
      context.fillStyle = "#ff0000";
      context.fillRect(
        food.x * gridSize,
        food.y * gridSize,
        gridSize,
        gridSize
      );
    }

// Start the game loop
    const gameInterval = setInterval(gameLoop, 100);
  </script>
</body>
</html>
```