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);

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

1 个答案: