碰撞检测2D游戏
Collision Detection 2D Game
我正在学习Mozilla 2D游戏教程。这既不是我的原始代码,也不是我最初的想法。链接如下。
Mozilla游戏
我在游戏的一个特定方面陷入了困境:检测球和砖块的碰撞。在我调用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>
有人能帮我指出我的代码中的错误吗?或者collisionDetection()函数如何无法与游戏机制的另一段代码一起工作?即球运动或桨运动。
我还附上了一张游戏当前非功能状态的照片。
谢谢
游戏的照片
在代码中,未定义变量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;
}
}
}
}
相关文章:
- 2D Processingjs游戏中的冲突
- Immutable.js:表示2D游戏场的数据结构
- 基于JavaScript 2D瓷砖的游戏渲染(泰拉瑞亚风格)
- 用JavaScript,不平坦的地面和旋转编写2D游戏物理
- 康威'生活的游戏-如何伪造一个“;“无限”;2d平面
- 在2d画布JavaScript游戏中对角移动
- 构建一个2d html5画布游戏,并尝试用javascript连接到服务器以创建播放器"高芯&”;
- HTML画布游戏:2D碰撞检测
- 碰撞检测2D游戏
- 2D HTML画布游戏-停止玩家移动通过墙壁
- 游戏2D最佳HTML5/Javascript引擎
- 寻找引擎去开发带有贴图的2d或3d等角html5游戏
- 简单的2D游戏,使用鼠标
- Pure reactJS:游戏的生活规则显示错误,由于浮动:左网格建设不对应于2d数组
- 在Javascript中为国际象棋游戏创建一个2D对象数组和int对象数组
- 2D侧滚动HTML5游戏
- 2D格斗游戏AI,训练模仿玩家's的游戏风格
- Javascript子弹功能/弹丸,2D游戏
- 2D多人游戏实时通讯JavaScript
- HTML5 Canvas 2D游戏相机