AI game creator

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

No:35302

←

Prev Next

→

Snake Game
Developer User16504｜Date and time 24/1/14 1:01:35
Build time 18.897 sec｜Game capacity 4.803KB｜

Script

Sure, here's a basic implementation of the Snake game in a single HTML file using JavaScript:

This implementation creates a game board using a CSS grid layout. The snake and the food are represented by CSS classes with different background colors. The game logic is implemented in JavaScript, and it includes functions for updating the game state, checking for game over condition, drawing the game board, and handling key events for controlling the snake's direction. To play the game, you can use the arrow keys on your smartphone to control the snake's movement. The goal is to eat the food and avoid colliding with the snake's body or the game board edges. The game score is displayed, and when the game ends, a message box will appear showing your final score.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure, here's a basic implementation of the Snake game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      #game-board {
        display: grid;
        grid-template-columns: repeat(20, 20px);
      }

.cell {
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
      }

.snake {
        background-color: #333;
      }

.food {
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

// Initialize game variables
      let snake = [{ x: 10, y: 10 }];
      let dirX = 0;
      let dirY = 0;
      let food = getRandomFoodPosition();
      let score = 0;
      let speed = INITIAL_SPEED;
      let intervalId = null;

// Get random position for food
      function getRandomFoodPosition() {
        return {
          x: Math.floor(Math.random() * GRID_SIZE),
          y: Math.floor(Math.random() * GRID_SIZE),
        };
      }

// Game logic
      function update() {
        const head = { x: snake[0].x + dirX, y: snake[0].y + dirY };
        snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
          // Increment score and generate new food
          score += FOOD_SCORE;
          document.getElementById("score").textContent = score;
          food = getRandomFoodPosition();
          speed -= 10; // Increase speed
        } else {
          // Remove tail segment
          snake.pop();
        }

if (isGameOver()) {
          clearInterval(intervalId);
          alert("Game Over. Your score: " + score);
          resetGame();
        }

draw();
      }

// Check if game is over
      function isGameOver() {
        const head = snake[0];
        return (
          head.x < 0 ||
          head.x >= GRID_SIZE ||
          head.y < 0 ||
          head.y >= GRID_SIZE ||
          snake.some((segment, index) => {
            if (index !== 0 && segment.x === head.x && segment.y === head.y) {
              return true;
            }
          })
        );
      }

// Draw game board
      function draw() {
        const gameBoard = document.getElementById("game-board");
        gameBoard.innerHTML = "";

// Draw snake
        snake.forEach((segment) => {
          const cell = document.createElement("div");
          cell.classList.add("cell", "snake");
          cell.style.gridColumnStart = segment.x + 1;
          cell.style.gridRowStart = segment.y + 1;
          gameBoard.appendChild(cell);
        });

// Draw food
        const foodCell = document.createElement("div");
        foodCell.classList.add("cell", "food");
        foodCell.style.gridColumnStart = food.x + 1;
        foodCell.style.gridRowStart = food.y + 1;
        gameBoard.appendChild(foodCell);
      }

// Handle key events
      document.addEventListener("keydown", (event) => {
        // Arrow Up
        if (event.keyCode === 38 && dirY !== 1) {
          dirX = 0;
          dirY = -1;
        }
        // Arrow Down
        else if (event.keyCode === 40 && dirY !== -1) {
          dirX = 0;
          dirY = 1;
        }
        // Arrow Left
        else if (event.keyCode === 37 && dirX !== 1) {
          dirX = -1;
          dirY = 0;
        }
        // Arrow Right
        else if (event.keyCode === 39 && dirX !== -1) {
          dirX = 1;
          dirY = 0;
        }
      });

// Start game
      function startGame() {
        intervalId = setInterval(update, speed);
      }

// Reset game
      function resetGame() {
        snake = [{ x: 10, y: 10 }];
        dirX = 0;
        dirY = 0;
        food = getRandomFoodPosition();
        score = 0;
        speed = INITIAL_SPEED;
        document.getElementById("score").textContent = score;
      }

// Start game when page loads
      window.onload = function () {
        startGame();
      };
    </script>
  </body>
</html>
```

To play the game, you can use the arrow keys on your smartphone to control the snake's movement. The goal is to eat the food and avoid colliding with the snake's body or the game board edges. The game score is displayed, and when the game ends, a message box will appear showing your final score.