Spaces:
Running
Running
adding enemy NPCs that follow the player
Browse files- index.html +39 -3
index.html
CHANGED
@@ -3,7 +3,7 @@
|
|
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, Larger Area, Obstacles)</title>
|
7 |
<style>
|
8 |
body {
|
9 |
display: flex;
|
@@ -35,6 +35,7 @@
|
|
35 |
let dy = 0;
|
36 |
let score = 0;
|
37 |
let obstacles = [];
|
|
|
38 |
|
39 |
function generateObstacles() {
|
40 |
obstacles = [];
|
@@ -46,14 +47,27 @@
|
|
46 |
}
|
47 |
}
|
48 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
49 |
generateObstacles();
|
|
|
50 |
|
51 |
function drawGame() {
|
52 |
clearCanvas();
|
53 |
moveSnake();
|
|
|
54 |
drawSnake();
|
55 |
drawFood();
|
56 |
drawObstacles();
|
|
|
57 |
checkCollision();
|
58 |
drawScore();
|
59 |
}
|
@@ -75,6 +89,16 @@
|
|
75 |
}
|
76 |
}
|
77 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
78 |
function drawSnake() {
|
79 |
ctx.fillStyle = 'green';
|
80 |
snake.forEach(segment => {
|
@@ -94,11 +118,18 @@
|
|
94 |
});
|
95 |
}
|
96 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
97 |
function generateFood() {
|
98 |
do {
|
99 |
food.x = Math.floor(Math.random() * tileCount);
|
100 |
food.y = Math.floor(Math.random() * tileCount);
|
101 |
-
} while (isCollision(food) || isOnSnake(food));
|
102 |
}
|
103 |
|
104 |
function isCollision(pos) {
|
@@ -109,6 +140,10 @@
|
|
109 |
return snake.some(segment => segment.x === pos.x && segment.y === pos.y);
|
110 |
}
|
111 |
|
|
|
|
|
|
|
|
|
112 |
function checkCollision() {
|
113 |
const head = snake[0];
|
114 |
|
@@ -124,7 +159,7 @@
|
|
124 |
}
|
125 |
}
|
126 |
|
127 |
-
if (isCollision(head)) {
|
128 |
resetGame();
|
129 |
}
|
130 |
}
|
@@ -136,6 +171,7 @@
|
|
136 |
dy = 0;
|
137 |
score = 0;
|
138 |
generateObstacles();
|
|
|
139 |
generateFood();
|
140 |
}
|
141 |
|
|
|
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, Larger Area, Obstacles, Enemies)</title>
|
7 |
<style>
|
8 |
body {
|
9 |
display: flex;
|
|
|
35 |
let dy = 0;
|
36 |
let score = 0;
|
37 |
let obstacles = [];
|
38 |
+
let enemies = [];
|
39 |
|
40 |
function generateObstacles() {
|
41 |
obstacles = [];
|
|
|
47 |
}
|
48 |
}
|
49 |
|
50 |
+
function generateEnemies() {
|
51 |
+
enemies = [];
|
52 |
+
for (let i = 0; i < 3; i++) {
|
53 |
+
enemies.push({
|
54 |
+
x: Math.floor(Math.random() * tileCount),
|
55 |
+
y: Math.floor(Math.random() * tileCount)
|
56 |
+
});
|
57 |
+
}
|
58 |
+
}
|
59 |
+
|
60 |
generateObstacles();
|
61 |
+
generateEnemies();
|
62 |
|
63 |
function drawGame() {
|
64 |
clearCanvas();
|
65 |
moveSnake();
|
66 |
+
moveEnemies();
|
67 |
drawSnake();
|
68 |
drawFood();
|
69 |
drawObstacles();
|
70 |
+
drawEnemies();
|
71 |
checkCollision();
|
72 |
drawScore();
|
73 |
}
|
|
|
89 |
}
|
90 |
}
|
91 |
|
92 |
+
function moveEnemies() {
|
93 |
+
enemies.forEach(enemy => {
|
94 |
+
const head = snake[0];
|
95 |
+
if (enemy.x < head.x) enemy.x++;
|
96 |
+
else if (enemy.x > head.x) enemy.x--;
|
97 |
+
if (enemy.y < head.y) enemy.y++;
|
98 |
+
else if (enemy.y > head.y) enemy.y--;
|
99 |
+
});
|
100 |
+
}
|
101 |
+
|
102 |
function drawSnake() {
|
103 |
ctx.fillStyle = 'green';
|
104 |
snake.forEach(segment => {
|
|
|
118 |
});
|
119 |
}
|
120 |
|
121 |
+
function drawEnemies() {
|
122 |
+
ctx.fillStyle = 'purple';
|
123 |
+
enemies.forEach(enemy => {
|
124 |
+
ctx.fillRect(enemy.x * gridSize, enemy.y * gridSize, gridSize - 2, gridSize - 2);
|
125 |
+
});
|
126 |
+
}
|
127 |
+
|
128 |
function generateFood() {
|
129 |
do {
|
130 |
food.x = Math.floor(Math.random() * tileCount);
|
131 |
food.y = Math.floor(Math.random() * tileCount);
|
132 |
+
} while (isCollision(food) || isOnSnake(food) || isOnEnemy(food));
|
133 |
}
|
134 |
|
135 |
function isCollision(pos) {
|
|
|
140 |
return snake.some(segment => segment.x === pos.x && segment.y === pos.y);
|
141 |
}
|
142 |
|
143 |
+
function isOnEnemy(pos) {
|
144 |
+
return enemies.some(enemy => enemy.x === pos.x && enemy.y === pos.y);
|
145 |
+
}
|
146 |
+
|
147 |
function checkCollision() {
|
148 |
const head = snake[0];
|
149 |
|
|
|
159 |
}
|
160 |
}
|
161 |
|
162 |
+
if (isCollision(head) || isOnEnemy(head)) {
|
163 |
resetGame();
|
164 |
}
|
165 |
}
|
|
|
171 |
dy = 0;
|
172 |
score = 0;
|
173 |
generateObstacles();
|
174 |
+
generateEnemies();
|
175 |
generateFood();
|
176 |
}
|
177 |
|