Scribd
Upload
1 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

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
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