如何使用JavaScript更改和移動圖像

這是我在這裏的第一篇文章......嗯，我需要的是使用鍵盤上的4個按鍵在屏幕上移動圖像並更改每個按鍵的圖像，例如：
--W--
ASD
當我按下「d」鍵，我的對象應該移動到右邊，當我按下「A」鍵，我的對象應我的形象應該是「facingright」
移動到左側，我的圖像應該是「facingleft」，所以它走...

如何使用JavaScript更改和移動圖像

****編輯：這是我的項目後，你的幫助！謝謝!!!：http://xonny.esy.es/Xonnygame/index.html

我有這個代碼在這裏，但它似乎是不可能做這樣的事情我想要的，所以我需要修改它！

<html> 
<head> 

<title>Moving an Image</title> 

<script language="JavaScript"> 

function moveObj(name, Xpix, Ypix) 
{ 
    obj = document.getElementById(name); 

    px = parseInt(obj.style.left) + Xpix; 
    py = parseInt(obj.style.top) + Ypix; 
    obj.style.left = px; 
    obj.style.top = py; 
} 

function ProcessKeypress(e) 
{ 
    var myObj = "mario"; 
    var moveBy = 10; 

    if (e.keyCode) keycode=e.keyCode; 
    else keycode=e.which; 
    ch=String.fromCharCode(keycode); 

    if(ch=='a' || ch=='A')  moveObj(myObj, -moveBy, 0); 
    else if(ch=='d' || ch=='D')  moveObj(myObj, moveBy, 0); 
    else if(ch=='w' || ch=='W')  moveObj(myObj, 0, -moveBy); 
    else if(ch=='s' || ch=='S')  moveObj(myObj, 0, moveBy); 
} 

</script> 

<body onKeyPress="ProcessKeypress(event);"> 

<p><img id="mario" style="z-index: 0; left: 300px; position: absolute; top: 250px" 
    height=72 width=100 align=baseline border=0 hspace=0 src="mario right.jpg"></p> 

</body> 
</html>

來源

2014-09-30 Jonathan Smith

我建議在突出顯示整個代碼塊後單擊代碼按鈕;反引號僅用於在線代碼。像這樣：'一些代碼在這裏，等等。 – Daedalus 2014-09-30 00:52:13

那麼它在做什麼或者不在做什麼？你有錯誤嗎？請提供有關您遇到的問題的更多信息。 – 2014-09-30 01:31:40

這將是你的最終代碼。在身體，你補充一點：

<body onkeydown="keydown(event)" onkeyup="keyup(event)">

而且JS會是這樣的

var movUp=false, movDown=false, movLeft=false, movRight=false; 

function moveMario() 
{ 
    obj = document.getElementById("mario"); 
    px = parseInt(obj.style.left); 
    py = parseInt(obj.style.top); 
    var moveby=5; 

    if(movUp) py=py-moveby; 
    if(movDown) py=py+moveby; 
    if(movLeft) px=px-moveby; 
    if(movRight) px=px+moveby; 

    if(movUp&&!movLeft&&!movRight&&!movDown) obj.src='mario_up.png'; 
    if(!movUp&&movLeft&&!movRight&&!movDown) obj.src='mario_left.png'; 
    if(!movUp&&!movLeft&&movRight&&!movDown) obj.src='mario_right.png'; 
    if(!movUp&&!movLeft&&!movRight&&movDown) obj.src='mario_down.png'; 

    if(movUp&&movLeft) obj.src='mario_up_left.png'; 
    if(movDown&&movLeft) obj.src='mario_down_left.png'; 
    if(movUp&&movRight) obj.src='mario_up_right.png'; 
    if(movDown&&movRight) obj.src='mario_down_right.png'; 

    if(!movUp&&!movLeft&&!movRight&&!movDown) obj.src='mario.png'; 


    obj.style.left = px; 
    obj.style.top = py; 
} 

function keydown(e){ 
    ch=String.fromCharCode(e.keyCode).toLowerCase(); // toLowerCase() so we don't have to check for 'a' and 'A'; 
    moveby=5; 
    if(ch=="a") movLeft=true; 
    if(ch=="s") movDown=true; 
    if(ch=="d") movRight=true; 
    if(ch=="w") movUp=true; 
} 

function keyup(e){ 
    ch=String.fromCharCode(e.keyCode).toLowerCase(); 
    moveby=5; 
    if(ch=="a") movLeft=false; 
    if(ch=="s") movDown=false; 
    if(ch=="d") movRight=false; 
    if(ch=="w") movUp=false; 
} 

setInterval("moveMario()",30);

方向鍵被按下每一次，我們這個方向設置爲true。每調用30毫秒，函數moveMario（）就會被調用，並且它會將圖像移動到設置爲true的方向，並將圖像更改爲這些方向。

順便說一下，在你的html代碼中，你永遠不會關閉head標籤。小心一點。

來源

2014-09-30 13:04:59

感謝您的幫助！我無法工作，請檢查我的代碼！ https://gist.github.com/anonymous/7111ab3b64243e3d62d3 – 2014-10-01 21:59:32

我沒有看到身體內的任何東西。你忘了把你的馬里奧圖像放在那裏。此外，您的腳本代碼無處可用。你應該把它放在標題上或至少放在身上。 – 2014-10-01 22:10:04

現在按預期工作！：）非常感謝！現在我需要用一些想象力來製作遊戲，需要兩個物體相互碰撞的幫助，或者從我的「yoshi」拍攝一個彈丸，這裏是現在的樣子... https://gist.github.com /匿名/ 68c597c181578b66df92 – 2014-10-02 01:54:11

您應該創建兩個Mario圖像，一個面向右對另一個向左，並在它們之間切換;

if(ch=='d' || ch=='D'){ 
    moveObj(myObj, moveBy, 0); 
    document.getElementById(myObj).src="mariofacingright.png"; 
}

等左邊。另外，如果你想讓動畫順利進行，你應該使用keydown和keyup來代替。 Keydown應該創建一個間隔，每個X都會移動圖像，並且keyup將刪除間隔。這樣你的動畫就會平滑，你可以同時移動它並離開。

來源

2014-09-30 00:59:30

多數民衆贊成它！我有所有的圖像......每一個（左，右，前，後和默認）默認情況下，當他不移動..我只是不知道如何切換他們...你知道任何例子一個keydown/keyup？現在就試試你剛告訴我的東西，看看它是否有效！ TY！ – 2014-09-30 01:45:35

樣品（點擊圖片首先，要確保你在正確的畫布前，按任意鍵）： http://jsfiddle.net/leojavier/f8kp6auc/

<img id="item" style="width:100px; height:100px; cursor:pointer; position:relative; left:10px; top:20px;" src="http://www.adobe.com/business/calculator/VIP/image/loader.gif" alt=""> 
<script> 
(function(){ 

     item = document.getElementById("item"); 

     function move(x){ 
      var currentPositionX = parseInt(item.style.left); 
      var currentPositionY = parseInt(item.style.top); 
      console.log(currentPositionY); 
      switch(x){ 
        case "left": 
        item.style.left = currentPositionX - 15 + "px"; 
        break; 
        case "right": 
        item.style.left = currentPositionX + 15 + "px"; 
        break; 
        case "up": 
        item.style.top = currentPositionY - 15 + "px"; 
        break; 
        case "down": 
        item.style.top = currentPositionY + 15 + "px"; 
        break; 
      } 

     } 


     window.addEventListener("keydown", key, false); 
     function key(e){ 
      switch(e.keyCode){ 
       case 65: 
       //LEFT 
       move('left'); 
       break; 
       case 68: 
       //RIGHT 
       move('right'); 
       break; 
       case 87: 
       //UP 
       move('up'); 
       break; 
       case 83: 
       //DOWN 
       move('down'); 
       break; 
      } 
     } 
    })(); 
</script>

來源

2014-09-30 01:18:18

如何使用JavaScript更改和移動圖像

回答

相關問題