HTML
[javascript] 우주선 게임
소댓
2023. 4. 18. 21:49
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>space17.html</title>
<!-- 게임 오버와 재시작 -->
<style>
/* 모든 요소의 마진과 패딩 없애기.. 정확한 위치를 위해! */
*{ margin: 0; padding: 0;}
canvas{background-color: #aaaaaa;}
</style>
<script>
var counter = 0;
// 배경 이미지 객체
var bg1 = new Image();
var bg2 = new Image();
bg1.src = "../images/space.jpg"; // 이미지 source 주기
bg2.src = "../images/space.jpg"; // 이미지 source 주기
var bg1Y = 0;
var bg2Y = -800;
// 우주선 이미지 객체
var ship1 = new Image();
var ship2 = new Image();
var ship3 = new Image();
var ship4 = new Image();
// 우주선 이미지 객체 source 주기
ship1.src = "../images/gunship4.png";
ship2.src = "../images/gunship5.png";
ship3.src = "../images/gunship6.png";
ship4.src = "../images/gunship7.png";
// 우주선 좌표 변수
var shipX = 280;
var shipY = 650;
// 적 이미지 객체
var enemy1 = new Image();
var enemy2 = new Image();
var enemy3 = new Image();
var enemy4 = new Image();
// 적 이미지 객체 source 주기
enemy1.src = "../images/gunship0.png";
enemy2.src = "../images/gunship1.png";
enemy3.src = "../images/gunship2.png";
enemy4.src = "../images/gunship3.png";
// 노랑 적 이미지 객체
var enemy11 = new Image();
var enemy12 = new Image();
var enemy13 = new Image();
var enemy14 = new Image();
// 노랑 적 이미지 객체 source 주기
enemy11.src = "../images/gunship11.png";
enemy12.src = "../images/gunship12.png";
enemy13.src = "../images/gunship13.png";
enemy14.src = "../images/gunship14.png";
// 파랑 적 이미지 객체
var enemy21 = new Image();
var enemy22 = new Image();
var enemy23 = new Image();
var enemy24 = new Image();
// 파랑 적 이미지 객체 source 주기
enemy21.src = "../images/gunship21.png";
enemy22.src = "../images/gunship22.png";
enemy23.src = "../images/gunship23.png";
enemy24.src = "../images/gunship24.png";
// 적우주선 Y좌표
var enemyY = 100;
// 적 우주선 배열
var enemyArray = [];
// 미사일 이미지 객체
var missile = new Image();
missile.src = "../images/missile1.png";
// 미사일 좌표
var missileX = 250; // 250
var missileY = 500; // 500
// 미사일 배열 선언
var missileArray = [];
// 배경 음악 객체
var bgm = new Audio("../sounds/Burning_Body.mp3");
// 발사 음악 객체
var missileSound = new Audio("../sounds/fire2.wav");
// 적 우주선 폭발
var spaceCrashSound = new Audio("../sounds/scream.wav");
// 스코어 객체
var score = 0;
var ctx;
// 게임 종료 변수
var isGameOver = false;
var canvas; // 게임오버에서 쓰기 위해 전역변수로 선언
window.onload=function() { // 익명함수 주기
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
// 마우스가 움직이면 moveShip 실행
canvas.onmousemove = moveShip;
// 마우스 클릭하면 미사일이 나가도록
canvas.onmousedown = fireMissile;
// 게임이 중지된 상태에서 동전을 넣으면(동전 대신 키보드 x)
var body = document.body;
body.onkeydown = resetGame;
window.setInterval(makeEnemy, 1000);
// makeEnemy();
// drawScreen을 계속 그리도록
window.setInterval(drawScreen, 80);
}
function resetGame(e) {
console.log("RESET 함수 호출 중");
// console.dir(e);
console.log(e.keyCode); // ASCII 코드
// x의 ASCII 88
if(isGameOver) { // 게임 오버 상태이면서
if(e.keyCode == 88) { // 눌린 키가 x키 이면,
isGameOver = false;
canvas.onmousemove = moveShip;
canvas.onmousedown = fireMissile;
shipX = 250;
shipY = 500;
score = 0;
}
}
}
function makeEnemy() {
// 적 우주선 타입을 랜덤으로 생성
// 1. 일반 적 우주선
// 2. 노랑 적 비행 (체력이 높음)
var t = Math.floor(Math.random()*3)+1;
console.log(t); // type 1, 2, 3 중 하나
// type이 1이면
// 1. x좌표 랜덤값
var enemyX = Math.random()*550;
// 2. 적 우주선 객체를 생성 > JSON 타입
var enemy = { x : enemyX, y : -150, type: t, hp: t*100} // y의 위치를 눈에서 안보이는 곳부터 시작하게
// 3. 배열에 담기
enemyArray.push(enemy);
}
function fireMissile(e) {
// console.log(e);
var mX = e.pageX;
var mY = e.pageY;
// 미사일 객체
var m = {
x : mX,
y : mY
}
missileArray.push(m);
// console.log(missileArray); // 콘솔에서 객체 내용 확인
missileSound.currentTime = 0;
missileSound.play();
}
function moveShip(e) { // 마우스로 비행기 움직이기
// console.log(e);
shipX = e.pageX;
shipY = e.pageY;
}
function drawScreen() {
counter ++;
// console.log(counter);
// 적 우주선의 y 좌표 값을 감소
// enemyY += 8;
checkCollision(); // 충돌테스트 실행
checkCollision2(); // 충돌테스트2 실행
// 적 우주선 내려오도록
for(var i=0; i<enemyArray.length; i++) {
var e = enemyArray[i];
e.y += 10;
}
bg1Y += 10;
bg2Y += 10;
// missileY -= 30;
// 미사일 배열에서 미사일 하나를 꺼내서
// y 값을 감소
for(var i=0; i<missileArray.length; i++) {
var m = missileArray[i];
m.y -= 10;
}
if (bg1Y >= 800) {
bg1Y = -800;
bg2Y = 0;
}
if (bg2Y >= 800) {
bg2Y = -800;
bg1Y = 0;
}
ctx.drawImage(bg1, 0, bg1Y, 600, 800); // 캔버스에 bg 이미지 그리기
ctx.drawImage(bg2, 0, bg2Y, 600, 800); // 캔버스에 bg 이미지 그리기
if (counter%4 == 0) {
ctx.drawImage(ship1, shipX-25, shipY-25, 50, 50);
} else if (counter%4 == 1) {
ctx.drawImage(ship2, shipX-25, shipY-25, 50, 50);
} else if (counter%4 == 2) {
ctx.drawImage(ship3, shipX-25, shipY-25, 50, 50);
} else if (counter%4 == 3) {
ctx.drawImage(ship3, shipX-25, shipY-25, 50, 50);
}
// 적 우주선 그리기
for(var i=0; i<enemyArray.length; i++) {
var e = enemyArray[i];
// e.y += 10;
// 타입에 따라서 다르게 우주선 그리기
if(e.type == 1) {
if (counter%4 == 0) {
ctx.drawImage(enemy1, e.x-25, e.y-25, 50, 50);
} else if (counter%4 == 1) {
ctx.drawImage(enemy2, e.x-25, e.y-25, 50, 50);
} else if (counter%4 == 2) {
ctx.drawImage(enemy3, e.x-25, e.y-25, 50, 50);
} else if (counter%4 == 3) {
ctx.drawImage(enemy4, e.x-25, e.y-25, 50, 50);
}
} else if (e.type == 2) {
if (counter%4 == 0) {
ctx.drawImage(enemy11, e.x-25, e.y-25, 50, 50);
} else if (counter%4 == 1) {
ctx.drawImage(enemy12, e.x-25, e.y-25, 50, 50);
} else if (counter%4 == 2) {
ctx.drawImage(enemy13, e.x-25, e.y-25, 50, 50);
} else if (counter%4 == 3) {
ctx.drawImage(enemy14, e.x-25, e.y-25, 50, 50);
}
} else if (e.type == 3) {
if (counter%4 == 0) {
ctx.drawImage(enemy21, e.x-40, e.y-40, 80, 80);
} else if (counter%4 == 1) {
ctx.drawImage(enemy22, e.x-40, e.y-40, 80, 80);
} else if (counter%4 == 2) {
ctx.drawImage(enemy23, e.x-40, e.y-40, 80, 80);
} else if (counter%4 == 3) {
ctx.drawImage(enemy24, e.x-40, e.y-40, 80, 80);
}
if (e.y >= 900) {
enemyArray.shift();
}
}
}
// console.log(enemyArray);
// 미사일 그리기
for(var i=0; i<missileArray.length; i++) {
var m = missileArray[i]; // 한 개의 미사일 꺼내기
ctx.drawImage(missile, m.x, m.y, 5, 13); // m.x, m.y로 변경
// 화면 밖으로 나가면 미사일 제거
if (m.y < -60)
missileArray.shift();
// shift() : 배열 맨 앞의 값을 삭제
// unshift() : 배열 맨 앞의 값을 추가
// push() : 배열 맨 마지막에 추가
// pop() : 배열 맨 마지막에 넣은 것을 꺼냄
}
// console.log(missileArray); // 미사일 갯수 감소 확인
// 화면에 score 추가
ctx.font = "25px 고딕";
ctx.fillStyle = "red";
ctx.fillText("SCORE : " + score, 200, 50);
// 게임 오버 메세지 출력
if(isGameOver) { // boolean변수는 충돌 테스트에서..
// isGameOver가 트루라면,
ctx.font = "90px 고딕";
ctx.fillText("GAME OVER", 50, 300);
ctx.font = "30px 고딕";
ctx.fillText("PLEASE INSERT COIN", 150, 400);
}
} // drawScreen() end
function gameOver() {
// 게임 오버라면 마우스 안움직이고, 안눌리게
console.log("GAME OVER");
canvas.onmousedown='';
canvas.onmousemove='';
isGameOver = true;
}
function pythagoras(x1, y1, x2, y2) {
return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
}
function checkCollision(e) {
// console.log("충돌테스트");
// 1. 적 우주선 배열에서 적 우주선을 한 대 꺼내기
for(var i=0; i<enemyArray.length; i++) {
var e = enemyArray[i];
// 2. 내 우주선의 좌표
// shipX, shipY
// 3. 피타고라스 함수를 사용해서
// 둘 사이의 거리를 측정,
// 가까우면 게임오버야 라는 메시지 콘솔에 출력
var dis = pythagoras(e.x, e.y ,shipX, shipY);
console.log("우주선 간 거리 : "+dis);
if (dis < 40){
// console.log("게임 오버!");
// 화면에 큰 글씨로 GAME OVER 메세지 출력
gameOver();
// 내 비행기와 적 비행기 거리가 40 미만이면 게임오버
}
}
}
function checkCollision2() {
// 미사일과 적 우주선의 충돌
// 1. 미사일 배열에서 미사일 한 개를 꺼낸다.
for(var i = 0; i<missileArray.length; i++) {
var m = missileArray[i];
// 2. 적 우주선 배열에서 우주선을 한 개 꺼낸다.
for(var j = 0; j<enemyArray.length; j++) {
var e = enemyArray[j];
// 3. 적 우주선과의 거리를 계산한다.
var dis = pythagoras( m.x, m.y, e.x, e.y);
console.log("미사일과 적과의 거리 : " + dis);
// 4. 충분한 거리 이내로 들어왔다면 충돌한것으로 간주한다.
// 콘솔에 메세지 출력
if(dis<40) {
console.log("적 퇴치!");
// e.y -= 30;
// 적의 체력
e.hp -= 50; // 적이 미사일 맞으면 체력이 50 감소
m.x = -400; // 맞으면 미사일 사라지게
e.y -= 30;
if(e.hp <= 0) { // 적이 격추
e.x = -100; // 맞으면 뒤로 100씩 밀림
// 스코어 100점 플러스
score += 100;
// 적 우주선 폭발 사운드
spaceCrashSound.currentTime = 0;
spaceCrashSound.play();
}
// 5. 다음 미사일을 꺼내서 검사한다.
// 6. 모든 미사일을 반복해서 꺼낸다.
}
}
}
}
function startMusic() {
bgm.play();
console.log("음악 시작");
}
function stopMusic() {
bgm.currentTime = 0;
bgm.pause();
console.log("음악 종료");
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
<br>
<!-- 배경음악 on/off 버튼 : burning_body.mp3 -->
<input type="button" value="배경음악 on" onclick="startMusic();">
<input type="button" value="배경음악 off" onclick="stopMusic();">
</body>
</html>
|
cs |
+ 경량화 (파일 추가 예정!!)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>space18.html</title>
<!-- 게임 오버와 재시작 -->
<style>
/* 모든 요소의 마진과 패딩 없애기.. 정확한 위치를 위해! */
*{ margin: 0; padding: 0;}
canvas{background-color: #aaaaaa;}
</style>
<script src = "../js/game2.js"> </script>
<!-- js 폴더의 game.js 내용 불러오기 -->
<!-- 따로 저장해놓고 파일을 수정하면 해당 파일을 참조하는 모든 파일들을 한번에 수정할 수 있음! -->
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
<br>
<!-- 배경음악 on/off 버튼 : burning_body.mp3 -->
<input type="button" value="배경음악 on" onclick="startMusic();">
<input type="button" value="배경음악 off" onclick="stopMusic();">
</body>
</html>
|
cs |