Chrome Dinosaur Game (2)

어제 공룡(dino)은 멈춰있고 여러 장애물(cactus)이 다가오는 상황까지 구현해보았습니다. 오늘은 스페이스바를 누르면 공룡이 점프를 하고 공룡과 장애물의 충돌 감지(Collision Detection) 부분을 구현해보았습니다. 이 부분이 어려울 것이라고 예상했었는데 각 객체의 위치만 관리하면 가능했었던 것이어서 생각외로 빠르게 이해할 수 있었습니다. 이제 기본적인 기능 구현은 마쳤으니 생각나는 아이디어가 생길 때마다 기존에 만들었던 게임에 조금씩 추가해보려구요! 또한 지금까지 배운 Java Script 만으로도 구현할 수 있는 것들이 무궁무진하다는 생각이 들었습니다. 이번 경험을 살려서 다음 게임 프로젝트도 목업대로 잘 구현할 수 있었으면 좋겠습니다🙏😊

 

오늘 배웠던 내용들은 코드 안에 주석처리 했습니다!

 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

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



var img2 = new Image();
img2.src = 'dinosaur.png'; // make an object to place a downloaded image
var dino = {
  x: 10,
  y: 200,
  width: 50,
  height: 50,
  draw() {
    ctx.drawImage(img2, this.x, this.y, this.width+10, this.height+10);
  }
} 



var img1 = new Image();
img1.src = 'cactus.png';
class Cactus {
  constructor() {
    this.x = 800;
    this.y = 200;
    this.width = 50;
    this.height = 50;
  }
  draw() {
    ctx.drawImage(img1,this.x,this.y, this.width, this.height);
  }
}


var timer = 0;
var cacti;
var animation;
var jumping = false;
var jumpTimer = 0;



function perFrame() {
  animation = requestAnimationFrame(perFrame);
  timer++;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  if(timer % 60 === 0) { // a new cactus is created every 60 frames
    var cactus = new Cactus();
    cacti.push(cactus);
  }
  
  cacti.forEach((a,idx,o) => { // o is the Array 'Cacti'
  	if (a.x < 0) {
      o.splice(idx,1); // a cactus disappears after its x-value is smaller than 0
    }
    a.x -= 8;
    collisionDetection(dino, a);
    a.draw();
  })
  
  if(jumping === true) { // dino goes to the top when jumping is true
    dino.y -= 5; 
    jumpTimer += 3;
  }
  
  if(jumping === false) {
    if(dino.y < 200) {
      dino.y += 5;
    }
  }
  
  if (jumpTimer > 100) { // dino goes to the bottom when jumping is false
  	jumping = false;
  }
  
  if(dino.y === 200) {
    jumpTimer = 0;
  }
  
  dino.draw();
}



perFrame();



function collisionDetection(dino, cactus) {
  var xDifference = cactus.x - (dino.x + dino.width);  
  var yDifference = cactus.y - (dino.y + dino.height);
  if(xDifference < 0 && yDifference < 0) { 
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    cancelAnimationFrame(animation); 
    //This method cancels an animation request previously scheduled through a call to requestAnimationFrame
  }
}



var jumping = false;

document.addEventListener('keydown', function(e) {
  if(e.code === 'Space') {
    jumping = true;
  }
}) //When spacebar is pressed, the event listener is executed