AI game creator

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

No:13881

139

←

Prev Next

→

161 snake game
Developer User6030｜Date and time 23/8/30 6:12:50
Build time 29.523 sec｜Game capacity 5.325KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      border: 1px solid black;
      width: 300px;
      height: 300px;
      position: relative;
      margin: 0 auto;
    }
    .dot {
      width: 20px;
      height: 20px;
      background-color: #000;
      position: absolute;
    }
    #snake-head {
      background-color: #FF0000;
    }
    .food {
      background-color: #00FF00;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const gameBoard = document.getElementById('game-board');
      let dots = [];
      let snakeLength = 1;
      let foodX, foodY;
      let direction = 'right';

function generateFood() {
        foodX = Math.floor(Math.random() * 15) * 20;
        foodY = Math.floor(Math.random() * 15) * 20;

const foodElement = document.createElement('div');
        foodElement.style.left = `${foodX}px`;
        foodElement.style.top = `${foodY}px`;
        foodElement.classList.add('dot', 'food');
        gameBoard.appendChild(foodElement);
      }

function createSnake() {
        let x = Math.floor(Math.random() * 15) * 20;
        let y = Math.floor(Math.random() * 15) * 20;

const snakeHead = document.createElement('div');
        snakeHead.style.left = `${x}px`;
        snakeHead.style.top = `${y}px`;
        snakeHead.id = 'snake-head';
        snakeHead.classList.add('dot');
        gameBoard.appendChild(snakeHead);

dots.push(snakeHead);
      }

function moveSnake() {
        const head = dots[dots.length - 1];
        let newHead;

switch (direction) {
          case 'up':
            newHead = document.createElement('div');
            newHead.style.left = `${parseInt(head.style.left)}px`;
            newHead.style.top = `${parseInt(head.style.top) - 20}px`;
            newHead.classList.add('dot');
            gameBoard.appendChild(newHead);
            dots.push(newHead);
            break;
          case 'right':
            newHead = document.createElement('div');
            newHead.style.left = `${parseInt(head.style.left) + 20}px`;
            newHead.style.top = `${parseInt(head.style.top)}px`;
            newHead.classList.add('dot');
            gameBoard.appendChild(newHead);
            dots.push(newHead);
            break;
          case 'down':
            newHead = document.createElement('div');
            newHead.style.left = `${parseInt(head.style.left)}px`;
            newHead.style.top = `${parseInt(head.style.top) + 20}px`;
            newHead.classList.add('dot');
            gameBoard.appendChild(newHead);
            dots.push(newHead);
            break;
          case 'left':
            newHead = document.createElement('div');
            newHead.style.left = `${parseInt(head.style.left) - 20}px`;
            newHead.style.top = `${parseInt(head.style.top)}px`;
            newHead.classList.add('dot');
            gameBoard.appendChild(newHead);
            dots.push(newHead);
            break;
        }

if (dots.length > snakeLength) {
          const tail = dots.shift();
          gameBoard.removeChild(tail);
        }

if (isCollision(newHead)) {
          gameOver();
        }

if (isFoodEaten(newHead)) {
          snakeLength += 1;
          gameBoard.removeChild(gameBoard.lastChild);
          generateFood();
        }
      }

function isCollision(dot) {
        const left = parseInt(dot.style.left);
        const top = parseInt(dot.style.top);

if (left < 0 || left >= 300 || top < 0 || top >= 300) {
          return true;
        }

for (let i = 0; i < dots.length - 1; i++) {
          if (dots[i].style.left === dot.style.left && dots[i].style.top === dot.style.top) {
            return true;
          }
        }

return false;
      }

function isFoodEaten(dot) {
        const left = parseInt(dot.style.left);
        const top = parseInt(dot.style.top);

return left === foodX && top === foodY;
      }

function gameOver() {
        clearInterval(interval);
        alert(`Game Over!\nScore: ${snakeLength - 1}`);
        resetGame();
      }

function resetGame() {
        for (let i = 0; i < dots.length; i++) {
          gameBoard.removeChild(dots[i]);
        }
        dots = [];
        snakeLength = 1;
        direction = 'right';
        generateFood();
        createSnake();
        interval = setInterval(moveSnake, 200);
      }

createSnake();
      generateFood();

let interval = setInterval(moveSnake, 200);

document.addEventListener('keydown', changeDirection);
    });
  </script>
</body>
</html>