我有一個俄羅斯方塊游戲,當鍵盤上的箭頭鍵被按下時被控制,但我想把這些責任放在 4 個 HTML 按鈕上。這是到目前為止作業的代碼:
```document.body.onkeydown = function( e ) {
var keys = {
37: 'left',
39: 'right',
40: 'down',
38: 'rotate',
32: 'drop'
};
if ( typeof keys[ e.keyCode ] != 'undefined' ) {
keyPress( keys[ e.keyCode ] );
render();
}
};```
**這里是keyPress函式,它根據按下的鍵碼來處理物件的移動和方向。render() 函式是繪制游戲物件的函式:**
switch ( key ) {
case "left":
if ( valid( -1 ) ) {
--currentX;
xPush.play();
}
break;
case 'right':
if ( valid( 1 ) ) {
currentX;
xPush.play();
}
break;
case 'down':
if ( valid( 0, 1 ) ) {
currentY;
xPush.play();
}
break;
case 'rotate':
var rotated = rotate( current );
if ( valid( 0, 0, rotated ) ) {
current = rotated;
}
break;
case 'drop':
while( valid(0, 1) ) {
currentY;
}
tick();
break;
}
}
請我想添加 4 個 HTML 按鈕來進行控制,而不是鍵盤鍵/鍵代碼。謝謝你們
uj5u.com熱心網友回復:
var buttons = document.querySelectorAll(".action");
buttons.forEach(function(button) {
button.addEventListener('mousedown', function(e) {
keypress(button.getAttribute("data-action"));
// render();
})
})
function keypress(key) {
console.log ("key " key " was pressed");
}
uj5u.com熱心網友回復:
基本上你只需要替換onkeydown
你的功能。
var buttons = document.querySelectorAll(".action");
buttons.forEach(function(button) {
button.addEventListener('mousedown', function(e) {
keypress(button.getAttribute("data-action"));
// render();
})
})
function keypress(key) {
console.log ("key " key " was pressed");
}
<button class="action" data-action="left">left</button>
<button class="action" data-action="right">right</button>
<button class="action" data-action="down">down</button>
<button class="action" data-action="rotate">rotate</button>
<button class="action" data-action="drop">drop</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/504793.html
標籤:javascript html
上一篇:Postman中讀取外部檔案