Spaces:
Running
Running
File size: 4,264 Bytes
4bee0c3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid black;
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20; // Size of each grid box
const canvasSize = 400;
let snake = [];
snake[0] = { x: 9 * box, y: 10 * box }; // Initial snake position
let food = {
x: Math.floor(Math.random() * (canvasSize / box)) * box,
y: Math.floor(Math.random() * (canvasSize / box)) * box
};
let score = 0;
let direction;
document.addEventListener('keydown', setDirection);
function setDirection(event) {
if (event.keyCode == 37 && direction != 'RIGHT') {
direction = 'LEFT';
} else if (event.keyCode == 38 && direction != 'DOWN') {
direction = 'UP';
} else if (event.keyCode == 39 && direction != 'LEFT') {
direction = 'RIGHT';
} else if (event.keyCode == 40 && direction != 'UP') {
direction = 'DOWN';
}
}
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() {
// Clear canvas
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvasSize, canvasSize);
// Draw snake
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = (i == 0) ? 'green' : 'lightgreen';
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = 'darkgreen';
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
// Draw food
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
// Old head position
let snakeX = snake[0].x;
let snakeY = snake[0].y;
// Which direction
if (direction == 'LEFT') snakeX -= box;
if (direction == 'UP') snakeY -= box;
if (direction == 'RIGHT') snakeX += box;
if (direction == 'DOWN') snakeY += box;
// If the snake eats the food
if (snakeX == food.x && snakeY == food.y) {
score++;
food = {
x: Math.floor(Math.random() * (canvasSize / box)) * box,
y: Math.floor(Math.random() * (canvasSize / box)) * box
};
// Don't remove tail
} else {
// Remove the tail
snake.pop();
}
// New head
let newHead = {
x: snakeX,
y: snakeY
};
// Game over conditions
if (snakeX < 0 || snakeX >= canvasSize || snakeY < 0 || snakeY >= canvasSize || collision(newHead, snake)) {
clearInterval(game);
alert('Game Over! Score: ' + score);
// Optionally reset game or provide restart button
document.location.reload(); // Simple reload to restart
}
snake.unshift(newHead);
// Draw score
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Score: ' + score, box, 1.6 * box);
}
let game = setInterval(draw, 100); // Game loop speed
</script>
</body>
</html>
|