使用 EaselJS 在触摸设备上获取“鼠标”位置

Question

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

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

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

以下是相关代码：

        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

这是工作小提琴：http://jsfiddle.net/4ABMN/4/

我已经在 Firefox for Android 上对其进行了测试。我遵循了这个指南：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);