碰撞检测2D游戏

Question

I am following a Mozilla 2D game tutorial. 我正在关注Mozilla 2D游戏教程。 This is not my original code nor my original idea. 这既不是我的原始代码也不是我的原始想法。 Link below. 下方链接。

Mozilla Game Mozilla游戏

I have gotten stuck on a particular aspect of the game: collision detection of the ball with the bricks. 我一直沉迷于游戏的一个特定方面：球与砖块的碰撞检测。 Everything worked fine with the program until I called the collisionDetection() function. 在我调用collisionDetection（）函数之前，该程序一切正常。

Here is the function: 这是函数：

function collisionDetection() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                dy = -dy;
            }
        }
    }
}

Below calling this function, the ball flew around the canvas and the game mechanics worked perfectly. 在调用此功能之后，球飞过了画布，游戏机制也完美发挥了作用。 However, upon adding this call to my code, the ball stayed motionless at its starting point with no movement at all. 但是，将此调用添加到我的代码后，球在开始时保持静止不动，完全没有运动。

Obviously there is a problem with the collisionDetection() function but it all looks correct to me! 显然，collisionDetection（）函数存在问题，但对我来说一切都正确！

I also searched for a problem with the ball-to-wall and ball-to-paddle collision detection 'if statements' but everything seemed correct. 我还搜索了“球到墙”和“球到球拍”碰撞检测“ if语句”的问题，但一切似乎都是正确的。

The entire code is below. 整个代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"> </canvas>

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

// Circle variables
var radiusCircle = 10;
var xCircle = canvas.width/2;
var yCircle = canvas.height - radiusCircle;
var dx = 2;
var dy = -2;

// Keyboard movement variables
var keyLeft = false;
var keyRight = false;

// Paddle variables
var paddleHeight = 10;
var paddleWidth = 75;
var xPaddle = (canvas.width - paddleWidth)/2;

// Brick variables
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

var bricks = [];
for(c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0 };
    }
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        keyRight = true;
    }
    else if(e.keyCode == 37) {
        keyLeft = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        keyRight = false;
    }
    else if(e.keyCode == 37) {
        keyLeft = false;
    }
}

function collisionDetection() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                dy = -dy;
            }
        }
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(xCircle, yCircle, radiusCircle, 0, Math.PI * 2, false);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath;
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(xPaddle, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath();
}

function drawBricks() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = "green";
            ctx.fill();
            ctx.closePath();
        }
    }
}

// Renders game
var draw = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
collisionDetection();

// Collision detection for ball and paddle and game over mechanic
if (xCircle + dx > canvas.width - radiusCircle || xCircle < radiusCircle) {
    dx = -dx;
    }

if (yCircle + dy < radiusCircle) {
    dy = -dy;
    }

else if (yCircle + dy > canvas.height - radiusCircle) {


    if (xCircle > xPaddle && xCircle < xPaddle + paddleWidth) {
        if (yCircle = yCircle - paddleHeight) {
            dy = -dy;
            }
        }   
    else {
    alert("GAME OVER!");
    document.location.reload();
    }
}

// Paddle movement mechanics
if (keyRight && xPaddle < canvas.width - paddleWidth) {
    xPaddle += 5;
    }
else if (keyLeft && xPaddle > 0) {
    xPaddle += -5;
    }

// Makes the ball move
xCircle += dx;
yCircle += dy;
}

setInterval(draw, 10);

</script>

</body>
</html>

Can someone please help me by pointing out an error in my code or or how the collisionDetection() function isn't working with another piece of code for the game mechanics? 有人可以帮我指出我的代码中的错误，或者或者crashDetection（）函数不能与游戏机制的另一段代码一起使用吗？ ie the ball movement or paddle movement. 即球运动或桨运动。

I have also attached a photo of the game in its current, nonfunctional, state. 我还附上了该游戏当前不起作用的状态的照片。

Thank you 谢谢

Photo of game 游戏照片

Answer 1

In your code variables x and y does not defined. 在您的代码中，变量x和y未定义。 I suppose you mean xCircle and yCircle . 我想你的意思是xCircle和yCircle 。 Your collisionDetection function must looks like this: 您的collisionDetection函数必须如下所示：

function collisionDetection() {
    for (c=0; c<brickColumnCount; c++) {
        for (r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if (xCircle > b.x && xCircle < b.x+brickWidth && yCircle > b.y && yCircle < b.y+brickHeight) {
                dy = -dy;
            }
        }
    }
}

碰撞检测2D游戏

问题描述

1 个解决方案

解决方案1
0 2015-10-30 05:32:02

碰撞检测2D游戏

问题描述

1 个解决方案

解决方案1 0 2015-10-30 05:32:02

解决方案1
0 2015-10-30 05:32:02