Question

亲爱的，如果它可以帮助我使用下面的代码，我试图用javascript做一个简单的PacMan运动，我需要PacMan从左到右和从右到左移动，就像我从从左到右，但我试图从右向左移动它没有运气，所以如果它可以从上到下替换从右到左的运动它将是完美的，请你的建议我可以做什么或添加，我还有4张PacMan的图像，有两个不同的方向和两个嘴巴动作我怎么能用它来运动呢？

 <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>

Answer 1

你可以使用一个状态，它会重复移动的实际状态并使用一个反映外观，步数，边界和下一个状态的对象。

如果不存在最小值或最大值，则表示未给出。如果存在一个值，则进入检查状态，并执行逐步递增/递减或选择下一个状态。

图像反映了方向。

＆＃13;

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";
}

＆＃13;

<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>

＆＃13;

JavaScript水平移动

1 个答案: