AI game creator

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

No:37176

←

Prev Next

→

Snake Game
Developer User17015｜Date and time 24/1/20 17:30:49
Build time 12.411 sec｜Game capacity 3.024KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Змейка Игра</title>
<style>
#game-board {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #000;
}

.snake {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: green;
}

.food {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
}

</style>
</head>
<body>
<div id="game-board"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
  var board = document.getElementById("game-board");
  var score = 0;
  var direction = "right";
  var snake = [{ x: 200, y: 200 }];
  var food = { x: 0, y: 0 };

function createSnake() {
    for (var i = 0; i < snake.length; i++) {
      var segment = document.createElement("div");
      segment.className = "snake";
      segment.style.left = snake[i].x + "px";
      segment.style.top = snake[i].y + "px";
      board.appendChild(segment);
    }
  }

function createFood() {
    var x = Math.floor(Math.random() * 20) * 20;
    var y = Math.floor(Math.random() * 20) * 20;
    food = { x: x, y: y };

var foodElement = document.createElement("div");
    foodElement.className = "food";
    foodElement.style.left = x + "px";
    foodElement.style.top = y + "px";
    board.appendChild(foodElement);
  }

function moveSnake() {
    var head = { x: snake[0].x, y: snake[0].y };
    if (direction === "right") head.x += 20;
    if (direction === "left") head.x -= 20;
    if (direction === "up") head.y -= 20;
    if (direction === "down") head.y += 20;

snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
      score++;
      board.removeChild(document.querySelector(".food"));
      createFood();
    } else {
      snake.pop();
    }

for (var i = 0; i < snake.length; i++) {
      var segment = document.createElement("div");
      segment.className = "snake";
      segment.style.left = snake[i].x + "px";
      segment.style.top = snake[i].y + "px";
      board.appendChild(segment);
    }
  }

function checkCollision() {
    var head = snake[0];
    for (var i = 1; i < snake.length; i++) {
      if (snake[i].x === head.x && snake[i].y === head.y) {
        gameOver();
      }
    }

if (
      head.x < 0 ||
      head.x >= 400 ||
      head.y < 0 ||
      head.y >= 400
    ) {
      gameOver();
    }
  }

function changeDirection(event) {
    if (event.keyCode === 37 && direction !== "right") direction = "left";
    if (event.keyCode === 38 && direction !== "down") direction = "up";
    if (event.keyCode === 39 && direction !== "left") direction = "right";
    if (event.keyCode === 40 && direction !== "up") direction = "down";
  }

function gameOver() {
    clearInterval(gameLoop);
    alert("Game Over! Your score is: " + score);
  }

createSnake();
  createFood();

var gameLoop = setInterval(function() {
    board.innerHTML = "";
    moveSnake();
    checkCollision();
  }, 200);

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