JavaScript水平運動

-1

如果可能幫助我使用下面的代碼，我正嘗試使用javascript創建一個簡單的PacMan動作，我需要PacMan從左到右和從右到左移動，就像我做的那樣從左到右的移動，但我試圖從右到左移動它沒有運氣，所以如果它可能從上到下取代運動從右到左這將是完美的，請你的意見，我可以做什麼或添加，我也有4個圖像的PacMan與兩個不同的方向和兩個嘴巴的動作我怎麼能應用它的運動？JavaScript水平運動

<html> 
<head> 
<title>PacMan</title> 
<script language='JavaScript' type='text/JavaScript'> 
<!-- 
function reset1(){ 
clearTimeout(my_time); 
document.getElementById('PacMan').style.left= "500px"; 
document.getElementById('PacMan').style.top= "100px"; 
document.getElementById("msg").innerHTML=""; 

} 



function move_img(str) { 

var x=document.getElementById('PacMan').offsetTop; 
x= x +100; 
document.getElementById('PacMan').style.top= x + "px"; 

} 

function disp(){ 
var step=1; // Change this step value 
//alert("Hello"); 
var y=document.getElementById('PacMan').offsetTop; 
var x=document.getElementById('PacMan').offsetLeft; 
if(y < 600){y= y +step; 
document.getElementById('PacMan').style.top= y + "px"; // vertical movment 
}else{ 
if(x < 800){x= x +step; 
document.getElementById('PacMan').style.left= x + "px"; // horizontalmovment 
} 
} 


} 

function timer(){ 
disp(); 
var y=document.getElementById('PacMan').offsetTop; 
var x=document.getElementById('PacMan').offsetLeft; 
document.getElementById("msg").innerHTML="X: " + x + " Y : " + y 
my_time=setTimeout('timer()',10); 
} 


    //--> 
</script> 
</head> 
<body > 
<img src=PacMan1.png id='PacMan' style="position:absolute; left: 500; top:  100;"> 
<br><br><br><br> 
<input type=button onClick=timer() value='Start'> 
<input type=button onClick=reset1() value='Reset'> 
<div id='msg'></div> 

    </body> 
    </html>

來源

2017-03-06 user3341616

您可以使用一種狀態，它反映了運動的實際狀態並使用反映外觀，步驟，邊界和下一個狀態的對象。

如果最小值或最大值不存在，那麼它的工作原理與未給出的一樣。如果存在一個值，那麼它將進入檢查狀態，並執行逐步增加/減少或選擇下一個狀態。

圖像反映方向。

var states = { 
 
     left: { 
 
      min: { x: 0 }, 
 
      step: { x: -1 }, 
 
      img: img('https://dummyimage.com/32/fff/000&text=←'), 
 
      nextState: 'down' 
 
     }, 
 
     down: { 
 
      max: { y: 180 }, 
 
      step: { y: 1 }, 
 
      img: img('https://dummyimage.com/32/fff/000&text=↓'), 
 
      nextState: 'right' 
 
     }, 
 
     right: { 
 
      max: { x: 600 }, 
 
      step: { x: 1 }, 
 
      img: img('https://dummyimage.com/32/fff/000&text=→'), 
 
      nextState: 'up' 
 

 
     }, 
 
     up: { 
 
      min: { y: 0 }, 
 
      step: { y: -1 }, 
 
      img: img('https://dummyimage.com/32/fff/000&text=↑'), 
 
      nextState: 'left' 
 
     }, 
 
    }, 
 
    state = 'down', 
 
    interval; 
 

 
function img(src) { 
 
    var image = new Image; 
 
    image.src = src; 
 
    return image; 
 
} 
 

 
function move() { 
 
    var image = document.getElementById('PacMan'), 
 
     x = image.offsetLeft, 
 
     y = image.offsetTop; 
 

 
    if (
 
     (!states[state].min || !('x' in states[state].min) || x > states[state].min.x) && 
 
     (!states[state].max || !('x' in states[state].max) || x < states[state].max.x) && 
 
     (!states[state].min || !('y' in states[state].min) || y > states[state].min.y) && 
 
     (!states[state].max || !('y' in states[state].max) || y < states[state].max.y) 
 
    ) { 
 
     x += (states[state].step.x || 0); 
 
     y += (states[state].step.y || 0); 
 
     image.style.left = x + "px"; 
 
     image.style.top = y + "px"; 
 
    } else { 
 
     state = states[state].nextState; 
 
     image.src = states[state].img.src; 
 
     document.getElementById('msg').innerHTML = state; 
 
    } 
 
} 
 

 
function timer() { 
 
    document.getElementById('msg').innerHTML = state; 
 
    document.getElementById('PacMan').src = states[state].img.src; 
 
    move(); 
 
    interval = setInterval(move, 10); 
 
} 
 

 
function reset() { 
 
    var image = document.getElementById('PacMan'); 
 
    clearInterval(interval); 
 
    state = 'down'; 
 
    image.src = states[state].img.src; 
 
    image.style.left = 0 + "px"; 
 
    image.style.top = 0 + "px"; 
 
}

<img src="PacMan1.png" id="PacMan" style="position:absolute; left: 0px; top: 0px;"> 
 
<br><br><br><br> 
 
<input type="button" onClick="timer()" value="Start"> 
 
<input type="button" onClick="reset()" value="Reset"> 
 
<div id="msg"></div>

來源

2017-03-06 09:53:20

謝謝你這麼多它幫助了我很多！ – user3341616

JavaScript水平運動

回答

相關問題