Spaces:
Running
Running
Update index.html
Browse files- index.html +148 -19
index.html
CHANGED
@@ -1,19 +1,148 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>Snake Game (WASD Controls)</title>
|
7 |
+
<style>
|
8 |
+
body {
|
9 |
+
display: flex;
|
10 |
+
justify-content: center;
|
11 |
+
align-items: center;
|
12 |
+
height: 100vh;
|
13 |
+
margin: 0;
|
14 |
+
background-color: #f0f0f0;
|
15 |
+
}
|
16 |
+
canvas {
|
17 |
+
border: 2px solid #333;
|
18 |
+
}
|
19 |
+
</style>
|
20 |
+
</head>
|
21 |
+
<body>
|
22 |
+
<canvas id="gameCanvas" width="400" height="400"></canvas>
|
23 |
+
<script>
|
24 |
+
const canvas = document.getElementById('gameCanvas');
|
25 |
+
const ctx = canvas.getContext('2d');
|
26 |
+
|
27 |
+
const gridSize = 20;
|
28 |
+
const tileCount = canvas.width / gridSize;
|
29 |
+
|
30 |
+
let snake = [
|
31 |
+
{x: 10, y: 10},
|
32 |
+
];
|
33 |
+
let food = {x: 15, y: 15};
|
34 |
+
let dx = 0;
|
35 |
+
let dy = 0;
|
36 |
+
let score = 0;
|
37 |
+
|
38 |
+
function drawGame() {
|
39 |
+
clearCanvas();
|
40 |
+
moveSnake();
|
41 |
+
drawSnake();
|
42 |
+
drawFood();
|
43 |
+
checkCollision();
|
44 |
+
drawScore();
|
45 |
+
}
|
46 |
+
|
47 |
+
function clearCanvas() {
|
48 |
+
ctx.fillStyle = 'white';
|
49 |
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
50 |
+
}
|
51 |
+
|
52 |
+
function moveSnake() {
|
53 |
+
const head = {x: snake[0].x + dx, y: snake[0].y + dy};
|
54 |
+
snake.unshift(head);
|
55 |
+
|
56 |
+
if (head.x === food.x && head.y === food.y) {
|
57 |
+
score++;
|
58 |
+
generateFood();
|
59 |
+
} else {
|
60 |
+
snake.pop();
|
61 |
+
}
|
62 |
+
}
|
63 |
+
|
64 |
+
function drawSnake() {
|
65 |
+
ctx.fillStyle = 'green';
|
66 |
+
snake.forEach(segment => {
|
67 |
+
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
|
68 |
+
});
|
69 |
+
}
|
70 |
+
|
71 |
+
function drawFood() {
|
72 |
+
ctx.fillStyle = 'red';
|
73 |
+
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
|
74 |
+
}
|
75 |
+
|
76 |
+
function generateFood() {
|
77 |
+
food.x = Math.floor(Math.random() * tileCount);
|
78 |
+
food.y = Math.floor(Math.random() * tileCount);
|
79 |
+
}
|
80 |
+
|
81 |
+
function checkCollision() {
|
82 |
+
const head = snake[0];
|
83 |
+
|
84 |
+
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
|
85 |
+
resetGame();
|
86 |
+
}
|
87 |
+
|
88 |
+
for (let i = 1; i < snake.length; i++) {
|
89 |
+
if (head.x === snake[i].x && head.y === snake[i].y) {
|
90 |
+
resetGame();
|
91 |
+
}
|
92 |
+
}
|
93 |
+
}
|
94 |
+
|
95 |
+
function resetGame() {
|
96 |
+
snake = [{x: 10, y: 10}];
|
97 |
+
food = {x: 15, y: 15};
|
98 |
+
dx = 0;
|
99 |
+
dy = 0;
|
100 |
+
score = 0;
|
101 |
+
}
|
102 |
+
|
103 |
+
function drawScore() {
|
104 |
+
ctx.fillStyle = 'black';
|
105 |
+
ctx.font = '20px Arial';
|
106 |
+
ctx.fillText(`Score: ${score}`, 10, 30);
|
107 |
+
}
|
108 |
+
|
109 |
+
document.addEventListener('keydown', changeDirection);
|
110 |
+
|
111 |
+
function changeDirection(event) {
|
112 |
+
const key = event.key.toLowerCase();
|
113 |
+
|
114 |
+
const goingUp = dy === -1;
|
115 |
+
const goingDown = dy === 1;
|
116 |
+
const goingRight = dx === 1;
|
117 |
+
const goingLeft = dx === -1;
|
118 |
+
|
119 |
+
if (key === 'a' && !goingRight) {
|
120 |
+
dx = -1;
|
121 |
+
dy = 0;
|
122 |
+
}
|
123 |
+
|
124 |
+
if (key === 'w' && !goingDown) {
|
125 |
+
dx = 0;
|
126 |
+
dy = -1;
|
127 |
+
}
|
128 |
+
|
129 |
+
if (key === 'd' && !goingLeft) {
|
130 |
+
dx = 1;
|
131 |
+
dy = 0;
|
132 |
+
}
|
133 |
+
|
134 |
+
if (key === 's' && !goingUp) {
|
135 |
+
dx = 0;
|
136 |
+
dy = 1;
|
137 |
+
}
|
138 |
+
}
|
139 |
+
|
140 |
+
function gameLoop() {
|
141 |
+
drawGame();
|
142 |
+
setTimeout(gameLoop, 100);
|
143 |
+
}
|
144 |
+
|
145 |
+
gameLoop();
|
146 |
+
</script>
|
147 |
+
</body>
|
148 |
+
</html>
|