Javascript Falling Rocks의 충돌 감지 게임

Question

그래서 나는 대학 프로젝트를 위해 떨어지는 바위 게임의 Javascript 버전을 사용하기로되어 있습니다. 플레이어는 떨어지는 물체에 닿지 ​​않고 왼쪽에서 오른쪽으로 움직이기로되어있는 사각형을 제어합니다. 각 측면에 도달하면 점수가 증가하고 치는 경우 점수가 감소합니다. 게임 오버가 0 점입니다.

충돌 감지 부분에 붙어있는 것 같습니다. 나는 각 객체의 좌표를 충돌의 기준으로 사용하려고 노력하고 있지만, 지금까지 아무 것도하지 않았습니다. 누군가 내가 뭘 잘못하고 있는지 확인할 수 있다면 정말 고맙겠습니다.

플레이어 블록의 이미지 크기는 x = 30px, y = 15px이며 낙하물은 15x15 픽셀입니다. 지금까지

전체 코드 :

// rock variables 
var rockWidth=15; 
var rockHeight=15; 
var totalRocks = 10; 
var rocks=[]; 
for(var i=0;i<totalRocks;i++){ 
    addRock(); 
} 

function addRock(){ 
    var rock={ 
     width:rockWidth, 
     height:rockHeight 
    } 
    resetRock(rock); 
    rocks.push(rock); 
} 

// move the rock to a random position near the top-of-canvas 
// assign the rock a random speed 
function resetRock(rock){ 
    rock.x=Math.random()*(canvas.width-rockWidth); 
    rock.y=15+Math.random()*30; 
    rock.speed=0.2+Math.random()*0.5; 
} 

이 블록을 확인하십시오 : 여기

//canvas setup 
var canvas = document.createElement("canvas"); 
canvas.style.background = "white"; 
canvas.style.height = "95%"; 
canvas.style.width = "99%"; 
document.body.appendChild(canvas); 
canvas.style.border="1px solid black"; 
var ctx = canvas.getContext("2d"); 

// block image 
var blockImg = new Image(); 
var t; 
var block= 
    { 
     blockSpeed : 0 
    } 
block.x=0; 
blockImg.style.height=15; 
blockImg.style.width=30; 
blockImg.src = "squareche.jpg"; 
//draw block 
blockImg.onload = function() 
    { 
    ctx.drawImage(blockImg, block.x,canvas.height-15); 
    } 
function drawBlockProgress(pos) 
{ 
    ctx.drawImage(blockImg, block.x, canvas.height-15); 
} 
//Background image 
var bckg = new Image(); 
bckg.src = "background.png"; 
function drawBackground() 
{ 
     ctx.drawImage(bckg, 0, 0); 
} 
//score 
function drawScore() 
{ 
    ctx.font = "14px Times New Roman"; 
    ctx.fillText("Score: " + score, 230, 25); 
} 

//score, position, and a bool flag for getting points on reaching either end 
var score=50; 
var pos = 0; 
var flag = true; 

//left and right keypush event handlers 
document.onkeydown = function(event){ 
    if(event.keyCode==39) 
    { 
     pos+=10; 
     block.x=block.blockSpeed+pos; 
     if(pos>=270) 
     { 
      if(flag) 
      { 
       flag=!flag; 
       score+=10; 
      } 
     pos=270; 
     block.x=270; 

     drawBlockProgress(pos); 

     } 
     else 
     { 
      drawBlockProgress(pos);  
     } 
    } 
    else if(event.keyCode == 37) 
    { 
     pos-=10; 
     block.x=block.blockSpeed+pos; 
     if(pos<=0) 
     { 
      if(!flag) 
      { 
       flag=!flag; 
       score+=10; 
      } 
      pos=0; 
      block.x=0; 
      drawBlockProgress(pos); 
     } 
     else{ 
      drawBlockProgress(pos); 
     } 
    } 
} 
//set up the falling rocks 
var imgRocks; 
var x=0; 
var y= 0; 
var totalRocks = 10; 
var rocks=[]; 
var speed = 0.2; 

//generate the falling objects 
function draw() 
{ 
for(var i=0;i<totalRocks;i++) 
    { 
     drawBackground(); 
     drawBlockProgress(pos); 
     drawScore(); 
     ctx.drawImage(rocks[i].image, rocks[i].x, rocks[i].y); 
     rocks[i].y+=rocks[i].speed; 
     if(rocks[i].y > canvas.height-15) 
     { 
      rocks[i].y=-17; 
      rocks[i].x=Math.floor(Math.random()*300 + 1); 
     } 
    //collision check 
     if(block.x <= (rocks[i].x + 15) 
     && rocks[i].x <= (block.x + 30) 
     && block.y <= (rocks[i].y + 15) 
     && rocks[i].y <= (block.y + 15)) 
     { 
      // rocks[i].y=-15; 
      // rocks[i].x=Math.floor(Math.random()*300 + 1); 
      score -=10; 
      // if(score == 0) 
      // { 
       // break; 
       // clearInterval(t); 
       // alert("Game Over Dude !"); 
       // window.close(); 
      // } 
     } 
    } 
} 
function start() 
{ 
    for (var i = 0; i < totalRocks; i++) { 
     var fallingRock = new Object(); 
     fallingRock["image"] = new Image(); 
     rocksImg = new Image(); 
     rocksImg.src = "rocks.jpg"; 
     fallingRock.image.src = rocksImg.src; 
     fallingRock["x"] = Math.floor(Math.random() * 200 + 1); 
     fallingRock["y"] = Math.floor(Math.random() * 100 + 1); 
     fallingRock["speed"] = speed; 
     rocks.push(fallingRock); 
     t = setInterval(draw,10); 
    } 
} 
start();