AI game creator

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

No:23173

←

Prev Next

→

Snake Game
Developer User10705｜Date and time 23/10/28 16:08:44
Build time 75.223 sec｜Game capacity 3.839KB｜

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 {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: #ccc;
        margin: 0 auto;
      }
      
      .cell {
        position: absolute;
        width: 20px;
        height: 20px;
      }
      
      .food {
        background-image: url('food.png');
        background-size: cover;
      }
      
      .snake {
        background-image: url('snake.png');
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>
    
    <script>
      // Snake Game

var gameBoard = document.getElementById("game-board");
      var cellsArray;
      var snake;
      var food;
      var direction;
      var gameInterval;

function initialize() {
        gameBoard.innerHTML = "";
        cellsArray = [];
        snake = [];
        food = {};
        direction = "right";
        createGrid();
        createSnake();
        createFood();
        startGame();
      }

function createSnake() {
        var head = getRandomCell();
        head.className += " snake";
        snake.push(head);
      }

function createFood() {
        var cell = getRandomCell();
        cell.className += " food";
        food = cell;
      }

function getRandomCell() {
        var index = Math.floor(Math.random() * cellsArray.length);
        return cellsArray[index];
      }

function startGame() {
        gameInterval = setInterval(moveSnake, 200);
      }

if (newHead && !isSnake(newHead)) {
          newHead.className += " snake";
          snake.unshift(newHead);
          if (newHead !== food) {
            var tail = snake.pop();
            tail.classList.remove("snake");
          } else {
            createFood();
          }
        } else {
          clearInterval(gameInterval);
          alert("Game Over");
          initialize();
        }
      }

function isSnake(cell) {
        return cell.classList.contains("snake");
      }

function handleSwipe(e) {
        var xDown = e.touches[0].clientX;
        var yDown = e.touches[0].clientY;

var xDiff = xDown - xUp;
        var yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
          if (xDiff > 0) {
            direction = "right";
          } else {
            direction = "left";
          }
        } else {
          if (yDiff > 0) {
            direction = "down";
          } else {
            direction = "up";
          }
        }
      }

document.addEventListener("DOMContentLoaded", initialize);
      document.addEventListener("touchstart", handleTouchStart);
      document.addEventListener("touchmove", handleSwipe);

</script>
  </body>
</html>