Scribd
Upload
3 views6 pages

photon_ap.html

The document is an HTML file for a game called 'Photon Shooter', which includes JavaScript code for game mechanics such as player movement, shooting photons, spawning enemies, and power-ups. The game features a spaceship that can move within defined boundaries, shoot bullets, and interact with enemies and power-ups while keeping track of the player's health and score. The game loop continuously updates the game state and renders the graphics on a canvas element.

Uploaded by

Koreayoutuber
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views6 pages

photon_ap.html

The document is an HTML file for a game called 'Photon Shooter', which includes JavaScript code for game mechanics such as player movement, shooting photons, spawning enemies, and power-ups. The game features a spaceship that can move within defined boundaries, shoot bullets, and interact with enemies and power-ups while keeping track of the player's health and score. The game loop continuously updates the game state and renders the graphics on a canvas element.

Uploaded by

Koreayoutuber
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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 = document.getElementById("gameCanvas");
27 ctx = canvas.getContext("2d");
28
29
30 // key binding
31 document.addEventListener("keydown", (e) => (keys[e.key] = true));
32 document.addEventListener("keyup", (e) => (keys[e.key] = false));
33 document.addEventListener("keydown", (e) => {
34 if (e.code === "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 + spaceship.height < boundary.y +
boundary.height) 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 + spaceship.width < boundary.x +
boundary.width) spaceship.x += speed;
50 }
51
52
53 // bullet fire ints
54 function firePhoton() {
55 let velX = spaceship.x + spaceship.width / 2 < boundary.x + boundary.width / 2 ?
-5 : 5;
56 let velY = spaceship.y + spaceship.height / 2 < boundary.y + boundary.height / 2
? -5 : 5;
57
58 photons.push({
59 x: spaceship.x + spaceship.width / 2,
60 y: spaceship.y + spaceship.height / 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 = Math.random() * canvas.width;
77 y = Math.random() * canvas.height;
78 } while (
79 x >= boundary.x - 20 &&
80 x <= boundary.x + boundary.width + 20 &&
81 y >= boundary.y - 20 &&
82 y <= boundary.y + boundary.height + 20
83 );
84
85 const targetX = spaceship.x + spaceship.width / 2;
86 const targetY = spaceship.y + spaceship.height / 2;
87 const angle = Math.atan2(targetY - y, targetX - x);
88
89 enemies.push({
90 x: x,
91 y: y,
92 size: 10,
93 maxSize: Math.max(boundary.width, boundary.height) * 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: Math.cos(angle),
97 dy: Math.sin(angle)
98 });
99
100 setTimeout(() => spawnEnemy(speed + 0.2), 2000); // enemy speed increases
101 }
102
103
104 // power up ints
105 function spawnPowerUp() {
106 powerUps.push({
107 x: Math.random() * (canvas.width - 20),
108 y: Math.random() * (canvas.height - 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 = photons.length - 1; i >= 0; i--) {
125 let bullet = photons[i];
126 bullet.x += bullet.velX;
127 bullet.y += bullet.velY;
128
129 if (bullet.radius < bullet.maxRadius) bullet.radius += bullet.growthRate;
130
131 if (
132 bullet.x - bullet.radius < 0 ||
133 bullet.x + bullet.radius > canvas.width ||
134 bullet.y - bullet.radius < 0 ||
135 bullet.y + bullet.radius > canvas.height
136 ) {
137 photons.splice(i, 1);
138 }
139 }
140
141
142 // enemy update
143 for (let i = enemies.length - 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 += enemy.dx * enemy.speed;


147 enemy.y += enemy.dy * enemy.speed;
148
149 if (enemy.size < enemy.maxSize) enemy.size += enemy.growthRate;
150
151
152 // prevents enemy from going inside the box
153 if (
154 enemy.x >= boundary.x - enemy.size &&
155 enemy.x <= boundary.x + boundary.width + enemy.size &&
156 enemy.y >= boundary.y - enemy.size &&
157 enemy.y <= boundary.y + boundary.height + enemy.size
158 ) {
159 enemy.x -= enemy.dx * enemy.speed;
160 enemy.y -= enemy.dy * enemy.speed;
161 }
162
163
164
165
166
167 if ( // if the distance between spaceship and enemy is close, its regarded as
collision. ; Loses health
168 Math.hypot(
169 enemy.x - (spaceship.x + spaceship.width / 2),
170 enemy.y - (spaceship.y + spaceship.height / 2)
171 ) < enemy.size / 2 + spaceship.width / 2
172 ) {
173 enemies.splice(i, 1); // remove enemy
174 spaceship.health--;
175 if (spaceship.health <= 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 = photons.length - 1; j >= 0; j--) {
185 if (
186 Math.hypot(
187 photons[j].x - enemy.x,
188 photons[j].y - enemy.y
189 ) < photons[j].radius + enemy.size / 2
190 ) {
191 photons.splice(j, 1);
192 enemies.splice(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 = powerUps.length - 1; i >= 0; i--) {
204 let powerUp = powerUps[i];
205
206 for (let j = photons.length - 1; j >= 0; j--) {
207 let bullet = photons[j];
208
209 if (
210 bullet.x + bullet.radius > powerUp.x &&
211 bullet.x - bullet.radius < powerUp.x + 20 &&
212 bullet.y + bullet.radius > powerUp.y &&
213 bullet.y - bullet.radius < powerUp.y + 20
214 ) {
215 if (spaceship.health < spaceship.maxHealth) spaceship.health++; //
add up the health by one
216 powerUps.splice(i, 1); // remove the power up square
217 photons.splice(j, 1); // remove bullet
218 break;
219 }
220 }
221 }
222 }
223
224
225
226 // display the game element
227 function draw() {
228 ctx.clearRect(0, 0, canvas.width, canvas.height);
229
230 ctx.strokeStyle = "#000";
231 ctx.strokeRect(boundary.x, boundary.y, boundary.width, boundary.height);
232
233 ctx.fillStyle = "blue";
234 ctx.fillRect(spaceship.x, spaceship.y, spaceship.width, spaceship.height);
235
236 ctx.fillStyle = "red";
237 for (const photon of photons) {
238 ctx.beginPath();
239 ctx.arc(photon.x, photon.y, photon.radius, 0, Math.PI * 2);
240 ctx.fill();
241 }
242
243 ctx.fillStyle = "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 ctx.beginPath();
246 ctx.arc(enemy.x, enemy.y, enemy.size / 2, 0, Math.PI * 2);
247 ctx.fill();
248 }
249
250 ctx.fillStyle = "yellow";
251 for (const powerUp of powerUps) {
252 ctx.fillRect(powerUp.x, powerUp.y, 20, 20);
253 }
254
255 ctx.fillStyle = "black";
256 ctx.fillText(`Health: ${spaceship.health}`, 10, 20);
257 ctx.fillText(`Score: ${score}`, 10, 40);
258
259 if (gameOver) {
260 ctx.fillStyle = "red";
261 ctx.font = "40px Arial";
262 ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 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

You might also like