AI game creator

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

No:41758

←

Prev Next

→

snake
Developer Bowgray｜Date and time 24/2/9 19:28:50
Build time 10.836 sec｜Game capacity 3.259KB｜

Script

Sure! Here's an example of a simple Snake game implemented as a single HTML file using JavaScript and enclosed in script tags:

This code sets up a basic Snake game on a canvas element. You can control the snake using the arrow keys, and the goal is to eat the red food while avoiding collisions with the snake's body and the boundaries of the grid.

←

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 and enclosed in script tags:

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

const gridSize = 20;
    const gridWidth = canvas.width / gridSize;
    const gridHeight = canvas.height / gridSize;

let snake = [
      { x: 10, y: 10 },
      { x: 10, y: 11 },
      { x: 10, y: 12 },
    ];
    let direction = "right";
    let food = getRandomFoodPosition();

function getRandomFoodPosition() {
      return {
        x: Math.floor(Math.random() * gridWidth),
        y: Math.floor(Math.random() * gridHeight),
      };
    }

function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#000";
      ctx.fillText("Score: " + (snake.length - 3), 10, 20);
    }

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

function drawFood() {
      ctx.fillStyle = "red";
      ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
    }

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

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

snake.unshift(head);

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

function checkCollision() {
      const head = snake[0];

if (
        head.x < 0 ||
        head.x >= gridWidth ||
        head.y < 0 ||
        head.y >= gridHeight ||
        snake.slice(1).some((segment) => segment.x === head.x && segment.y === head.y)
      ) {
        clearInterval(gameInterval);
        alert("Game Over!");
      }
    }

function handleKeyPress(e) {
      const keyPressed = e.key;

if (keyPressed === "ArrowUp" && direction !== "down") {
        direction = "up";
      }
      if (keyPressed === "ArrowDown" && direction !== "up") {
        direction = "down";
      }
      if (keyPressed === "ArrowLeft" && direction !== "right") {
        direction = "left";
      }
      if (keyPressed === "ArrowRight" && direction !== "left") {
        direction = "right";
      }
    }

document.addEventListener("keydown", handleKeyPress);

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawScore();
      drawSnake();
      drawFood();
      moveSnake();
      checkCollision();
    }

const gameInterval = setInterval(gameLoop, 150);
  </script>
</body>
</html>
```