检测画布边框上的碰撞 [英] Detecting collision on canvas border
问题描述
我和我的朋友一起做一个小游戏，但我试图检测碰撞时，在画布的墙壁碰撞，我做它的工作，但当我撞到墙上我的caracter被卡住了..我不dont知道如何找到一种方式让他再次移动。你认为你们中的任何人都可以帮助我这个。非常感谢您的帮助！
Javascript / jQuery：
（）{
this.w = 50;
this.h = 60;
this.x =（cW / 2） - （this.w / 2）;
this.y =（cH / 2） - （this.h / 2）;
this.name = username.value;
this.nw = ctx.measureText（this.name）.width; // username.clientWidth + 1;
this.src = playerImage;
this.dx = 0;
this.dy = 0;
this.render = function（）{
ctx.drawImage（this.src，this.x，this.y，this.w，this.h）;
ctx.fillStyle ='orange';
ctx.font ='15px Arial，sans-serif';
// fixa x-värdet
ctx.fillText（this.name，（this.x + this.w / 2） - （this.nw / 2），（this.y - 6）） ;
}
}
var player = new Player（）;
function animate（）{
if（player.x> 0&& player.y> 0&& player.x + player.w< cW& ;& player.y + player.h< cH）{
player.x + = spd * player.dx;
player.y + = spd * player.dy;
}
else {
//需要代码从这里释放玩家
}
ctx.save（）;
ctx.clearRect（0，0，cW，cH）;
ctx.drawImage（bg，0，0）;
player.render（）;
ctx.rotate（ - 。4）;
raining（）;
ctx.restore（）;
}
var animateInterval = setInterval（animate，1000/60）;
document.addEventListener（'keydown'，function（e）{
var key_press = String.fromCharCode（e.keyCode）;
switch
case'W'：
player.dy = -1;
break;
case'A'：
player.dx = -1;
break;
case'S'：
player.dy = 1;
break;
case'D'：
player.dx = 1;
break;
默认值：
break;
}
}）;
document.addEventListener（'keyup'，function（e）{
var key_press = String.fromCharCode（e.keyCode）;
switch
case'W'：
player.dy = 0;
break;
case'A'：
player.dx = 0;
break;
case'S'：
player.dy = 0;
break;
case'D'：
player.dx = 0;
break;
默认值：
break;
}
}）;
您遇到的问题如下： p>
假设您的字符以每帧10像素的速度移动，字符位置当前为595像素（字符的右边），画布宽度为600。 p>
在当前帧，你检查是否有碰撞：没有，所以你把速度加到当前位置，你得到605px。现在在下一个框架的字符是超出边界，你不能移动他了，因为player.x + player.width> canvas.width
你可以做什么：
1：检查碰撞并将字符移回视口内：
if（player.x + player.width> canvas.width）{
player.x = canvas.width - player.width;
}
因为碰撞检查现在失败，你可以将他移动到任何你想要的地方。 / p>
您应该对所有边执行此检查，但每边的逻辑不同，这是与左边墙碰撞的示例代码：
if（player.x< 0）{
player.x = 0;
}
2：在if语句中，应该在计算中添加速度，而不是如果player.x + player.vx超过canvas.width，则移动字符，但我更喜欢第一个方法，因为您实际上可以在视口的侧边。
提示使用画布位置：始终在渲染级舍入您的位置：
this.render = function（）{
ctx.drawImage（this.src，Math.round（this.x），Math.round（this.y），this.w，this.h）;
...
}
I am making a little game with my friends but i am trying to detect the collision when bumping in the the walls of the canvas, and I made it work but when i hit the wall my caracter gets stuck.. and i dont know how to find out a way to make him move again. Do you think any of you guys could help me out with this one. Thanks for all help!
Javascript / jQuery:
function Player() {
this.w = 50;
this.h = 60;
this.x = (cW / 2) - (this.w / 2);
this.y = (cH / 2) - (this.h / 2);
this.name = username.value;
this.nw = ctx.measureText(this.name).width; // username.clientWidth + 1;
this.src = playerImage;
this.dx = 0;
this.dy = 0;
this.render = function() {
ctx.drawImage(this.src, this.x, this.y, this.w, this.h);
ctx.fillStyle = 'orange';
ctx.font = '15px Arial, sans-serif';
// fixa x-värdet
ctx.fillText(this.name, (this.x + this.w / 2) - (this.nw / 2), (this.y - 6));
}
}
var player = new Player();
function animate() {
if(player.x > 0 && player.y > 0 && player.x + player.w < cW && player.y + player.h < cH) {
player.x += spd * player.dx;
player.y += spd * player.dy;
}
else {
// Need code here to release player from wall
}
ctx.save();
ctx.clearRect(0, 0, cW, cH);
ctx.drawImage(bg, 0, 0);
player.render();
ctx.rotate(-.4);
raining();
ctx.restore();
}
var animateInterval = setInterval(animate, 1000/60);
document.addEventListener('keydown', function(e) {
var key_press = String.fromCharCode(e.keyCode);
switch(key_press) {
case 'W':
player.dy = -1;
break;
case 'A':
player.dx = -1;
break;
case 'S':
player.dy = 1;
break;
case 'D':
player.dx = 1;
break;
default:
break;
}
});
document.addEventListener('keyup', function(e) {
var key_press = String.fromCharCode(e.keyCode);
switch(key_press) {
case 'W':
player.dy = 0;
break;
case 'A':
player.dx = 0;
break;
case 'S':
player.dy = 0;
break;
case 'D':
player.dx = 0;
break;
default:
break;
}
});
The problem you are having is the following:
Suppose your character is moving at the speed of 10 pixels per frame, the character position is currently 595px (the right side of the character) and the canvas width is 600.
On the current frame you are checking if there is a collision: there's none so you add the speed to the current position and you get 605px. Now on the next frame the character is out the bounds and you cannot move him anymore because the player.x + player.width > canvas.width
What you can do:
1: You check for the collision and move the character back inside the viewport:
if (player.x + player.width > canvas.width) {
player.x = canvas.width - player.width;
}
Because the collision check fails now, you can move him wherever you want.
You should do this check for all the sides, but the logic is different for each side, this is sample code for collision with the left wall:
if (player.x < 0) {
player.x = 0;
}
2: In your if statement you should add the speed in your calculations and not move the character if the player.x + player.vx exceeds canvas.width, but I prefer the first method as you can actually be at the side of the viewport
Tip with working with canvas positions: always round off your positions at the render level:
this.render = function() {
ctx.drawImage(this.src, Math.round(this.x), Math.round(this.y), this.w, this.h);
...
}
这篇关于检测画布边框上的碰撞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
