[英]Collision Detection 2D Game
我正在關注Mozilla 2D游戲教程。 這既不是我的原始代碼也不是我的原始想法。 下方鏈接。
我一直沉迷於游戲的一個特定方面:球與磚塊的碰撞檢測。 在我調用collisionDetection()函數之前,該程序一切正常。
這是函數:
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;
}
}
}
}
在調用此功能之后,球飛過了畫布,游戲機制也完美發揮了作用。 但是,將此調用添加到我的代碼后,球在開始時保持靜止不動,完全沒有運動。
顯然,collisionDetection()函數存在問題,但對我來說一切都正確!
我還搜索了“球到牆”和“球到球拍”碰撞檢測“ if語句”的問題,但一切似乎都是正確的。
整個代碼如下。
<!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>
有人可以幫我指出我的代碼中的錯誤,或者或者crashDetection()函數不能與游戲機制的另一段代碼一起使用嗎? 即球運動或槳運動。
我還附上了該游戲當前不起作用的狀態的照片。
謝謝
在您的代碼中,變量x
和y
未定義。 我想你的意思是xCircle
和yCircle
。 您的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;
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.