-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathrabbitShoot.html
285 lines (246 loc) · 10.1 KB
/
rabbitShoot.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rabbitShoot.html</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
canvas{
border: 1px solid red;
}
#myCanvas{
/* 애니메이션 진행시간 조절 */
animation-duration: 0.3s;
}
</style>
</head>
<body>
<h1 class="animate__animated animate__bounce">canvas 에 사진을 출력하고 활용하는 예제</h1>
<canvas class="animate__animated" id="myCanvas" width="800" height="500"></canvas>
<br>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1">
<script>
//canvas 의 참조값 얻어오기
let canvas=document.querySelector("#myCanvas");
//canvas 에 랜더링 할수 있는 도구의 참조값 얻어오기(object)
let context=canvas.getContext("2d");
//canvas 에 출력할 이미지 로딩하기
let snipeImg=new Image();
snipeImg.src="images/snipe.png";
let backImg=new Image();
backImg.src="images/background.jpg";
let holeImg=new Image();
holeImg.src="images/hole.png";
//토끼 이미지를 로딩해서
let rabbitImg1=new Image();
let rabbitImg2=new Image();
rabbitImg1.src="images/rabbit_1.png";
rabbitImg2.src="images/rabbit2.png";
//배열에 담기
let rabbitImgs=[rabbitImg1, rabbitImg2];
//파편 이미지를 저장할 배열
let fragImgs=[];
for(let i=0; i<6; i++){
//파편 이미지를 로딩해서
let tmp=new Image();
tmp.src="images/b"+i+".png";
fragImgs.push(tmp);
}
//토끼의 초기 좌표
let rabbitX=400, rabbitY=250;
//토끼 이미지 인덱스
let rabbitIndex=0;
//재생할 오디오 로딩하기
let fireSound=new Audio("sounds/fire.wav");
let screamSound=new Audio("sounds/birddie.mp3");
//스나이프의 좌표
let snipeX=0;
let snipeY=0;
//총알 구멍 하나하나의 정보를 담고 있는 object 를 저장할 배열
let holes=[];
//카운트를 셀 변수
let count=0;
let jumsu=0;
//풍선 혹은 파편 객체를 담을 배열
let fragments=[];
//남은 play 시간
let playTime=3000;
//게임이 시작 되었는지 여부
let isStarted=false;
setInterval(function(){
//만일 게임이 시작 되지 않았으면
if(!isStarted){
//함수를 여기서 끝내라
return;
}
//남은 시간을 1씩 감소 시키기
playTime--;
//초당 100번씩 호출되는 함수 내부
//context.clearRect(0, 0, 800, 500);
//배경이미지를 canvas 의 크기에 맞게 그리기
context.drawImage(backImg, 0, 0, 800, 500);
//반복문 돌면서 모든 총알 구멍의 이미지 그리기
for(let i=0; i<holes.length; i++){
//i 번째 총알구멍 object 얻어오기
let tmp=holes[i];
context.drawImage(holeImg, tmp.x-10, tmp.y-10, 20, 20);
}
//파편 그리기
for(let i=0; i<fragments.length; i++){
//i 번째 파편객체를 참조해서
let tmp=fragments[i];
context.drawImage(fragImgs[tmp.type], tmp.x-25, tmp.y-25, 50, 50);
}
//토끼 그리기
context.drawImage(rabbitImgs[rabbitIndex], rabbitX-50, rabbitY-50, 100, 100);
context.drawImage(snipeImg, snipeX-50, snipeY-50, 100, 100);
//글자의 색상
context.fillStyle="yellow";
//글자의 크기와 글자체
context.font="20px Consolas";
//점수 출력
context.fillText("Point: "+jumsu , 10, 30);
//playTime 출력하기
context.fillText("Time:"+playTime, 10, 60);
fragmentAction();
rabbitAni();
moveRabbit();
if(playTime==0){
alert(jumsu+" 마리를 잡았습니다.");
jumsu=0;
holes=[];
fragments=[];
rabbitX=400;
rabbitY=250;
playTime=3000;
}
}, 10);
//토끼 움직이는 함수
function moveRabbit(){
// 200 번 정도 호출되었을때 우연히 움직이게 하기
let ranNum=Math.floor(Math.random()*200); // 0~199 사이의 랜덤한 정수
if(ranNum == 50){
rabbitX=Math.random()*750;
rabbitY=Math.random()*450;
}
}
//파편 관련 작업
function fragmentAction(){
//파편 움직이기
for(let i=0; i<fragments.length; i++){
let tmp=fragments[i];
tmp.x = tmp.x + tmp.speedX;
tmp.y += tmp.speedY;
//만일 화면을 벗어 났다면
if(tmp.x < -50 || tmp.x > 850 || tmp.y < -50 || tmp.y > 550){
tmp.isRemove=true; //배열에서 제거 하도록 일단 표시해 둔다.
}
}
//배열을 역순으로 탐색하면서 제거할 파편을 찾아서 배열에서 제거하기
for(let i=fragments.length-1 ; i>=0 ; i--){
//i번째 파편객체를 불러와서
let tmp=fragments[i];
//만일 제거해야할 파편이라면
if(tmp.isRemove){
//i번째 파편을 배열에서 제거한다.
fragments.splice(i, 1);
}
}
}
//토끼 애니메이션 관련 작업
function rabbitAni(){
//카운트를 1씩 증가 시킨다
count++;
//만일 카운트를 20 으로 나눈 나머지가 0 이 아니라면
if(count%20 != 0){
//함수를 여기서 끝내라
return;
}
//인덱스를 1 증가 시키고
rabbitIndex++;
if(rabbitIndex==2){//만일 존재하지 않는 인덱스라면
//인덱스를 다시 처음으로 되돌리기
rabbitIndex=0;
}
}
//canvas 안에서의 마우스 좌표를 snipeX, snipeY 에 반영할수 있을까?
// "mousemove" 이벤트!
document.querySelector("#myCanvas").addEventListener("mousemove", function(e){
//이벤트가 일어난 곳의 좌표를 snipe 의 좌표에 반영하기
snipeX=e.offsetX;
snipeY=e.offsetY;
});
//"mousedown" 이벤트가 일어 났을때 총소리 재생
document.querySelector("#myCanvas").addEventListener("mousedown", function(e){
//연속 재생이 가능하도록 재생위치를 처음으로 되돌리고
fireSound.currentTime=0;
//재생하기
fireSound.play();
//이벤트가 일어난 곳의 좌표
let x=e.offsetX;
let y=e.offsetY;
//이벤트가 일어난 곳의 좌표를 object 에 담는다.
let obj={x:x, y:y};
//배열에 누적 시키기
holes.push(obj);
//토끼의 영역에 마우스의 좌표가 있는지 여부를 판정하기 (토끼가 총에 맞았는지 여부)
let isShooted = (x > rabbitX-50) &&
(x < rabbitX+50) &&
(y > rabbitY-50) &&
(y < rabbitY+50);
if(isShooted){
//점수를 올리고
jumsu = jumsu+1;
//비명소리를 재생하고
screamSound.currentTime=0;
screamSound.play();
//파편(풍선) 객체를 만들어서 파편 배열에 저장하기
for(let i=0; i<6; i++){
//빈 object 를 만들어서
let obj={};
//필요한 정보를 넣어준다.
obj.x=rabbitX;
obj.y=rabbitY;
obj.type=i;
obj.speedX=Math.random()*20-10;
obj.speedY=Math.random()*20-10;
obj.isRemove=false; //배열에서 제거할지 여부
fragments.push(obj);
}
//토끼를 랜덤한 다른 위치로 이동 시키기
rabbitX=Math.random()*700+50;
rabbitY=Math.random()*400+50;
// if(jumsu==100){
// alert("Game Over!");
// jumsu=0;
// rabbitX=400;
// rabbitY=250;
// holes=[];
// fragments=[];
// }
}else{
//토끼를 맞추지 못한 경우
jumsu--;
//애니메이션 효과를 주기위한 클래스 추가
document.querySelector("#myCanvas").classList.add("animate__jello");
}
});
//애니메이션이 끝났으면
document.querySelector("#myCanvas").addEventListener("animationend", function(){
//다음번에 애니메이션이 또 동작하도록 클래스 제거
this.classList.remove("animate__jello");
});
//볼륨 조절
document.querySelector("#volume").addEventListener("change", function(){
//선택한 volume 값을 읽어와서
let v=Number(this.value);
//효과음의 volume 에 반영한다.
fireSound.volume=v;
screamSound.volume=v;
});
</script>
</body>
</html>