javascript - 如何防止块离开画布宽度和高度?
问题描述
我对编程很陌生。我一直在处理这段代码,但未能成功地为这个块添加关于画布宽度和高度的碰撞检测。但是,碰撞检测确实适用于画布的上部和左侧。为了防止块离开画布宽度和长度,我需要做些什么不同的事情?
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const keys = [];
const player = new Image();
player.src = "https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w102-h68-n-l50-sg-rj";
const background = new Image();
background.src = "https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj";
function drawSprite(img, sX, sY, sW, sH, dX, dY, dW, dH){
ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH);
}
var xPos = 0;
var yPos = 0;
function movement(e){
if (e.keyCode == 37 && !xPos <=0){
xPos -= 6;
}
else if (e.keyCode == 37 && xPos <=0){
xPos -= xPos;
}
else if (e.keyCode == 38 && !yPos <= 0){
yPos -= 6;
}
else if (e.keyCode == 38 && yPos <= 0){
yPos -= yPos;
}
else if (e.keyCode == 39 && !xPos <= canvas.width){
xPos += 6;
}
else if (e.keyCode == 39 && xPos <= canvas.width){
xPos -= 100;
}
else if (e.keyCode == 40){
yPos += 6;
}
}
document.onkeydown = movement;
function animate(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
drawSprite(player, 0, 0, 30, 52, xPos, yPos, 30, 52);
requestAnimationFrame(animate);
}
animate();
<canvas id="canvas"></canvas>
解决方案
对于右侧和底部碰撞,您需要从画布的宽度/高度中减去块的宽度/高度。
如果 x 或 y 位置大于最大数量,则将其设置为最大数量
哦,您不必在更改 x/y 位置之前检查所有这些,您可以在之后检查它们
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const keys = []; const player = new Image(); player.src = "https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h200-n-l50-sg-rj"; const background = new Image(); background.src = "https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj"; function drawSprite(img, sX, sY, sW, sH, dX, dY, dW, dH){ ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH); } var xPos = 0; var yPos = 0; var playerWidth = 30; var playerHeight = 52 const step = 6; function movement(e){ if (e.keyCode == 37){ xPos -= step; } else if (e.keyCode == 38){ yPos -= step; } else if (e.keyCode == 39){ xPos += step; } else if (e.keyCode == 40){ yPos += step; } if (xPos < 0) xPos = 0; if (xPos > canvas.width - playerWidth) xPos = canvas.width - playerWidth; if (yPos < 0) yPos = 0; if (yPos > canvas.height - playerHeight) yPos = canvas.height - playerHeight; } document.onkeydown = movement; function animate(){ ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(background, 0, 0, canvas.width, canvas.height); drawSprite(player, 0, 0, player.width, player.height, xPos, yPos, playerWidth, playerHeight); requestAnimationFrame(animate); } animate();
<canvas id="canvas"></canvas>
推荐阅读
- database - 选择查询具有相同类型值的多个列
- php - 如何从混合字符串中仅获得年份?(php)
- apache-spark - 失败的火花执行器是否值得关注?
- macos - ImportError:无法导入名称 py31compat
- java - 为什么我的游戏没有改变玩家回合?
- netsuite - SS2.0:调试 Map/Reduce
- json - Angular/Typescript 为了使用 json webservice,我需要创建所有返回的类?
- android - 是否可以通过 espresso 测试来模拟通话?
- r - 在 R 中的另一个变量中查找条件第一次出现之前的观察次数
- c++ - OpenGL 如何知道将哪个图像单元附加到制服上?