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

No:131

816

←

Prev Next

→

snake game
Developer ひさひさ｜Date and time 23/5/24 0:32:56
Build time 102.364 sec｜Game capacity 2.521KB｜

Script

Snake Game

Use arrow keys to move the snake. Eat the food to grow and avoid hitting walls or your own body.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
canvas {
  border: 1px solid black;
}
</style>
</head>
<body>
<h1>Snake Game</h1>
<p>Use arrow keys to move the snake. Eat the food to grow and avoid hitting walls or your own body.</p>
<canvas id="canvas" width="340" height="340"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const box = 10;
let snake = [];
snake[0] = {
  x: 10 * box,
  y: 10 * box
};
let food = {
  x: Math.floor(Math.random() * 33 + 1) * box,
  y: Math.floor(Math.random() * 33 + 1) * box
};
let score = 0;

document.addEventListener("keydown", direction);

let d;

function collision(head, array) {
  for (let i = 0; i < array.length; i++) {
    if (head.x == array[i].x && head.y == array[i].y) {
      return true;
    }
  }
  return false;
}

function draw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "red";
  ctx.fillRect(food.x, food.y, box, box);

for (let i = 0; i < snake.length; i++) {
    ctx.fillStyle = i == 0 ? "green" : "white";
    ctx.fillRect(snake[i].x, snake[i].y, box, box);
    ctx.strokeStyle = "black";
    ctx.strokeRect(snake[i].x, snake[i].y, box, box);
  }

let snakeX = snake[0].x;
  let snakeY = snake[0].y;

if (d == "LEFT") {
    snakeX -= box;
  } else if (d == "UP") {
    snakeY -= box;
  } else if (d == "RIGHT") {
    snakeX += box;
  } else if (d == "DOWN") {
    snakeY += box;
  }

if (snakeX == food.x && snakeY == food.y) {
    score++;
    food = {
      x: Math.floor(Math.random() * 33 + 1) * box,
      y: Math.floor(Math.random() * 33 + 1) * box
    };
  } else {
    snake.pop();
  }

let newHead = {
    x: snakeX,
    y: snakeY
  };

if (snakeX < box || snakeX >= canvas.width || snakeY < box || snakeY >= canvas.height || collision(newHead, snake)) {
    clearInterval(game);
  }

snake.unshift(newHead);

ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText("Score: " + score, box, 1.6 * box);
}

let game = setInterval(draw, 100);
</script>
</body>
</html>