使我的html5 canvas pong游戏无法在手机上运行时遇到问题

我目前已经完成了一个简单的html5 pong游戏的开发,该游戏在Web浏览器上运行良好。但是,在移动桨叶时,在笔记本电脑上,您需要按左右箭头键。我想知道如何通过触摸事件或创建键盘来模拟手机上的左右箭头键。

我已经尝试过制作键盘。这是当按下相应按钮时试图模拟左右箭头键的代码。不幸的是,这似乎不起作用。

HTML5

<div id="keypad" style="display:block">
  <button id="rightClick" onclick="simulateKey(65)">Right</button>
  <button id="leftClick" onclick="simulateKey(68)">Left</button>
</div>

JS

function simulateKey (keyCode,type,modifiers) {
var evtName = (typeof(type) === "string") ? "key" + type : 
"keydown";  
var modifier = (typeof(modifiers) === "object") ? modifier : 
{};

var event = document.createEvent("HTMLEvents");
event.initEvent(evtName,true,false);
event.keyCode = keyCode;

for (var i in modifiers) {
    event[i] = modifiers[i];
}

document.dispatchEvent(event);
}


var onKeyEvent = function (event) {
var state = "pressed";

if (event.type !== "keypress") {
    state = event.type.replace("key","");
}

console.log("Key with keyCode " + event.keyCode + " is " + 
state);
};

document.addEventListener("keypress",onKeyEvent,false);
document.addEventListener("keydown",false);
document.addEventListener("keyup",false);

Pong游戏的JS代码段

var WIDTH = 500;
var HEIGHT = 350;
var PADDLEWIDTH = 50;
var LEFTARROW = 37;
var RIGHTARROW = 39;
var A = 65;
var D = 68;

Player.prototype.update = function (keysDown) {
var value;
for (var key in keysDown) {
    value = Number(key);
    if (value === LEFTARROW || value === A) {
        this.paddle.move(-4,0);
    }
    else if (value === RIGHTARROW || value === D) {
        this.paddle.move(4,0);
    }
    else {
        this.paddle.move(0,0);
    }
}
};

由于上述操作无法按计划进行,因此我尝试考虑另一种替代方法,即使用touchevents。我已经研究过但难以实施的东西。

我正在寻找实施乒乓球游戏的移动友好版本的任何帮助,并且愿意接受任何其他解决方案来实现此目的。谢谢。

hyowinner 回答:使我的html5 canvas pong游戏无法在手机上运行时遇到问题

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3154954.html

大家都在问