🐰🥕 토끼 게임 사이트로 이동하기
*해당 게임은 코딩 애플님의 크롬 공룡게임 만들기 를 참고하였습니다.
<게임을 만들면서 해결해야할 문제이자 알게된 점>
1.start 버튼을 누르면 애니메이션이 시작되도록 구현하기
<문제>
게임 창을 처음 띄울 때, 게임 오버와 미션 달성 시에 start 버튼을 눌러 게임을 다시 시작할 수 있도록 하고 싶었다. 애니메이션의 대상인 함수(AniObject)는 항상 실행되도록 코드를 작성해야 애니메이션이 제도로 동작이 되었기에 필요시 마다 애니메이션을 중단하고 가동시킬 수 없어 이 문제를 해결하기 위해 아래의 방식을 선택했다.
<해결>
1) 버튼을 눌렀을 때 canvas의 display를 none에서 block 으로 바꾼다.
2) start 버튼을 포함한 popup 창이 열리는 동안 애니메이션이 진행되도록 하는 timer의 숫자를 0이나 특정한 숫자로 지정하고 popup 창이 닫히면 timer가 증가하도록 설정하여 게임의 객체들이 생성되도록 한다.
추가 설명
1)의 방법은 canvas를 보이지 않도록할 뿐이지 애니메이션은 계속 진행되기 때문에 점수가 0미만이 되면 게임이 끝나는 설정을 한 프로젝트에서 게임을 실행하기도 전에 게임 오버가 되는 일이 발생하기 때문에 2)의 방법을 추가해주었다.
start 버튼 후에 애니메이션이 빠르게 실행되기를 원해서 해당 프로젝트에서 timer =100으로 설정했다.
2. 일정한 시간마다 게임에 필요한 객체 생성
1) 반복해서 생성되는 객체는 class를 활용한다
2) 애니메이션을 생성되는 객체들이 3개 이상일 시에는 객체의 용도에 맞게 배열로 묶는다.
객체가 3개 이상으로 늘어나면 객체 중 일부가 생성되지 않는 오류가 발생하였고, 감정과 득점 여부로 객체를 나누어 배열을 생성하여 오류를 해결하였다.
// plant ,tigger, carrort을 class 를 이용해 반복해 생성될 수 있도록 함
// 충돌 시 감점이 일어나는 객체들은 obstacleArray로, 득점이 일어나는 객체들은 pointObject 이라는 배열에 추가되도록하고 forEach를 통해 배열안의 객체들이 생성되도록 해주었음.
function MakeObject(){
if( level > 2 && timer % 80 == 0){
obstacleArray.push(plant);
}
//... 조건 별로 배열에 넣을 감점 객체에 대한 조건들을 작성 ..//
obstacleArray.forEach( (obstacle ,i ,o)=>{
if(obstacle.x<0){
o.splice(i,1)
};
obstacle.x-- ;
obstacle.draw();
DetectConflict(rabbit,obstacle);
obstacle.value === "obstacle1" ? LosePoint(1) : LosePoint(6);
})
//위와 같은 방식으로 pointObject를 생성함 //
3. 객체가 충돌될 때를 감지하여 점수에 반영하기
충돌 감지의 대상인 객체들이 4개로 이기때문에 개발의 효율을 위해서 충돌이 발생하는 경우는 동일하다는 것을 이용하여 충돌을 감지하는 함수를 만들고 , 충돌 감지의 대상들이 생성될 시에 충돌 감지 함수가 작동하도록 했다.
//충돌감지하는 함수
function DetectConflict (r, o){
let x = r.x <= o.x ;
let x1 = o.x <= (r.x+r.width) ;
let x2 = r.x<=(o.x+o.width);
let x3 = (o.x + o.width) <= (r.x +r.width);
let y = r.y <= o.y ;
let y1 = o.y <=(r.y+r.height);
let y2 = r.y <= (o.y+ o.height) ;
let y3 = (o.y+ o.height) <= (r.y + r.height) ;
(x && x1)||(x2 && x3) ? xIsTrue =true : xIsTrue=false ;
(y && y1)||(y2 && y3) ? yIsTrue =true : yIsTrue=false ;
}
//충돌 시 점수를 잃는 함수
function LosePoint(n){
if(xIsTrue && yIsTrue){losePoints = losePoints+n;};
ChangeLevel()
}
//충돌 시 점수를 얻는 함수
function GetPoint(n){
if( xIsTrue&& yIsTrue ){ getPoints = getPoints+n;} ;
ChangeLevel()
}
4. 웹 크기에 따른 변화 -window.onresize
웹 크기에 따른 canvas의 크기와 객체들의 위치를 조정해야 했고
window.onresize 를 이용해 이를 해결하였다.
function CheckWindowSize(){
canvas.width =window.innerWidth * 0.59;
canvas.height = window.innerHeight * 0.6 ;
if(window.innerWidth < 768){
gameExplain.textContent = "게임을 진행하기에 창 크기가 작습니다.창의 크기가 768px 이상으로 변경 후 새로고침해주세요.";
gameExplain.style.fontSize =10;
gameState.style.display='none';
startBtn.style.display='none';
}
}
CheckWindowSize();
window.onresize = CheckWindowSize; 