AI game creator

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

No:14646

←

Prev Next

→

Snake Game
Developer User6333｜Date and time 23/9/3 23:03:48
Build time 43.088 sec｜Game capacity 4.243KB｜

Script

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

To play the game, simply open the HTML file in a web browser, preferably on a smartphone. The snake can be controlled using the arrow keys on the keyboard or by swiping on the smartphone screen. The goal is to eat the red food items without colliding with the walls or the snake's own body. Please note that this is a basic implementation, and you can modify and enhance it further based on your 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 {
      height: 400px;
      width: 400px;
      border: 1px solid black;
      position: relative;
    }
    
    .snake, .food {
      height: 20px;
      width: 20px;
      position: absolute;
    }
    
    .snake {
      background-color: green;
    }
    
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const board = document.getElementById('game-board');
      let snake = [{x: 0, y: 0}];
      let food = {};
      let direction = '';
      let intervalId = null;
      
      function createSnake() {
        for (let i = 0; i < snake.length; i++) {
          const snakePart = document.createElement('div');
          snakePart.className = 'snake';
          snakePart.style.left = snake[i].x + 'px';
          snakePart.style.top = snake[i].y + 'px';
          board.appendChild(snakePart);
        }
      }
      
      function createFood() {
        food.x = Math.floor(Math.random() * 390);
        food.y = Math.floor(Math.random() * 390);
        
        const foodItem = document.createElement('div');
        foodItem.className = 'food';
        foodItem.style.left = food.x + 'px';
        foodItem.style.top = food.y + 'px';
        board.appendChild(foodItem);
      }
      
      function updateSnake() {
        const snakeHead = {x: snake[0].x, y: snake[0].y};
        
        if (direction === 'right') {
          snakeHead.x += 20;
        } else if (direction === 'left') {
          snakeHead.x -= 20;
        } else if (direction === 'up') {
          snakeHead.y -= 20;
        } else if (direction === 'down') {
          snakeHead.y += 20;
        }
        
        const tail = snake.pop();
        tail.x = snakeHead.x;
        tail.y = snakeHead.y;
        snake.unshift(tail);
      }
      
      function checkCollision() {
        const snakeHead = snake[0];
        
        if (snakeHead.x === food.x && snakeHead.y === food.y) {
          const foodItem = document.querySelector('.food');
          board.removeChild(foodItem);
          
          const newTail = {x: snake[snake.length - 1].x, y: snake[snake.length - 1].y};
          snake.push(newTail);
          
          createFood();
        }
        
        if (snakeHead.x < 0 || snakeHead.x >= 400 || snakeHead.y < 0 || snakeHead.y >= 400) {
          clearInterval(intervalId);
          alert('Game Over!');
        }
        
        for (let i = 1; i < snake.length; i++) {
          if (snake[i].x === snakeHead.x && snake[i].y === snakeHead.y) {
            clearInterval(intervalId);
            alert('Game Over!');
          }
        }
      }
      
      function render() {
        const snakeParts = document.querySelectorAll('.snake');
        snakeParts.forEach(part => board.removeChild(part));
        
        updateSnake();
        createSnake();
        checkCollision();
      }
      
      function handleKeyEvents(event) {
        if (event.key === 'ArrowRight' && direction !== 'left') {
          direction = 'right';
        } else if (event.key === 'ArrowLeft' && direction !== 'right') {
          direction = 'left';
        } else if (event.key === 'ArrowUp' && direction !== 'down') {
          direction = 'up';
        } else if (event.key === 'ArrowDown' && direction !== 'up') {
          direction = 'down';
        }
      }
      
      document.addEventListener('keydown', handleKeyEvents);
      
      createSnake();
      createFood();
      intervalId = setInterval(render, 200);
    });
  </script>
</body>
</html>
```

Please note that this is a basic implementation, and you can modify and enhance it further based on your requirements.