Javascript落石游戏中的碰撞检测

所以我要为一个大学项目做一个Javascript版本的落石游戏。 玩家控制一个长方形，该长方形应该从左向右移动，而不会被落下的物体击中。到达每一方都会增加分数，而被击中则会降低分数。比赛以0分结束

我似乎被碰撞检测部分卡住了。我试图使用每个对象的坐标作为碰撞的标准，但到目前为止我所得到的并没有任何作用。如果有人能看看我做错了什么，我会非常感激

播放器块的图像大小为x=30px，y=15px，而下落物体的大小为15×15像素

到目前为止的完整代码：

//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();

//画布设置
var canvas=document.createElement（“canvas”）；
canvas.style.background=“白色”；
canvas.style.height=“95%”；
canvas.style.width=“99%”；
document.body.appendChild（画布）；
canvas.style.border=“1px纯黑”；
var ctx=canvas.getContext（“2d”）；
//块图像
var blockImg=新图像（）；
变量t；
变量块=
{
块速度：0
}
块x=0；
砌块高度=15；
块样式宽度=30；
blockImg.src=“squareche.jpg”；
//绘图块
blockImg.onload=函数（）
{
ctx.drawImage（blockImg，block.x，canvas.height-15）；
}
功能进度（pos）
{
ctx.drawImage（blockImg，block.x，canvas.height-15）；
}   
//背景图像
var bckg=新图像（）；
bckg.src=“background.png”；
功能缺陷背景（）
{  
ctx.drawImage（bckg，0,0）；
}
//得分
函数drawScore（）
{
ctx.font=“14px时代新罗马”；
ctx.fillText（“分数：”+分数，230,25）；
}
//得分、位置和到达两端时得分的bool标志
var得分=50；
var-pos=0；
var标志=真；
//左键推送和右键推送事件处理程序
document.onkeydown=函数（事件）{
if（event.keyCode==39）
{
pos+=10；
block.x=block.blockSpeed+pos；
如果（位置>=270）
{
国际单项体育联合会（旗）
{
flag=！flag；
分数+=10分；
}
pos=270；
块x=270；
提款进度（pos）；
}
其他的
{
提款进度（pos）；
}
}
else if（event.keyCode==37）
{
pos-=10；
block.x=block.blockSpeed+pos；
如果（pos这是你的起点

制作一些岩石：

// 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;
}

// block variables
var blockWidth=30;
var blockHeight=15;
var blockSpeed=10;
var block={
    x:0,
    y:canvas.height-blockHeight,
    width:blockWidth,
    height:blockHeight,
    blockSpeed:blockSpeed  
}

function animate(){

    // request another animation frame

    if(continueAnimating){
        requestAnimationFrame(animate);
    }

    // for each rock
    // (1) check for collisions
    // (2) advance the rock
    // (3) if the rock falls below the canvas, reset that rock

    // redraw everything

}

制作动画循环：

// 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;
}

// block variables
var blockWidth=30;
var blockHeight=15;
var blockSpeed=10;
var block={
    x:0,
    y:canvas.height-blockHeight,
    width:blockWidth,
    height:blockHeight,
    blockSpeed:blockSpeed  
}

function animate(){

    // request another animation frame

    if(continueAnimating){
        requestAnimationFrame(animate);
    }

    // for each rock
    // (1) check for collisions
    // (2) advance the rock
    // (3) if the rock falls below the canvas, reset that rock

    // redraw everything

}

下面是一个演示：

如果您发送了正确的信息，那么您的碰撞检测代码是很好的。不过，您的代码的其余部分有很多问题（对不起）。哦，那么，欢迎您提供任何开始提示？