javascript - Javascript Falling Rocks 游戏中的碰撞检测

Question

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

我似乎被困在碰撞检测部分。我试图使用每个对象的坐标作为碰撞的标准，但到目前为止我没有做任何事情。如果有人可以检查我做错了什么，我将非常感激。

玩家方 block 的图像大小为 x=30px，y=15px，而下落物体的大小为 15 x 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();

Answer 1

这是您的起点...

制作一些石头:

// 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 :

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

}

这是一个演示:http://jsfiddle.net/m1erickson/76dx7/