javascript - 碰撞适用于顶部,但不适用于底部
问题描述
我的游戏测试环境中有一个矩形,我试图让它与它发生碰撞。由于我编写了正确的代码,因此碰撞适用于顶部。但是,我很难让它与矩形的底部发生碰撞。
我已经尝试过更改 x 和 y 并将它们换掉。我也尝试过更改比较功能。我想做的是完全切换它们,但我认为这也行不通。
var canvas = document.getElementById("gametester");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
rectWidth = 100;
rectHeight = 50;
var redX = canvasWidth / 2 - rectWidth / 2;
var redY = canvasHeight / 2 - rectHeight / 2;
var redDx = 0;
var redDy = 0;
var speed = 2;
rectWidth = 100;
rectHeight = 50;
var blueX = canvasWidth / 2 - rectWidth / 2;
var blueY = canvasHeight / 2 - rectHeight / 2;
var blueDx = 0;
var blueDy = 0;
var speed = 2;
var rectTwoColour = "blue";
var dx = 0;
var dy = 0;
var speed = 2;
function rectangle(x, y, w, h, c) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.fillStyle = c;
ctx.fill();
ctx.closePath();
}
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
} else if (e.keyCode == 37) {
leftPressed = true;
} else if (e.keyCode == 38) {
upPressed = true;
} else if (e.keyCode == 40) {
downPressed = true;
}
}
function keyUpHandler(e) {
if (e.keyCode == 39) {
rightPressed = false;
} else if (e.keyCode == 37) {
leftPressed = false;
} else if (e.keyCode == 38) {
upPressed = false;
} else if (e.keyCode == 40) {
downPressed = false;
}
}
function collision(){
var collide = false;
if (blueY>=redY && blueY <= redY + rectHeight){
if (redX + rectWidth >= blueX && redX + rectWidth <= blueX + rectWidth){
collide = true;
blueX = Math.floor(Math.random() * (canvasWidth - rectWidth));
blueY = Math.floor(Math.random() * (canvasHeight - rectWidth));
}
if (redX>=blueX && redX <= blueX + rectWidth){
collide = true;
blueX = Math.floor(Math.random() * (canvasWidth - rectWidth));
blueY = Math.floor(Math.random() * (canvasHeight - rectWidth));
}
}
return collide
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
rectangle(redX, redY, rectWidth, rectHeight, 'red')
rectangle(blueX, blueY, rectWidth, rectHeight, rectTwoColour)
if (rightPressed==true) {
redDx = speed;
} else if (leftPressed==true) {
redDx = -speed;
} else if (upPressed==true) {
redDy = -speed;
} else if (downPressed==true) {
redDy = speed
}
if (rightPressed==false && leftPressed==false && upPressed==false && downPressed == false){
redDx = 0;
redDy = 0;
}
redX = redX + redDx;
redY = redY + redDy;
if (redX > canvasWidth - rectWidth){
redX = canvasWidth - rectWidth;
}
if (redY > canvasHeight - rectHeight){
redY = canvasHeight - rectHeight;
}
if (redY<0){
redY = 0
}
if (redX<0){
redX = 0
}
collided = collision();
if (collided == true){
rectTwoColour = "purple";
} else {
rectTwoColour = "blue";
}
}
setInterval(draw, 14);
canvas {
border-width: 6.2px;
border-color: #FF0000;
}
<canvas id="gametester" width="560" height="300"></canvas>
解决方案
你的矩形碰撞检测不正确应该如下
function collision() {
var collide = false;
if (blueX < redX + rectWidth &&
blueX + rectWidth > redX &&
blueY < redY + rectHeight &&
blueY + rectHeight > redY) {
// collision detected!
collide = true;
blueX = Math.floor(Math.random() * (canvasWidth - rectWidth));
blueY = Math.floor(Math.random() * (canvasHeight - rectWidth));
}
return collide
}
请参见2D 矩形碰撞检测
var canvas = document.getElementById("gametester");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
rectWidth = 100;
rectHeight = 50;
var redX = canvasWidth / 2 - rectWidth / 2;
var redY = canvasHeight / 2 - rectHeight / 2;
var redDx = 0;
var redDy = 0;
var speed = 2;
rectWidth = 100;
rectHeight = 50;
var blueX = canvasWidth / 2 - rectWidth / 2;
var blueY = canvasHeight / 2 - rectHeight / 2;
var blueDx = 0;
var blueDy = 0;
var speed = 2;
var rectTwoColour = "blue";
var dx = 0;
var dy = 0;
var speed = 2;
function rectangle(x, y, w, h, c) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.fillStyle = c;
ctx.fill();
ctx.closePath();
}
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
} else if (e.keyCode == 37) {
leftPressed = true;
} else if (e.keyCode == 38) {
upPressed = true;
} else if (e.keyCode == 40) {
downPressed = true;
}
}
function keyUpHandler(e) {
if (e.keyCode == 39) {
rightPressed = false;
} else if (e.keyCode == 37) {
leftPressed = false;
} else if (e.keyCode == 38) {
upPressed = false;
} else if (e.keyCode == 40) {
downPressed = false;
}
}
function collision() {
var collide = false;
if (blueX < redX + rectWidth &&
blueX + rectWidth > redX &&
blueY < redY + rectHeight &&
blueY + rectHeight > redY) {
// collision detected!
collide = true;
blueX = Math.floor(Math.random() * (canvasWidth - rectWidth));
blueY = Math.floor(Math.random() * (canvasHeight - rectWidth));
}
return collide
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
rectangle(redX, redY, rectWidth, rectHeight, 'red')
rectangle(blueX, blueY, rectWidth, rectHeight, rectTwoColour)
if (rightPressed == true) {
redDx = speed;
} else if (leftPressed == true) {
redDx = -speed;
} else if (upPressed == true) {
redDy = -speed;
} else if (downPressed == true) {
redDy = speed
}
if (rightPressed == false && leftPressed == false && upPressed == false && downPressed == false) {
redDx = 0;
redDy = 0;
}
redX = redX + redDx;
redY = redY + redDy;
if (redX > canvasWidth - rectWidth) {
redX = canvasWidth - rectWidth;
}
if (redY > canvasHeight - rectHeight) {
redY = canvasHeight - rectHeight;
}
if (redY < 0) {
redY = 0
}
if (redX < 0) {
redX = 0
}
collided = collision();
if (collided == true) {
rectTwoColour = "purple";
} else {
rectTwoColour = "blue";
}
}
setInterval(draw, 14);
canvas {
border-width: 6.2px;
border-color: #FF0000;
}
<canvas id="gametester" width="560" height="300"></canvas>
希望这可以帮助!
推荐阅读
- javascript - 什么是构造函数的实例化?
- sql - UNNEST 和加入 | 大查询
- c# - 从控制台应用程序使用 OpenGL/Vulkan 后端的 SkiaSharp 绘图
- javascript - Jquery Keyup 过滤器和输入值问题
- python - 如何使用python idle将required.txt中提到的所有python包下载到linux中的文件夹中?
- angular - Ionic 5:如何从另一个页面获取输入值?
- javascript - 如何使用 JSON 通过 websockets 发送 Django 数据?
- postman - 如何使用 webhook 查看响应?
- postgresql - 无法与 postgres 主 docker 容器连接
- django - Django:来自静态文件夹的图像不加载