html5java游戏_触摸控制html5游戏

我一直在研究一个简单的html5画布游戏,我正在尝试为设备添加触摸控件以及桌面键盘输入等 . 键盘控制非常完美:空格键可以跳跃,并保持更长时间跳 . 我已经添加了用于触摸控制的事件监听器,它模拟了空格键的单击,但是我无法弄清楚如何使用触摸控件重新创建空格键以获得更长的跳跃 . 我的键盘代码如下所示:

// jump if not currently jumping or falling

if (KEY_STATUS.space && player.dy === 0 && !player.isJumping) {

player.isJumping = true;

assetLoader.sounds.jump.play();

player.dy = player.jumpDy;

jumpCounter = 12;

}

// jump higher if the space bar is continually pressed

if (KEY_STATUS.space && jumpCounter) {

player.dy = player.jumpDy;

assetLoader.sounds.jump.play();

}

jumpCounter = Math.max(jumpCounter-1, 0);

this.advance();

并使用此代码跟踪:

var KEY_CODES = {

32: 'space'

};

var KEY_STATUS = {};

for (var code in KEY_CODES) {

if (KEY_CODES.hasOwnProperty(code)) {

KEY_STATUS[KEY_CODES[code]] = false;

}

}

document.onkeydown = function(e) {

var keyCode = (e.keyCode) ? e.keyCode : e.charCode;

if (KEY_CODES[keyCode]) {

e.preventDefault();

KEY_STATUS[KEY_CODES[keyCode]] = true;

}

};

document.onkeyup = function(e) {

var keyCode = (e.keyCode) ? e.keyCode : e.charCode;

if (KEY_CODES[keyCode]) {

e.preventDefault();

KEY_STATUS[KEY_CODES[keyCode]] = false;

}

};

我的触摸屏设备新事件监听器如下所示:

document.addEventListener("touchstart", touchHandler);

document.addEventListener("touchhold", touchHandler);

document.addEventListener("touchend", touchHandler);

然后我有这个功能,它或多或少与键盘输入功能相同,只引用'e.touches',而不是'KEY_STATUS':

function touchHandler(e) {

if(e.touches && player.dy === 0 && !player.isJumping) {

player.isJumping = true;

assetLoader.sounds.jump.play();

player.dy = player.jumpDy;

jumpCounter = 12;

e.preventDefault();

}

}

该功能可实现小跳跃 . 如果我包含这个'if'语句,它会启用多次跳转:

if (e.touches && jumpCounter) {

player.dy = player.jumpDy;

assetLoader.sounds.jump.play();

}

...而不是让玩家执行更长的跳跃 . 从本质上讲,玩家可以在整个游戏中轻拍,我不想要!有没有办法在'touchHandler()'函数中指定正在进行哪种跳转,即 . 屏幕被点击或保持?或者我需要为此编写一个单独的函数?提前致谢 .

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值