AI game creator

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

No:33236

←

Prev Next

→

Snake Game
Developer User15212｜Date and time 24/1/3 0:56:26
Build time 25.534 sec｜Game capacity 2.75KB｜

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>
    canvas {
      border: 1px solid black;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");
    var snakeSize = 20;
    var snakeSpeed = 200;
    var snake = [];
    var direction = "right";
    var food = {};
    var score = 0;
    
    snake[0] = { x: 10, y: 10 };
    
    function createFood() {
      food = {
        x: Math.floor(Math.random() * (canvas.width/snakeSize)) * snakeSize,
        y: Math.floor(Math.random() * (canvas.height/snakeSize)) * snakeSize
      }
    }
    
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    
      for(var i=0; i < snake.length; i++) {
        var snakePart = snake[i];
        ctx.fillStyle = "green";
        ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
        ctx.strokeStyle = "black";
        ctx.strokeRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
      }
    
      ctx.fillStyle = "red";
      ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
    
      var snakeX = snake[0].x;
      var snakeY = snake[0].y;
    
      if (direction === "right") snakeX += snakeSize;
      if (direction === "left") snakeX -= snakeSize;
      if (direction === "up") snakeY -= snakeSize;
      if (direction === "down") snakeY += snakeSize;
    
      if (snakeX === food.x && snakeY === food.y) {
        score++;
        createFood();
      } else {
        snake.pop();
      }
    
      var newHead = {
        x: snakeX,
        y: snakeY
      };
    
      snake.unshift(newHead);
    
      if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height) {
        clearInterval(game);
        alert("Игра окончена!");
      }
    
      for (var j = 1; j < snake.length; j++) {
        if (snakeX === snake[j].x && snakeY === snake[j].y) {
          clearInterval(game);
          alert("Игра окончена!");
          break;
        }
      }
    
      document.getElementById("score").innerHTML = "Счет: " + score;
    }
    
    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";
    }
    
    document.addEventListener("keydown", changeDirection);
    
    createFood();
    var game = setInterval(draw, snakeSpeed);
  </script>
</body>
</html>