25. 3. 14. 오전 2:14 photon_ap.
html
~\OneDrive\바 탕 화 면 \photon_ap.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Photon Shooter</title>
5 <style>
6 canvas {
7 border: 2px solid #C3C3C3;
8 }
9 </style>
10
11 <script>
12 // ints
13 let canvas, ctx;
14 let spaceship = { x: 360, y: 240, width: 40, height: 40, health: 3, maxHealth: 5 };
15 let photons = [];
16 let enemies = [];
17 let powerUps = [];
18 let score = 0;
19 let gameOver = false;
20 const boundary = { x: 300, y: 180, width: 160, height: 160 };
21 let keys = {}; // for a smooth movement
22
23
24 // Game reset int
25 function init() {
26 canvas = [Link]("gameCanvas");
27 ctx = [Link]("2d");
28
29
30 // key binding
31 [Link]("keydown", (e) => (keys[[Link]] = true));
32 [Link]("keyup", (e) => (keys[[Link]] = false));
33 [Link]("keydown", (e) => {
34 if ([Link] === "Space" && !gameOver) firePhoton(); // bullet fires
35 });
36
37 spawnEnemy(1); // spawns enemy
38 spawnPowerUp(); // spawns power up
39 requestAnimationFram
e(gameLoop); // start game loop
40 }
41
42
43 // player movement ints
44 function updatePlayer() {
45 const speed = 5;
46 if (keys["ArrowUp"] && spaceship.y > boundary.y) spaceship.y -= speed;
47 if (keys["ArrowDown"] && spaceship.y + [Link] < boundary.y +
[Link]) spaceship.y += speed;
localhost:1722/48a0ef77-87de-4800-8d38-9989327012b2/ 1/6
25. 3. 14. 오전 2:14 photon_ap.html
48 if (keys["ArrowLeft"] && spaceship.x > boundary.x) spaceship.x -= speed;
49 if (keys["ArrowRight"] && spaceship.x + [Link] < boundary.x +
[Link]) spaceship.x += speed;
50 }
51
52
53 // bullet fire ints
54 function firePhoton() {
55 let velX = spaceship.x + [Link] / 2 < boundary.x + [Link] / 2 ?
-5 : 5;
56 let velY = spaceship.y + [Link] / 2 < boundary.y + [Link] / 2
? -5 : 5;
57
58 [Link]({
59 x: spaceship.x + [Link] / 2,
60 y: spaceship.y + [Link] / 2,
61 velX: velX,
62 velY: velY,
63 radius: 6, // initial bullet size
64 maxRadius: 20, // max bullet size
65 growthRate: 0.5 // growth speed
66 });
67 }
68
69 // enemy spawn ints (used parameter)
70 function spawnEnemy(speed) {
71 if (gameOver) return;
72 let x, y;
73
74 // prevents enemy from spawning inside the player box
75 do {
76 x = [Link]() * [Link];
77 y = [Link]() * [Link];
78 } while (
79 x >= boundary.x - 20 &&
80 x <= boundary.x + [Link] + 20 &&
81 y >= boundary.y - 20 &&
82 y <= boundary.y + [Link] + 20
83 );
84
85 const targetX = spaceship.x + [Link] / 2;
86 const targetY = spaceship.y + [Link] / 2;
87 const angle = Math.atan2(targetY - y, targetX - x);
88
89 [Link]({
90 x: x,
91 y: y,
92 size: 10,
93 maxSize: [Link]([Link], [Link]) * 0.9,
94 growthRate: 0.3,
95 speed: speed,
localhost:1722/48a0ef77-87de-4800-8d38-9989327012b2/ 2/6
25. 3. 14. 오전 2:14 photon_ap.html
96 dx: [Link](angle),
97 dy: [Link](angle)
98 });
99
100 setTimeout(() => spawnEnemy(speed + 0.2), 2000); // enemy speed increases
101 }
102
103
104 // power up ints
105 function spawnPowerUp() {
106 [Link]({
107 x: [Link]() * ([Link] - 20),
108 y: [Link]() * ([Link] - 20),
109 type: "shield",
110 active: true
111 });
112 setTimeout(spawnPowerUp, 10000); // new power up spawns every 10 sec.
113 }
114
115
116
117 // game update ints
118 function updateGame() {
119 updatePlayer(); // player movement update
120
121
122
123 // bullet update
124 for (let i = [Link] - 1; i >= 0; i--) {
125 let bullet = photons[i];
126 bullet.x += [Link];
127 bullet.y += [Link];
128
129 if ([Link] < [Link]) [Link] += [Link];
130
131 if (
132 bullet.x - [Link] < 0 ||
133 bullet.x + [Link] > [Link] ||
134 bullet.y - [Link] < 0 ||
135 bullet.y + [Link] > [Link]
136 ) {
137 [Link](i, 1);
138 }
139 }
140
141
142 // enemy update
143 for (let i = [Link] - 1; i >= 0; i--) {
144 let enemy = enemies[i];
145
localhost:1722/48a0ef77-87de-4800-8d38-9989327012b2/ 3/6
25. 3. 14. 오전 2:14 photon_ap.html
146 enemy.x += [Link] * [Link];
147 enemy.y += [Link] * [Link];
148
149 if ([Link] < [Link]) [Link] += [Link];
150
151
152 // prevents enemy from going inside the box
153 if (
154 enemy.x >= boundary.x - [Link] &&
155 enemy.x <= boundary.x + [Link] + [Link] &&
156 enemy.y >= boundary.y - [Link] &&
157 enemy.y <= boundary.y + [Link] + [Link]
158 ) {
159 enemy.x -= [Link] * [Link];
160 enemy.y -= [Link] * [Link];
161 }
162
163
164
165
166
167 if ( // if the distance between spaceship and enemy is close, its regarded as
collision. ; Loses health
168 [Link](
169 enemy.x - (spaceship.x + [Link] / 2),
170 enemy.y - (spaceship.y + [Link] / 2)
171 ) < [Link] / 2 + [Link] / 2
172 ) {
173 [Link](i, 1); // remove enemy
174 [Link]--;
175 if ([Link] <= 0) { // gameover
176 gameOver = true;
177 return;
178 }
179 }
180
181
182
183 // when the bullet hits the enemy, player scores; photon and bullet gets gone
184 for (let j = [Link] - 1; j >= 0; j--) {
185 if (
186 [Link](
187 photons[j].x - enemy.x,
188 photons[j].y - enemy.y
189 ) < photons[j].radius + [Link] / 2
190 ) {
191 [Link](j, 1);
192 [Link](i, 1);
193 score += 10;
194 break;
localhost:1722/48a0ef77-87de-4800-8d38-9989327012b2/ 4/6
25. 3. 14. 오전 2:14 photon_ap.html
195 }
196 }
197 }
198
199
200
201
202 // adding +1 health when bullet hits power up
203 for (let i = [Link] - 1; i >= 0; i--) {
204 let powerUp = powerUps[i];
205
206 for (let j = [Link] - 1; j >= 0; j--) {
207 let bullet = photons[j];
208
209 if (
210 bullet.x + [Link] > powerUp.x &&
211 bullet.x - [Link] < powerUp.x + 20 &&
212 bullet.y + [Link] > powerUp.y &&
213 bullet.y - [Link] < powerUp.y + 20
214 ) {
215 if ([Link] < [Link]) [Link]++; //
add up the health by one
216 [Link](i, 1); // remove the power up square
217 [Link](j, 1); // remove bullet
218 break;
219 }
220 }
221 }
222 }
223
224
225
226 // display the game element
227 function draw() {
228 [Link](0, 0, [Link], [Link]);
229
230 [Link] = "#000";
231 [Link](boundary.x, boundary.y, [Link], [Link]);
232
233 [Link] = "blue";
234 [Link](spaceship.x, spaceship.y, [Link], [Link]);
235
236 [Link] = "red";
237 for (const photon of photons) {
238 [Link]();
239 [Link](photon.x, photon.y, [Link], 0, [Link] * 2);
240 [Link]();
241 }
242
243 [Link] = "green";
localhost:1722/48a0ef77-87de-4800-8d38-9989327012b2/ 5/6
25. 3. 14. 오전 2:14 photon_ap.html
244 for (const enemy of enemies) {
245 [Link]();
246 [Link](enemy.x, enemy.y, [Link] / 2, 0, [Link] * 2);
247 [Link]();
248 }
249
250 [Link] = "yellow";
251 for (const powerUp of powerUps) {
252 [Link](powerUp.x, powerUp.y, 20, 20);
253 }
254
255 [Link] = "black";
256 [Link](`Health: ${[Link]}`, 10, 20);
257 [Link](`Score: ${score}`, 10, 40);
258
259 if (gameOver) {
260 [Link] = "red";
261 [Link] = "40px Arial";
262 [Link]("Game Over", [Link] / 2 - 100, [Link] / 2);
263 }
264 }
265
266
267
268 // gameloop (infinite)
269 function gameLoop() {
270 if (!gameOver) {
271 updateGame();
272 draw();
273 requestAnimationFram
e(gameLoop);
274 }
275 }
276
277 </script>
278
279 <!-- loads the game box -->
280 </head>
281 <body onload="init()">
282 <canvas id="gameCanvas" width="800" height="600"></canvas>
283 </body>
284 </html>
285
localhost:1722/48a0ef77-87de-4800-8d38-9989327012b2/ 6/6