Javascript Falling Rocks游戲中的碰撞檢測

Question

因此，我應該為大學項目制作Java版的《落石游戲》。 播放器控制一個矩形，該矩形應該從左向右移動而不會被掉落的物體擊中。 到達每一側都會增加得分，而被擊中則會降低得分。 比賽結束於0分。

我似乎停留在碰撞檢測部分。 我試圖將每個對象的坐標用作碰撞的標准，但是到目前為止，我什么都沒做。 如果有人可以檢查一下我在做什么，我將非常感激。

播放器塊的圖像大小為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 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/