공룡게임 질문입니다.

[박성현]

공룡게임을 완성했습니다. collision check에서 조금 버그가 있어서 질문 드립니다.

 

일단 충돌시에 게임이 멈추는 것은 잘 작동합니다. 다만, 장애물과 공룡이 직접 부딪히지 않고, 사진처럼 장애물과 직접적으로 닿지 않고 장애물의 높이만 닿아도 게임이 멈춥니다.

오브젝트 사이에 거리 체크엔 문제가 없어보이는데 무엇이 문제인지 모르겠네요..

 

 

충돌 관련 코드는 이렇습니다. 아마 선생님과 같아보이는데... 코드 전문도 댓글로 남겨놓겠습니다.

 

[박성현]

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;

let dino = {
x : 100,
y : 300,
width : 50,
height : 50,
draw(){
ctx.fillStyle = 'green';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};

class Cactus {
constructor(){
this.x = 500,
this.y = 300,
this.width = 50,
this.height = 50
}
draw(){
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}

let timer = 0;
let cactus들 = [];
let 점프중 = false;
let 점프timer = 0;
let animation;

function frameWork(){
animation = requestAnimationFrame(frameWork)
 
timer++;
ctx.clearRect(0,0,canvas.width,canvas.height);

if( timer % 200 == 0){
let cactus = new Cactus();
cactus들.push(cactus);
}
 
cactus들.forEach((a)=>{
if (a.x < 0){
cactus들.shift();
}
a.x -=2;

충돌하냐(dino, a);

a.draw()
});

//충돌 check

function 충돌하냐(dino, cactus){
let x축차이 = cactus.x - ( dino.x + dino.width);
let y축차이 = cactus.y - ( dino.y + dino.height);
if(x축차이 < 0 && y축차이 < 0 ){
cancelAnimationFrame(animation)
}
}

//점프관련

if(점프중 == true){
점프timer++;
dino.y -= 4;
}

if(점프중 == false && dino.y<300){
dino.y += 4;
}

if(점프timer > 30){
점프중 = false;
점프timer = 0;
console.log('점프끝')
}

 
dino.draw()

}

frameWork()

document.addEventListener('keydown' , function(e){
if(e.code === 'Space'){
점프중 = true;
}
console.log(점프중)
})

[codingapple]

아마 화면밖으로 이동한 장애물들을 제거 안해줘서 그런듯요 

[글쓴이]

글