이전 포스팅을 이어서 작성한 내용입니다.
https://rubbery.tistory.com/65
JavaScript canvas 함수(6)
이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/62 JavaScript canvas 함수(5) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/58 JavaScript canvas 함수(4) 이전 포스팅을 이
rubbery.tistory.com
이번엔 토끼를 맞출때마다 텍스트 칸에 맞춘횟수를 표현할수있는 기능을 만들어보자.
1. html 영역에 p요소를 새로 생성하고 잡은 토끼의 갯수를 확인할수있도록 숫자 값을 입력하고 id를 부여한다.
2. script 영역에 토끼를 맞춘 횟수를 확인할 변수로 정의 해준다.
3. 토끼를 맞춘 횟수만큼 point1 의 innerText를 1증가 시키는 코드를 작성한다.
위와 같이 토끼를 맞춘 횟수만큼 숫자값이 변경되는걸 볼 수 있다.
또한 canvas 영역 내에서 글자를 만들어서 동일하게 토끼를 잡은 갯수만큼 증가하도록 만들수도있다.
1-1. script 영역에 context의 크기와 글꼴, 색상을 지정한다.
1-2. setInterval 영역 내에서 다음과 같이 코드를 작성해준다.
다음과 같이 p요소와 같이 토끼를 클릭한 값만큼 같이 증가하게 된다.
//전체 코드
<!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>Step09_example5.html</title>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<h1>canvas 요소 활용해 보기</h1>
<p> 잡은 토끼의 갯수 : <strong id="point">0</strong></p>
<!-- canvas 요소는 width 와 height 를 속성으로 직접 지정할수 있다. -->
<canvas id="myCanvas" width="800" height="500"></canvas>
<script>
//canvas 요소의 참조값
const canvas=document.querySelector("#myCanvas");
//canvas 에 그림을 그릴 도구(context) 객체 얻어내기
const context=canvas.getContext("2d");
//canvas 에 그릴 이미지 로딩하기
const snipeImg=new Image();
snipeImg.src="images/snipe.png";
const holeImg=new Image();
holeImg.src="images/hole.png";
const backImg=new Image();
backImg.src="images/background.jpg";
//토끼 이미지 로딩
const rabbitImg1=new Image();
rabbitImg1.src="images/rabbit_1.png";
const rabbitImg2=new Image();
rabbitImg2.src="images/rabbit2.png";
//로딩된 이미지를 배열에 담아 놓는다 (나중에 애니매이션 효과를 주기 위해)
const rabbitImgs=[rabbitImg1, rabbitImg2];
//snipe 의 좌표
let snipeX=0, snipeY=0;
//총알 구멍 객체(object) 를 저장할 배열
const holes=[];
//토끼의 좌표
let rabbitX=400, rabbitY=250;
//토끼 이미지 인덱스
let rabbitIndex=0;
//카운트를 셀 변수
let count=0;
// 토끼를 맞춘 횟수
let point1 = 0;
//효과음 로딩하기
const fireSound = new Audio("sounds/fire.wav");
const dieSound = new Audio("sounds/birddie.mp3");
// 풍선 이미지 저장할 배열
const bubbleImgsp=[];
//풍선 이미지 로딩
for (let i=0; i<6; i++) {
// 풍선 이미지를 로딩해서
let tmp=new Image()
tmp.src="images/b"+i+".png";
// 배열에 누적시키기
bubbleImgsp.push(tmp);
}
// 풍선의 정보를 저장할 배열
const bubbles=[];
// 글자의 크기, 글꼴
context.font = "20px consolas";
// 글자의 색상
context.fillStyle = "yellow";
setInterval(()=>{
//함수가 호출될때 마다 count 를 1 씩 증가 시킨다
count++;
//여기 함수 내부는 1/100 초 마다 한번씩 실행된다.
//context.clearRect(0, 0, 800, 500);
//배경이미지를 canvas 의 크기에 맞게 그린다.
context.drawImage(backImg, 0, 0, 800, 500);
//총알 구멍 이미지를 반복문 돌면서 모두 그린다.
for(let i=0; i<holes.length; i++){
//i번째 총알 구멍 이미지 정보를 담고 있는 객체를 불러와서
let tmp=holes[i];
//거기에 담긴 x, y 좌표를 이용해서 총알 구멍을 그린다.
context.drawImage(holeImg, tmp.x-10, tmp.y-10, 20, 20);
}
// 토끼 그리기
context.drawImage(rabbitImgs[rabbitIndex], rabbitX-50, rabbitY-50, 100, 100)
// 풍선 그리기
for(let i=0; i<bubbles.length; i++) {
// i번째 풍선 정보를 가지고 있는 object 를 참조해서
let tmp = bubbles[i];
// object 안에 있는 정보를 바탕으로 풍선을 그린다.
context.drawImage(bubbleImgsp[tmp.index], tmp.x-25, tmp.y-25, 50, 50);
}
// 풍선 움직이기
for(let i=0; i<bubbles.length; i++) {
let tmp = bubbles[i];
// 각각 풍선의 speedX, speedY 값 만큼 x,y 좌표를 변화시킨다.
tmp.x+= tmp.speedX;
tmp.y+= tmp.speedY;
// 위에서 움직인 직후 풍선이 화면을 이탈했는지 판별해서
let isOut = tmp.x<-25 || tmp.x>825 || tmp.y<-25 || tmp.y>525;
if(isOut) {
tmp.isOut = true;
}
}
// 풍선 체크하기 (화면을 벗어난 풍선 제거)
for (let i=0; i<bubbles.length; i++) {
let tmp=bubbles[i];
// 만일 i 번째 풍선이 화면을 이탈했으면
if (tmp.isOut) {
//bubbles 배열에서 i 번째 방을 잘라내기(삭제하기)
bubbles.splice(i, 1);
}
}
//스나이프 그리기
context.drawImage(snipeImg, snipeX-50, snipeY-50, 100, 100);
// 글자 출력하기 .fillText(글내용, 좌하단의 x, 좌하단의 y)
context.fillText("Point :"+point1, 10, 30);
if(count%20 == 0){
//토끼 이미지 인덱스 1 증가 시키기
rabbitIndex++;
//만일 존재하지 않는 인덱스라면 0 으로 초기화 하기
if(rabbitIndex==2){
rabbitIndex=0;
}
}
// 0~99 사이의 랜덤한 정수를 얻어내서
let ranNum= parseInt(Math.random()*100);
// 우연히 50이 나올때만 (확률상 1초에 대략 1번꼴)
if (ranNum==50) {
//토끼를 랜덤한 위치로 움직이게 하기
rabbitX = Math.random()*700 + 50;
rabbitY = Math.random()*400 + 50;
}
}, 10);
//canvas 요소의 mousemove 이벤트 처리
canvas.addEventListener("mousemove", (e)=>{
//이벤트가 발생한곳의 canvas 내에서의 좌표를 snipeX, snipeY 에 반영
snipeX=e.offsetX;
snipeY=e.offsetY;
});
canvas.addEventListener("mousedown", (e)=>{
// mousedown 이벤트가 발생한 곳의 좌표를 변수에 담아놓고 아래에서 2번 사용
let x = e.offsetX
let y = e.offsetY
//이벤트가 발생한 곳의 좌표를 object 에 담는다.
// const hole={x:x, y:y} 의 줄임표현
const hole={x, y};
//holes 배열에 저장(누적) 시킨다.
holes.push(hole);
// 재생 위치를 처음으로 리셋 후
fireSound.currentTime=0;
// 총소리 재생
fireSound.play();
// 토끼가 총에 맞았는지 판별해서 맞았으면 소리재생
let isRabbitDie = x > rabbitX-50 &&
x < rabbitX+50 &&
y > rabbitY-50 &&
y < rabbitY+50
if (isRabbitDie) {
dieSound.currentTime=0;
dieSound.play();
console.log("죽는소리")
//풍선6개 만들기
for (let i=0; i<6; i++) {
//새로운 object를 하나 만들어서
let tmp ={};
//풍선 하나의 정보를 담고
tmp.x = rabbitX;
tmp.y = rabbitY;
tmp.index = i;
tmp.speedX = Math.random()*20-10
tmp.speedY = Math.random()*20-10
tmp.isOut = false; // 화면을 벗어난지 여부
// 배열에 누적 시키기
bubbles.push(tmp);
}
// 총에 맞은 토끼를 랜덤한 위치로 움직이게 하기
rabbitX = Math.random()*700 + 50;
rabbitY = Math.random()*400 + 50;
// 토끼를 맞춘 횟수만큼 point의 innerText를 1증가 시키기
point1++
document.querySelector("#point").innerText=point1;
}
});
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| JavaScript canvas 함수(9) (0) | 2023.05.12 |
|---|---|
| JavaScript canvas 함수(8) (0) | 2023.05.11 |
| JavaScript canvas 함수(6) (0) | 2023.05.10 |
| JavaScript canvas 함수(5) (0) | 2023.05.09 |
| JavaScript canvas 함수(4) (0) | 2023.05.08 |
