gpt4 book ai didi

javascript - 如何暂停 JavaScript 动画事件

转载 作者:行者123 更新时间:2023-12-03 08:39:00 27 4
gpt4 key购买 nike

我制作了一些类似 pacman 的形状,它们在 html5 Canvas 上进行动画处理,当单击页面上的按钮时,它们当前可以跟随鼠标(无论鼠标移动到哪里)。除了跟随光标之外,当按下每个相应的按钮时,对象还可以向四个方向(即左、右、上、下)移动。问题是,一旦单击“跟随”按钮,即使单击任何其他按钮,对象也会继续跟随光标。我需要一种方法来拥有另一个按钮,可以单击该按钮来中断“关注”事件。如果这是不可能的,使用 setInterval 函数调用来设置后续事件的时间限制可能会起作用,但我不确定如何实现。实现此功能的最佳方法是什么?“跟随”动画的代码如下:

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
$("#follow").click(function () {
canvas.addEventListener('mousemove', function (evt) {
//WokkaWokkas is the array of the pacman objects
var mousePos = getMousePos(canvas, evt);
WokkaWokkas[0].posX = mousePos.x - 50;
WokkaWokkas[0].posY = mousePos.y - 50;
WokkaWokkas[1].posX = WokkaWokkas[0].posX - 100;
WokkaWokkas[1].posY = WokkaWokkas[0].posY - 100;

}, false);
});

编辑 - 第二个解决方案的相关代码:

 $("#follow").click(function () {
//not sure if this is the syntax for using (canvas).on
(canvas).on('mousemove', function (evt) {
var mousePos = getMousePos(canvas, evt);
WokkaWokkas[0].posX = mousePos.x - 50;
WokkaWokkas[0].posY = mousePos.y - 50;
WokkaWokkas[1].posX = WokkaWokkas[0].posX - 100;
WokkaWokkas[1].posY = WokkaWokkas[0].posY - 100;
}, false);
});
animationLoop();

$("#up").click(function () {
$(canvas).off('mousemove');
WokkaWokkas[0].direction = up;
});
$("#down").click(function () {
$(canvas).off('mousemove');
WokkaWokkas[0].direction = down;
});
$("#left").click(function () {
$(canvas).off('mousemove');
WokkaWokkas[0].direction = left;
});
$("#right").click(function () {
$(canvas).off('mousemove');
WokkaWokkas[0].direction = right;
});
$("#unfollow").click(function () {
$(canvas).off('mousemove');
WokkaWokkas[0].posX = 25;
WokkaWokkas[0].posY = 25;
});

最佳答案

你能不能在按下另一个按钮时就删除事件监听器?

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}

function followMouse(evt) {
//WokkaWokkas is the array of the pacman objects
var mousePos = getMousePos(canvas, evt);
WokkaWokkas[0].posX = mousePos.x - 50;
WokkaWokkas[0].posY = mousePos.y - 50;
WokkaWokkas[1].posX = WokkaWokkas[0].posX - 100;
WokkaWokkas[1].posY = WokkaWokkas[0].posY - 100;
}

$("#follow").click(function () {
canvas.addEventListener('mousemove', followMouse, false);
});

$("#otherBtn").click(function() {
canvas.removeEventListener('mousemove', followMouse);
});

顺便说一句,如果您已经在使用 jQuery,为什么不也使用他们的事件系统呢?

$(canvas).on('mousemove', function(e) {});
$(canvas).off('mousemove');

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

更新这是因为removeEventListener只删除一个监听器,所以你需要引用该函数

关于javascript - 如何暂停 JavaScript 动画事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33111438/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com