AI game creator

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

No:25727

←

Prev Next

→

Snake Game
Developer User12648｜Date and time 23/11/24 8:04:32
Build time 104.867 sec｜Game capacity 3.581KB｜

Script

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

To play the game, you can open this HTML file in a web browser (on a smartphone or computer) and control the snake using the arrow keys. The objective is to eat the red food and avoid colliding with the snake's own body. Enjoy playing!

←

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 with JavaScript:

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

// Set up initial game state
      var snakeSize = 20;
      var snake = [{ x: 3, y: 0 }, { x: 2, y: 0 }, { x: 1, y: 0 }, { x: 0, y: 0 }];
      var food = { x: 10, y: 10 };
      var direction = "right";

// Function to draw game objects
      function draw() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw snake
        ctx.fillStyle = "#000";
        snake.forEach(function(segment) {
          ctx.fillRect(segment.x * snakeSize, segment.y * snakeSize, snakeSize, snakeSize);
        });

// Draw food
        ctx.fillStyle = "#f00";
        ctx.fillRect(food.x * snakeSize, food.y * snakeSize, snakeSize, snakeSize);
      }

// Function to move the snake
      function move() {
        // Create new head segment based on current direction
        var head = Object.assign({}, snake[0]);
        if (direction === "right") head.x++;
        if (direction === "left") head.x--;
        if (direction === "up") head.y--;
        if (direction === "down") head.y++;

// Move snake by adding new head and removing tail segment
        snake.unshift(head);
        snake.pop();
      }

// Function to handle user input
      function handleInput(event) {
        if (event.key === "ArrowRight" && direction !== "left") direction = "right";
        if (event.key === "ArrowLeft" && direction !== "right") direction = "left";
        if (event.key === "ArrowUp" && direction !== "down") direction = "up";
        if (event.key === "ArrowDown" && direction !== "up") direction = "down";
      }

// Function to check for collision with food or self
      function checkCollision() {
        // Check collision with food
        if (snake[0].x === food.x && snake[0].y === food.y) {
          // Generate new food location
          food.x = Math.floor(Math.random() * (canvas.width / snakeSize));
          food.y = Math.floor(Math.random() * (canvas.height / snakeSize));

// Increase snake length
          snake.push({});
        }

// Check collision with self
        for (var i = 1; i < snake.length; i++) {
          if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
            // Game over
            clearInterval(gameLoop);
            alert("Game over!");
            break;
          }
        }
      }

// Main game loop
      function gameLoop() {
        draw();
        move();
        checkCollision();
      }

// Start game on page load
      document.addEventListener("DOMContentLoaded", function() {
        // Set up keyboard controls
        document.addEventListener("keydown", handleInput);

// Start game loop
        var gameLoop = setInterval(gameLoop, 100);
      });
    })();
  </script>
</body>
</html>
```