我正在尝试使用HTML5 Canvas和Javascript创建一个游戏,我无法弄清楚如何(正确地)使用鼠标单击画布后对角移动角色。我确实设法让角色对角移动,但是我无法设置速度,这样无论距离如何,它都会以相同的速度移动......你点击的距离越远,它移动得越快,你点击的越近,它移动得越慢。无论你点击哪里,我都希望速度相同。
以下是我目前的情况:http://pastebin.com/hUJBiQHq
如何在画布上对角移动角色?
答案 0 :(得分:3)
我实际上已经做了很多改变。我试着去看看每一个。
我做的第一件事就是删除了很多setTimout
次来电。你不需要单独的一个用于移动和渲染。我还停止检查游戏是否在实际加载后加载。现在一旦游戏加载,它将开始渲染。
您还需要在超时时间内发生onclick
事件。我把它搬到了外面。更好的方法和未来阅读的主题将使用addEventListener
explained nicely here
我在顶部添加的另一件事是requestAnimationFrame
的垫片,如果您注意到它是否在不支持的浏览器上运行,那么在setTimeout
上使用它会好得多动画帧它将在超时时回退。 There are many benefits to using it explained here
现在讨论手头的问题!
var tx = newX - posX,
ty = newY - posY,
tx
和ty
是目标x,目标是y。它们是从玩家坐标中减去的鼠标。然后,您可以使用它们来执行这样的距离检查,
dist = Math.sqrt(tx * tx + ty * ty);
接下来我检查距离是否大于速度,如果是,我们需要靠近我们的位置。
if (dist >= speed) {
下一部分计算所需的速度。我们取目标x和目标y,并将它们除以距离,这将使用我们需要行进的像素数量来实现目标。然后我们将这个数乘以速度,这使得我们每个刻度移动距离。然后你将这些速度添加到玩家位置以移动玩家(需要更好的解释......在解释任何数学概念时非常糟糕:?)
velX = (tx / dist) * speed;
velY = (ty / dist) * speed;
posX += velX;
posY += velY;
<强> Live Demo of it all working 强>
完整代码
(function () {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
canvas.width = canvas.height = 500;
var gameReady = true;
var players = [];
var posX = 350;
var posY = 200;
var newX = 350;
var newY = 200;
// new vars needed for movement
var velX = 0;
var velY = 0;
var speed = 5;
function movePlayer() {
var tx = newX - posX,
ty = newY - posY,
dist = Math.sqrt(tx * tx + ty * ty);
if (dist >= speed) {
velX = (tx / dist) * speed;
velY = (ty / dist) * speed;
posX += velX;
posY += velY;
}
}
function isGameReady() {
if (gameReady) {
drawCanvas();
} else {
setTimeout(isGameReady, 100);
}
}
canvas.onmousedown = function (e) {
newX = e.offsetX; // -33;
newY = e.offsetY; // - 55.25;
}
function drawCanvas() {
movePlayer();
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(posX, posY, 10, 10);
requestAnimationFrame(drawCanvas);
}
isGameReady();
答案 1 :(得分:0)
您应该从原点到目的地点进行距离测量,然后根据该距离计算出移动的持续时间。
距离测量:
function lineDistance( point1, point2 )
{
var xs = 0;
var ys = 0;
xs = point2.x - point1.x;
xs = xs * xs;
ys = point2.y - point1.y;
ys = ys * ys;
return Math.sqrt( xs + ys );
}
动画的时间是结果*速度。尝试使用speed
值,直到获得所需内容。