Crea el juego de snake's game

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

No:47578

148

←

Prev Next

→

Crea el juego de snake
Developer User20538｜Date and time 24/2/28 14:41:49
Build time 13.261 sec｜Game capacity 2.552KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>

<html>

<head>

<title>Snake Game</title>

<style>

canvas {

border: 1px solid black;

display: block;

margin: 0 auto;

}

</style>

</head>

<body>

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

const box = 20;

let snake = [{x: 200, y: 200}, {x: 190, y: 200}, {x: 180, y: 200}];

let food = {x: 0, y: 0};

let dx = 10;

let dy = 0;

function drawSnakePart(part) {

ctx.fillStyle = 'green';

ctx.fillRect(part.x, part.y, box, box);

}

function drawSnake() {

snake.forEach(drawSnakePart);

}

function drawFood() {

ctx.fillStyle = 'red';

ctx.fillRect(food.x, food.y, box, box);

}

function moveSnake() {

const head = {x: snake[0].x + dx, y: snake[0].y + dy};

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {

generateFood();

} else {

snake.pop();

}

function generateFood() {

food.x = Math.floor(Math.random() * canvas.width / box) * box;

food.y = Math.floor(Math.random() * canvas.height / box) * box;

}

function resetGame() {

snake = [{x: 200, y: 200}, {x: 190, y: 200}, {x: 180, y: 200}];

dx = 10;

dy = 0;

generateFood();

}

function checkCollisions() {

const head = snake[0];

if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {

resetGame();

}

for (let i = 1; i < snake.length; i++) {

if (head.x === snake[i].x && head.y === snake[i].y) {

resetGame();

break;

}

function updateGame() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawSnake();

drawFood();

moveSnake();

checkCollisions();

}

function changeDirection(event) {

const keyPressed = event.keyCode;

if (keyPressed === 37 && dx !== 10) {

dx = -10;

dy = 0;

}

if (keyPressed === 38 && dy !== 10) {

dy = -10;

dx = 0;

}

if (keyPressed === 39 && dx !== -10) {

dx = 10;

dy = 0;

}

if (keyPressed === 40 && dy !== -10) {

dy = 10;

dx = 0;

}

generateFood();

document.addEventListener('keydown', changeDirection);

setInterval(updateGame, 100);

</script>

</body>

</html>