AI game creator

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

No:38125

136

←

Prev Next

→

Snake Game
Developer User17234｜Date and time 24/1/22 19:42:18
Build time 16.047 sec｜Game capacity 3.685KB｜

Script

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

This game uses the HTML `<div>` element to represent the game board and the Snake's body segments. Pictograms can be added by using appropriate CSS styles for the snake and food elements. The game is played using the arrow keys to control the snake's direction. The goal is to eat the food items and avoid collision with the walls or the snake's own body segments.

←

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>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

board.style.width = `${boardWidth * 20}px`;
    board.style.height = `${boardHeight * 20}px`;

// Snake object
    const snake = {
      direction: "right",
      body: [{ x: 10, y: 10 }]
    };

// Function to create a new food item
    function createFood() {
      const food = document.createElement("div");
      food.className = "food";
      food.style.left = `${Math.floor(Math.random() * boardWidth) * 20}px`;
      food.style.top = `${Math.floor(Math.random() * boardHeight) * 20}px`;
      board.appendChild(food);
    }

// Function to update the snake's position
    function updateSnake() {
      const head = { ...snake.body[0] };

switch (snake.direction) {
        case "up":
          head.y -= 1;
          break;
        case "right":
          head.x += 1;
          break;
        case "down":
          head.y += 1;
          break;
        case "left":
          head.x -= 1;
          break;
      }

snake.body.unshift(head);

// Check for collision with food
      const food = document.querySelector(".food");
      if (food && food.style.left === `${head.x * 20}px` && food.style.top === `${head.y * 20}px`) {
        food.remove();
        createFood();
      } else {
        snake.body.pop();
      }

// Check for collision with walls or itself
      if (
        head.x >= boardWidth ||
        head.x < 0 ||
        head.y >= boardHeight ||
        head.y < 0 ||
        snake.body.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y)
      ) {
        clearInterval(gameLoop);
        alert("Game over!");
      }

// Update the game board
      while (board.firstChild) {
        board.firstChild.remove();
      }

snake.body.forEach(segment => {
        const bodySegment = document.createElement("div");
        bodySegment.className = "snake";
        bodySegment.style.left = `${segment.x * 20}px`;
        bodySegment.style.top = `${segment.y * 20}px`;
        board.appendChild(bodySegment);
      });
    }

// Function to handle keyboard input
    function handleKeyDown(event) {
      const key = event.key.toLowerCase();

if (key === "arrowup" && snake.direction !== "down") {
        snake.direction = "up";
      } else if (key === "arrowright" && snake.direction !== "left") {
        snake.direction = "right";
      } else if (key === "arrowdown" && snake.direction !== "up") {
        snake.direction = "down";
      } else if (key === "arrowleft" && snake.direction !== "right") {
        snake.direction = "left";
      }
    }

// Add keyboard event listener
    document.addEventListener("keydown", handleKeyDown);

// Start the game loop
    const gameLoop = setInterval(updateSnake, 200);
    
    // Create initial food
    createFood();
  </script>
</body>
</html>
```