首页 文章

JavaScript水平移动

提问于
浏览 次
-1

亲爱的，如果它可以帮助我使用下面的代码，我试图用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>
javascript

1 回答

  • 0

    你可以使用一个状态，它重复运动的实际状态并使用一个物体，它反映了外观，台阶，边界和下一个状态 .

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

    图像反映了方向 .

    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>
    回复于

相关问题