AI game creator

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

No:19416

←

Prev Next

→

Snake Game
Developer User8614｜Date and time 23/10/3 22:33:07
Build time 27.357 sec｜Game capacity 4.414KB｜

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 implementation creates a game board with a size of 400x400 pixels, where each pixel represents a 20x20 dot. The snake starts with a size of 1 dot and moves according to the arrow key presses. The objective is to eat the red food dots to grow bigger, but the game ends if the snake hits the game board boundaries or itself. Please note that this is a basic implementation and can be further improved and customized according to your specific requirements.

←

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>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      position: relative;
    }
    .snake-dot {
      width: 20px;
      height: 20px;
      position: absolute;
    }
    .food-dot {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    // Set up game board variables
    var gameBoard = document.getElementById('game-board');
    var gameBoardSize = 20;
    var snakeSize = 1;
    var snake = [{ x: 10, y: 10 }];
    var food = { x: getRandomPosition(), y: getRandomPosition() };
    var direction = 'right';
    var intervalId;
    
    // Function to generate random position for food
    function getRandomPosition() {
      return Math.floor(Math.random() * gameBoardSize);
    }
    
    // Function to update game board
    function updateGameBoard() {
      // Clear previous game board
      gameBoard.innerHTML = '';
      
      // Draw snake dots on game board
      for (var i = 0; i < snake.length; i++) {
        var snakeDot = document.createElement('div');
        snakeDot.className = 'snake-dot';
        snakeDot.style.left = snake[i].x * 20 + 'px';
        snakeDot.style.top = snake[i].y * 20 + 'px';
        gameBoard.appendChild(snakeDot);
      }
      
      // Draw food dot on game board
      var foodDot = document.createElement('div');
      foodDot.className = 'food-dot';
      foodDot.style.left = food.x * 20 + 'px';
      foodDot.style.top = food.y * 20 + 'px';
      gameBoard.appendChild(foodDot);
    }
    
    // Function to move snake
    function moveSnake() {
      var head = { x: snake[0].x, y: snake[0].y };
      
      // Update snake position based on current direction
      if (direction === 'right') head.x++;
      else if (direction === 'left') head.x--;
      else if (direction === 'up') head.y--;
      else if (direction === 'down') head.y++;
      
      // Check if snake eats food
      if (head.x === food.x && head.y === food.y) {
        // Increase snake size
        snakeSize++;
        
        // Generate new position for food
        food = { x: getRandomPosition(), y: getRandomPosition() };
      } else {
        // Remove tail of snake if it doesn't eat food
        snake.pop();
      }
      
      // Check if snake hits game board boundaries
      if (head.x < 0 || head.y < 0 || head.x >= gameBoardSize || head.y >= gameBoardSize) {
        // Stop game
        clearInterval(intervalId);
        alert('Game Over!');
        return;
      }
      
      // Check if snake hits itself
      for (var i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
          // Stop game
          clearInterval(intervalId);
          alert('Game Over!');
          return;
        }
      }
      
      // Add new head to snake
      snake.unshift(head);
      
      // Update game board
      updateGameBoard();
    }
    
    // Function to handle key press events
    function handleKeyPress(event) {
      if (event.key === 'ArrowUp' && direction !== 'down') direction = 'up';
      else if (event.key === 'ArrowDown' && direction !== 'up') direction = 'down';
      else if (event.key === 'ArrowLeft' && direction !== 'right') direction = 'left';
      else if (event.key === 'ArrowRight' && direction !== 'left') direction = 'right';
    }
    
    // Start game
    function startGame() {
      // Add event listener for key press events
      document.addEventListener('keydown', handleKeyPress);
      
      // Set game loop interval
      intervalId = setInterval(moveSnake, 200);
    }
    
    // Start the game
    startGame();
  </script>
</body>
</html>
```

Please note that this is a basic implementation and can be further improved and customized according to your specific requirements.