AI game creator

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

No:37001

154

←

Prev Next

→

Snake Game
Developer User16943｜Date and time 24/1/19 19:11:38
Build time 18.94 sec｜Game capacity 4.162KB｜

Script

Sure! Here's a simple implementation of the classic Snake Game using HTML, CSS, and JavaScript:

To play the game, you can save the above code into an HTML file (e.g., `snake.html`) and open it in a web browser, preferably on a smartphone. The game will render a square game board where a snake (green) moves around. The goal is to eat the red food. Use the arrow keys (up, down, left, right) to control the direction of the snake's movements. The game ends if the snake collides with the boundaries or itself. A "Game Over" message will be displayed with your score.

←

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 HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    .snake, .food {
      position: absolute;
      width: 20px;
      height: 20px;
    }
    .snake {
      background-color: green;
    }
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Render the game board
    function render() {
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = "";

// Render snake
      snake.forEach(segment => {
        const snakeElement = document.createElement('div');
        snakeElement.className = 'snake';
        snakeElement.style.left = segment.x * 20 + 'px';
        snakeElement.style.top = segment.y * 20 + 'px';
        gameBoard.appendChild(snakeElement);
      });

// Render food
      const foodElement = document.createElement('div');
      foodElement.className = 'food';
      foodElement.style.left = food.x * 20 + 'px';
      foodElement.style.top = food.y * 20 + 'px';
      gameBoard.appendChild(foodElement);
    }

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

// Update head position based on direction
      switch (direction) {
        case "up":
          head.y--;
          break;
        case "down":
          head.y++;
          break;
        case "left":
          head.x--;
          break;
        case "right":
          head.x++;
          break;
      }

// Add the new head to the snake
      snake.unshift(head);

// Check for collision with food
      if (head.x === food.x && head.y === food.y) {
        // Generate new random food position
        food = {
          x: Math.floor(Math.random() * boardSize),
          y: Math.floor(Math.random() * boardSize)
        };
      } else {
        // Remove the tail segment if no food was eaten
        snake.pop();
      }

// Check for game over conditions
      if (
        head.x < 0 ||
        head.x >= boardSize ||
        head.y < 0 ||
        head.y >= boardSize ||
        snake.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y)
      ) {
        clearInterval(gameInterval);
        alert("Game Over! Your score: " + (snake.length - 1));
        resetGame();
        return;
      }

render();
    }

// Reset the game to initial state
    function resetGame() {
      snake = [{ x: 10, y: 10 }];
      food = { x: 5, y: 5 };
      direction = "right";
      gameInterval = setInterval(moveSnake, 200);
    }

// Handle keyboard input for changing snake direction
    function handleKeyPress(event) {
      switch (event.key) {
        case "ArrowUp":
          if (direction !== "down") {
            direction = "up";
          }
          break;
        case "ArrowDown":
          if (direction !== "up") {
            direction = "down";
          }
          break;
        case "ArrowLeft":
          if (direction !== "right") {
            direction = "left";
          }
          break;
        case "ArrowRight":
          if (direction !== "left") {
            direction = "right";
          }
          break;
      }
    }

// Start the game
    resetGame();
    document.addEventListener('keydown', handleKeyPress);
  </script>
</body>
</html>
```