使用箭頭鍵在js div內移動圖像

我是JS的新手，所以如果有一些簡單的答案，我會提前道歉！我已經通過線程和谷歌一小時所以，我沒有找到任何東西:(使用箭頭鍵在js div內移動圖像

我想要做一個超級馬里奧式的遊戲，我將字符左右移動。我已經嘗試過這樣做（創建一個基於方向鍵移動的方塊）。正方形很容易，因爲您可以獲得它的x和y位置。但是，我已經切換到使用圖像，並且我不知道如何使其向左或向右移動

這是我的html文件：

<body> 
    <div id = "char"> 
     <canvas id="myCanvas" width="400" height="400"></canvas> 
     <script src="testing.js"></script> 
    </div> 
</body>

而這就是我想在JS做：

var img = new Image(), 
    pic = document.getElementById("char"), 
    switchVar=true; 
pic.appendChild(img); 
img.src = "2.png"; 
function move(e) { 
    "use strict"; 
    var x = e.which || e.keycode; //gets the keycode that the user types 

    switch(x) { 
     case 39: 
      //What do I do here?? 
      //the following doesn't work: 
      //pic.style.left = parseInt(pic.style.left) + 100 + 'px'; 
      break; 
    } 
} 
document.onkeydown = move;

我沒有在交換機中包含所有的情況，但是我的代碼有左，下和上的情況。另外，我在JS中追加圖像的原因是因爲我試圖在從左到右運行時切換圖像（從右腿伸展的人的img切換到左腿伸展的人的圖像）

來源

2017-01-03 byteme

您的圖片必須

position: absolute;

由於左，上，右，下只適用於絕對位置。

pic.appendChild(img); 
img.src = "2.png"; 
img.style.position = 'absolute';

而且，如果您希望與div #char相關的圖片移動div必須具有相對位置。

#char{position:relative;}

來源

2017-01-03 20:57:44

使用箭頭鍵在js div內移動圖像

回答

相關問題