Возникли проблемы с работой моей html5 canvas pong на мобильном - PullRequest
Новая
       29

Возникли проблемы с работой моей html5 canvas pong на мобильном

0 голосов
/ 06 ноября 2019

В настоящее время я закончил разработку простой игры html5 pong, которая хорошо работает в веб-браузере. Однако при перемещении весла на ноутбуке вы должны нажимать клавиши со стрелками влево и вправо. Мне было интересно, как имитировать левую и правую клавиши со стрелками на мобильном телефоне, используя сенсорные события или, возможно, создание клавиатуры.

Я уже пытался сделать клавиатуру. Вот код, который пытается симулировать правую и левую клавиши со стрелками при нажатии соответствующих кнопок. К сожалению, это не похоже на работу.

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", onKeyEvent, false);
document.addEventListener("keyup", onKeyEvent, false);

Фрагмент кода 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. Что-то, что я изучал, но с трудом реализую.

Я ищу любую помощь в реализации дружественной для мобильных устройств версии игры понг, и я открыт для любого другого решения для реализации этого. Спасибо.

...