我目前已经完成了一个简单的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。我已经研究过但难以实施的东西。
我正在寻找实施乒乓球游戏的移动友好版本的任何帮助,并且愿意接受任何其他解决方案来实现此目的。谢谢。