javascript - 使用 EaselJS 获取触摸设备上的 "mouse"位置

Question

我正在使用 <canvas> 创建街机风格的 HTML5 游戏标签与 EaselJS 库，今天我在尝试对其实现触摸支持时发现了一个问题。有人可以帮助我吗？

我已经成功实现了用户触摸英雄时的跳跃 Action ，但现在我想添加两件事:如果用户触摸屏幕左侧，英雄将向左走，并向右走当用户触摸屏幕右侧时。另外，我正在考虑当用户也用两根手指触摸屏幕时实现跳跃，但我不知道这是否可能，如果不可能，那么我需要其他方法来实现行走时的跳跃。

我认为问题解决方案非常简单，但搜索它并没有帮助，我找到了非常复杂的答案，我的目标是尽可能保持代码简单性。提前致谢。

相关代码如下:

        var x = 0, y = 0;
        document.addEventListener("mousemove", function(e){
            x = e.pageX,
            y = e.pageY;
        });
        document.addEventListener("mousedown", function(e){
            if (!key.holdingUp) { // Checks if event was fired again before "mouseup"
                if(x > hero.x+hero.width+hero.offset){
                    key.right = true;
                }
                if(x < hero.x-hero.offset){
                    key.left = true;
                }
                if(x > hero.x-hero.offset && x < hero.x+hero.width+hero.offset){
                    key.up = true;
                }
            }else{
                key.up = true;
            }
        });
        document.addEventListener("mouseup", function(){
            setTimeout(function(){
                key.up = false;
                key.right = false;
                key.left = false;
                key.holdingUp = false;
            },1000/60); // Wait for one tick loop
        });

JSFiddle (相关代码从160行开始)

Answer 1

这是工作 fiddle :http://jsfiddle.net/4ABMN/4/

我已经在 Android 版 Firefox 上对其进行了测试。我遵循了这个指南:http://www.createjs.com/tutorials/Mouse%20Interaction/

本质上，您需要使用框架事件而不是直接的 DOM:

stage.on("stagemousedown", function(evt) {
    alert("the canvas was clicked at "+evt.stageX+","+evt.stageY);
})

编辑:

我忘记说了，你需要添加这一行:

createjs.Touch.enable(stage);