Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
Строка 1: | Строка 1: | ||
( | var canvas = document.createElement("canvas"); | ||
canvas.width = 300; | |||
canvas.height = 300; | |||
document.body.appendChild(canvas); | |||
var ctx = canvas.getContext("2d"); | |||
var gridSize = 10; | |||
var snake = [{x: 50, y: 50}]; | |||
var direction = {x: gridSize, y: 0}; | |||
var food = {x: 100, y: 100}; | |||
var gameOver = false; | |||
function draw() { | |||
ctx.clearRect(0, 0, canvas.width, canvas.height); | |||
ctx.fillStyle = "#00FF00"; | |||
var | snake.forEach(function(segment) { | ||
if ( | ctx.fillRect(segment.x, segment.y, gridSize, gridSize); | ||
}); | |||
ctx.fillStyle = "#FF0000"; | |||
ctx.fillRect(food.x, food.y, gridSize, gridSize); | |||
if (gameOver) { | |||
ctx.fillStyle = "#000000"; | |||
ctx.fillText("Game Over!", canvas.width / 2 - 40, canvas.height / 2); | |||
} | |||
} | |||
function update() { | |||
if (gameOver) return; | |||
var newHead = {x: snake[0].x + direction.x, y: snake[0].y + direction.y}; | |||
if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height || collision(newHead)) { | |||
gameOver = true; | |||
return; | |||
} | |||
snake.unshift(newHead); | |||
if (newHead.x === food.x && newHead.y === food.y) { | |||
food = {x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize}; | |||
} else { | |||
snake.pop(); | |||
} | |||
} | |||
function collision(head) { | |||
for (var i = 1; i < snake.length; i++) { | |||
if (head.x === snake[i].x && head.y === snake[i].y) { | |||
return true; | |||
} | } | ||
event. | } | ||
}); | return false; | ||
})(); | } | ||
function changeDirection(event) { | |||
if (event.keyCode === 37 && direction.x === 0) { | |||
direction = {x: -gridSize, y: 0}; | |||
} else if (event.keyCode === 38 && direction.y === 0) { | |||
direction = {x: 0, y: -gridSize}; | |||
} else if (event.keyCode === 39 && direction.x === 0) { | |||
direction = {x: gridSize, y: 0}; | |||
} else if (event.keyCode === 40 && direction.y === 0) { | |||
direction = {x: 0, y: gridSize}; | |||
} | |||
} | |||
document.addEventListener("keydown", changeDirection); | |||
function gameLoop() { | |||
update(); | |||
draw(); | |||
if (!gameOver) { | |||
setTimeout(gameLoop, 100); | |||
} | |||
} | |||
gameLoop(); |
Версия от 06:28, 17 января 2025
var canvas = document.createElement("canvas"); canvas.width = 300; canvas.height = 300; document.body.appendChild(canvas); var ctx = canvas.getContext("2d"); var gridSize = 10; var snake = [{x: 50, y: 50}]; var direction = {x: gridSize, y: 0}; var food = {x: 100, y: 100}; var gameOver = false; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#00FF00"; snake.forEach(function(segment) { ctx.fillRect(segment.x, segment.y, gridSize, gridSize); }); ctx.fillStyle = "#FF0000"; ctx.fillRect(food.x, food.y, gridSize, gridSize); if (gameOver) { ctx.fillStyle = "#000000"; ctx.fillText("Game Over!", canvas.width / 2 - 40, canvas.height / 2); } } function update() { if (gameOver) return; var newHead = {x: snake[0].x + direction.x, y: snake[0].y + direction.y}; if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height || collision(newHead)) { gameOver = true; return; } snake.unshift(newHead); if (newHead.x === food.x && newHead.y === food.y) { food = {x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize}; } else { snake.pop(); } } function collision(head) { for (var i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { return true; } } return false; } function changeDirection(event) { if (event.keyCode === 37 && direction.x === 0) { direction = {x: -gridSize, y: 0}; } else if (event.keyCode === 38 && direction.y === 0) { direction = {x: 0, y: -gridSize}; } else if (event.keyCode === 39 && direction.x === 0) { direction = {x: gridSize, y: 0}; } else if (event.keyCode === 40 && direction.y === 0) { direction = {x: 0, y: gridSize}; } } document.addEventListener("keydown", changeDirection); function gameLoop() { update(); draw(); if (!gameOver) { setTimeout(gameLoop, 100); } } gameLoop();