設備div屏幕重疊，我該如何解決？

Question

如何將鍵盤功能更改爲屏幕上的操縱桿？ 我正在構建一個html5遊戲，我完全失去了如何添加一個遊戲杆。

下面是需要一些幫助的代碼。非常感謝你提前:)

function init() { 
    canvas = document.getElementById('canvas'); 
    ctx = canvas.getContext('2d'); 
    enemy = new Image(); 
    enemy.src = '8bit_enemy.png'; 
    ship = new Image(); 
    ship.src = 'ship.png'; 
    starfield = new Image(); 
    starfield.src = 'starfield.jpg'; 
    document.addEventListener('keydown', keyDown, false); 
    document.addEventListener('keyup', keyUp, false); 
     canvas.addEventListener('click', gameStart, false); 
    gameLoop(); 
} 

function gameStart() { 
    gameStarted = true; 
    canvas.removeEventListener('click', gameStart, false); 
} 

//The main function of the game, it calls all the other functions needed to make the game run 
function gameLoop() { 
    clearCanvas(); 
    drawStarfield() 
    if (alive && gameStarted && lives > 0) { 
    hitTest(); 
    shipCollision(); 
    moveLaser(); 
    moveEnemies(); 
    drawEnemies(); 
    drawShip(); 
    drawLaser(); 
    } 
    scoreTotal(); 
    game = setTimeout(gameLoop, 1000/30); 
} 

//Checks to see which key has been pressed and either to move the ship or fire a laser 
function keyDown(e) { 
    if (e.keyCode == 39) rightKey = true; 
    else if (e.keyCode == 37) leftKey = true; 
    if (e.keyCode == 38) upKey = true; 
    else if (e.keyCode == 40) downKey = true; 
    if (e.keyCode == 88 && lasers.length <= laserTotal) lasers.push([ship_x + 25, ship_y - 20, 4, 20]); 
} 

//Checks to see if a pressed key has been released and stops the ships movement if it has 
function keyUp(e) { 
    if (e.keyCode == 39) rightKey = false; 
    else if (e.keyCode == 37) leftKey = false; 
    if (e.keyCode == 38) upKey = false; 
    else if (e.keyCode == 40) downKey = false; 
} 

window.onload = init; 

Answer 1

你需要的東西是這樣的：

function doKeyDown(e){ 

      //==================== 
      // THE W KEY 
      //==================== 
      if (e.keyCode == 87) { 
       clearCanvas(); 
       y = y - 10; 
       canvas_context.fillRect(x, y, 50, 30); 
      } 

      //==================== 
      // THE S KEY 
      //==================== 
      if (e.keyCode == 83) { 
       clearCanvas(); 
       y = y + 10; 
       canvas_context.fillRect(x, y, 50, 30); 
      } 

      //==================== 
      // THE A KEY 
      //==================== 
      if (e.keyCode == 65) { 
       clearCanvas(); 
       x = x - 10; 
       canvas_context.fillRect(x, y, 50, 30); 
      } 

      //==================== 
      // THE D KEY 
      //==================== 
      if (e.keyCode == 68) { 
       clearCanvas(); 
       x = x + 10; 
       canvas_context.fillRect(x, y, 50, 30); 
      } 

     } 

     function clearCanvas() { 
      canvas.width = canvas.width; 
     } 

的完整說明和代碼示例，可以發現here和演示是here