Javascript EaselJS-舞台鼠标悬停
我最近发现了EaselJS,我正在尝试制作一个非常简单的画布射击游戏 我的画布有500像素的宽度和500像素的高度 当用户的鼠标进入画布时,目标会随着鼠标移动,应该可以拍摄目标(位图) 这应该与我们在许多网站上看到的一些广告游戏非常相似——“使用鼠标和触摸X赢!”等等 然而,我一直在尝试做一些非常简单的事情——让目标精灵跟随用户的鼠标光标 如果我忘记或做错了一些非常琐碎的事情,我会提前道歉。以下是我的(Javascript)代码:Javascript EaselJS-舞台鼠标悬停,javascript,html,canvas,easeljs,2d-games,Javascript,Html,Canvas,Easeljs,2d Games,我最近发现了EaselJS,我正在尝试制作一个非常简单的画布射击游戏 我的画布有500像素的宽度和500像素的高度 当用户的鼠标进入画布时,目标会随着鼠标移动,应该可以拍摄目标(位图) 这应该与我们在许多网站上看到的一些广告游戏非常相似——“使用鼠标和触摸X赢!”等等 然而,我一直在尝试做一些非常简单的事情——让目标精灵跟随用户的鼠标光标 如果我忘记或做错了一些非常琐碎的事情,我会提前道歉。以下是我的(Javascript)代码: window.onload=函数() { init(); }
window.onload=函数()
{
init();
}
函数init()
{
var canvas=document.getElementById(“我的画布”);
var stage=newcreatejs.stage(画布);
//背景图片
var background_sky=new createjs.Bitmap(“sky.png”);
stage.addChild(背景为天空);
//目标精灵图片
var target_sprite=new createjs.Bitmap(“target.png”);
stage.addChild(目标精灵);
目标_sprite.x=150;
目标_sprite.y=150;
阶段.启用(20);
舞台上(“鼠标悬停”,功能(e)
{
target_sprite.x=e.stageX;
target_sprite.y=e.stageY;
stage.update();
});
stage.update();
}
如果我没有弄错的话,前面的代码应该使目标精灵在鼠标进入画布区域时移动到鼠标的坐标
但它不起作用
图片被绘制,鼠标悬停事件被触发,但目标精灵有时只是四处移动,并移动到意外的(随机?)位置
如果我将鼠标移动到目标精灵的位置,它将移动到左下角(递归)。我没有为目标精灵附加鼠标悬停处理程序-只为舞台
有可能像这样在舞台上附加鼠标悬停处理程序吗
我可能做错了什么 我认为你应该使用
stagemousemove
事件,而不是mouseover
就是这样!非常感谢。请注意,只有在特定DisplayObjects上需要滚动/滚动事件时,才应在舞台上启用MouseOver。运行起来相当昂贵,这就是为什么默认情况下不启用它的原因。
<script>
window.onload = function()
{
init();
}
function init()
{
var canvas = document.getElementById("my_canvas");
var stage = new createjs.Stage(canvas);
//background picture
var background_sky = new createjs.Bitmap("sky.png");
stage.addChild(background_sky);
//target sprite picture
var target_sprite = new createjs.Bitmap("target.png");
stage.addChild(target_sprite);
target_sprite.x = 150;
target_sprite.y = 150;
stage.enableMouseOver(20);
stage.on("mouseover", function(e)
{
target_sprite.x = e.stageX;
target_sprite.y = e.stageY;
stage.update();
});
stage.update();
}
</script>