使用HTML5 Canvas开发外部箭头键

时间:2013-07-16 20:24:55

标签: javascript ipad html5-canvas

我正在尝试使用html5,css和一点点jquery来开发游戏。

有时我已经通过Chrome和Firefox实现了游戏,但不是Safari。我的问题是,在我的实验中,在iPad2上游戏工作除了对象没有移动,所以我一直在寻找一种解决方案来开发某种外部键箭而不使用很多脚本,该对象假设只做跳,左并且对。我已经寻找了很多解决方案,我找不到一个好的渲染运动。我甚至试图创建一个能够顺利处理动作的JavaScript。

我正在寻找一种通过移动设备使用node.js或任何可以帮助我实现平滑跳跃的移动来处理移动的方法。

我已经找了很多资源,我想让控件对用户来说很简单。

Chrome和Firefox都可以正常运行,除了Safari特别是iPad 2或3中的那个......

以下是一些控件,这是我在

中的错误
var left, right;
    left = mie ? 1:0;
    right = 2;

    document.body.addEventListener('mousedown' , function (e) {
    console.log(e.button);
    if(key === left){
        dir = "left";
        player.isMovingLeft = true;
    } else if (key === right){
        dir = "right";
        player.isMovingRight = true;
    }

    if(key == 32) {
        if(firstRun === true)
            init();
        else
            reset();
    }
    };

    var left, right;
    left = mie ? 1:0;
    right = 2;

    document.body.addEventListener('mouseup' , function (e) {
        console.log(e.button);
        if(key === left){
            dir = "left";
            player.isMovingLeft = false;
        } else if (key === right) {
            dir = "right";
            player.isMovingRight = false;
        }
    };

//Accelerations produces when the user hold the keys
if (player.isMovingLeft === true) {
    player.x += player.vx;
    player.vx -= 0.15;
} else {
    player.x += player.vx;
    if (player.vx < 0) player.vx += 0.1;
}

if (player.isMovingRight === true) {
    player.x += player.vx;
    player.vx += 0.15;
} else {
    player.x += player.vx;
    if (player.vx > 0) player.vx -= 0.1;
}

// Speed limits!
if(player.vx > 8)
    player.vx = 8;
else if(player.vx < -8)
    player.vx = -8;

2 个答案:

答案 0 :(得分:1)

这可能是一个明显的答案,但您是否添加了触摸事件(不只是鼠标事件)?

如果没有,那就是问题所在。

查看Apples documentation示例。 它的要点是:

  

element.addEventListener(“touchstart”,touchStart,false);
  element.addEventListener(“touchmove”,touchMove,false);
  element.addEventListener(“touchend”,touchEnd,false);
  element.addEventListener(“touchcancel”,touchCancel,false);

我建议您使用HammerJS等库。它使添加事件和&amp;手势非常容易。

答案 1 :(得分:1)

您可能会发现这是支持触控和鼠标的解决方案:
hand.js

来自文章:

  

如何编写单个代码库来处理鼠标,   笔,触摸您的网站,将适用于所有现代浏览器?   这是一个polyfill,可以帮助您使用指针事件和提供   用户在您的网站上拥有独立于现代的绝佳体验   他们正在使用的浏览器。

DOWNLOAD HAND.JS FROM CODEPLEX