碰撞检测Javascript答案

【问题标题】：Collision Detection Javascript碰撞检测Javascript
【发布时间】：2016-01-24 17:17:49
【问题描述】：

我正在制作一个类似乒乓球的游戏，您可以控制两个桨以保持球在墙壁上弹跳。
在我进行碰撞检测之前，一切都很顺利。

我只有在桨距墙壁没有空间时才能工作，但为了更好看，我想在它们和画布边框之间保持 20px 的距离。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title> Pong Game </title>
    <style>
        * { padding: 0; margin: 10; }
        canvas { background:#94ADEE ; display: block; margin: 0 auto; }
    </style>
</head>
<body>
<canvas id="mainCanvas" width="800" height="600" />


<script>
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");

/* paddle */
var paddleHeight = 100;
var paddleWidth  = 10;
var paddleY      = (canvas.height-paddleHeight)/2;

/* paddle movement */

var upPressed    = false;
var downPressed  = false;

/* ball */

var ballRadius = 15;
var xBall = canvas.width/2;
var yBall = canvas.height/2;

/* ball movement */

var dxBall = 3.5;
var dyBall = 3.5;


var score  = 0;

function drawBall (){
    ctx.beginPath();
    ctx.arc(xBall,yBall, ballRadius, 0,Math.PI*2);
    ctx.fillStyle = "#2c3347";
    ctx.fill();
    ctx.closePath();

}




function drawPaddleOne(){

    ctx.beginPath();
    ctx.rect(0, paddleY,paddleWidth,paddleHeight);
    ctx.fillStyle = "#2c3347"
    ctx.fill();
    ctx.closePath();

}

function drawPaddleTwo(){

    ctx.beginPath();
    ctx.rect(canvas.width-10,paddleY,paddleWidth,paddleHeight);
    ctx.fillStyle = "#2c3347";
    ctx.fill();
    ctx.closePath();
}


function draw(){
    ctx.clearRect(0,0, canvas.width, canvas.height);
    drawPaddleOne();
    drawPaddleTwo();
    drawBall();
    xBall += dxBall;
    yBall += dyBall;

    ctx.font = "20px Cursive";
    ctx.textAlign = "center";
    ctx.fillText("Score: " + score, canvas.width/2,canvas.height-550);



    if(xBall + dxBall > canvas.width || xBall + dxBall < ballRadius){
        if(yBall > paddleY && yBall < paddleY + paddleHeight){
            dxBall = -dxBall;
            score++;

            if(dxBall < 0 ){
                dxBall = dxBall - 0.5;
            } 
            else {
                dxBall = dxBall + 0.5;
            }

            if(dyBall < 0 ){
                dyBall = dyBall - 0.5;
            } 
            else {
                dyBall = dyBall + 0.5;
            }


        }
        else{
        alert("GAME OVER! "); 
        document.location.reload();
        }
    }

    if(yBall + dyBall > canvas.height || yBall + dyBall < ballRadius){
        dyBall = -dyBall;
    }

    if(upPressed && paddleY > 0){
        paddleY = paddleY - 5;
    }
    if(downPressed && paddleY < canvas.height-paddleHeight){
        paddleY = paddleY + 5;
    }

}

document.addEventListener("keydown", keyDownHandlerOne, false);
document.addEventListener("keyup", keyUpHandlerOne, false);

function keyDownHandlerOne (x){
    if(x.keyCode == 38){
        upPressed = true;
    }
    else if(x.keyCode == 40){
        downPressed = true;
    }
}

function keyUpHandlerOne (x){
    if(x.keyCode == 38){
        upPressed = false;
    }
    else if(x.keyCode == 40){
        downPressed = false;
    }
}


setInterval(draw, 10);

</script>

</body>
</html>

由于桨叶位于固定的 x 轴位置，我尝试在 canvas.width 的帮助下检查碰撞。 xBall < canvas.width-10 && xBall > canvas.width-30 之类的东西（右桨的示例）。这是一种可行的方法吗？

【问题讨论】：

标签： javascript canvas collision

【解决方案1】：

jsFiddle：https://jsfiddle.net/14cbyr5n/

我创建了一个简单的数学类，可用于检查点或矩形是否与矩形（矩形）碰撞。

这是数学课

// Maths
function Mathematics()
{

}

Mathematics.prototype.PointInRect = function(pnt_x, pnt_y, rect_x, rect_y, rect_w, rect_h)
{
    if ( (pnt_x >= rect_x) && (pnt_x <= rect_x + rect_w - 1) )
    {
        if ( (pnt_y >= rect_y) && (pnt_y <= rect_y + rect_h - 1) )
        {return true;}
    }
    return false;
}

Mathematics.prototype.RectToRectCollision = function(rect1_x, rect1_y, rect1_w, rect1_h,
                             rect2_x, rect2_y, rect2_w, rect2_h)
{
    // top-left corner
    if ( this.PointInRect(rect1_x, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
    // top-right corner
    if ( this.PointInRect(rect1_x + rect1_w - 1, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
    // bottom-right corner
    if ( this.PointInRect(rect1_x + rect1_w - 1, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
    // bottom-left corner
    if ( this.PointInRect(rect1_x, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
    // Check to see if rectangle 2 is hit any part of rectanlge 1
    // top-left corner
    if ( this.PointInRect(rect2_x, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
    // top-right corner
    if ( this.PointInRect(rect2_x + rect2_w - 1, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
    // bottom-right corner
    if ( this.PointInRect(rect2_x + rect2_w - 1, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
    // bottom-left corner
    if ( this.PointInRect(rect2_x, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
    // If there is no collision
    return false;
}

var mathematics = new Mathematics();

这是最后在你的绘图函数中使用的代码

// Check if ball has hit a paddle
    if(mathematics.RectToRectCollision(
    paddleX, paddleY, paddleWidth,paddleHeight,
    xBall, yBall, ballRadius, ballRadius))
    {
        dxBall = dxBall * -1;
    }

老实说，您应该创建一个名为collisionChecking 之类的新函数，应该在任何动作之前调用它。但是我提供的代码应该可以帮助你

【讨论】：