js模仿人走路移动效果(51js)

最新推荐文章于 2021-01-03 17:32:59 发布

原创最新推荐文章于 2021-01-03 17:32:59 发布 · 3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Asp

JavaScript&CSS&DHTML

这篇博客通过JavaScript代码展示了如何创建一个人物行走的移动效果。通过监听鼠标点击和移动事件，确定目标位置，并使用数学计算调整角色朝向和步长，使角色沿直线向目标移动。同时，代码还包括了角色自动随机移动的实现。

<html>
<body>
<div id="debug"> </div>
<SPAN id=spn1 style="position:absolute;left=0;top=0;OVERFLOW: hidden; WIDTH: 32px; HEIGHT: 64px">
<IMG src="http://www.jiuyue.org/dreamland/rpg/unit/u_boy1.gif">
</SPAN>
<script>
//document.onmousemove=new Function("window.status=event.x+','+event.y;");
var target_posx=1,target_posy=1,theTimeout=0,theTimeout2=0;

document.onmousemove = view_pos;
function view_pos(){
window.status = event.x +","+event.y;
}

document.onclick = set_pos;
function set_pos(){

    target_posx = parseInt(event.x - 16);
    target_posy = parseInt(event.y - 64);

    clearTimeout(theTimeout);
    move();
}

function move(){
    var bc = 4;
    var a_bc = 0;
    var b_bc = 0;
    var a = 0;
    var b = 0;
    var c = 0;

    now_posx = parseInt((spn1.style.left).substr(0,(spn1.style.left).length-2));
    now_posy = parseInt((spn1.style.top).substr(0,(spn1.style.top).length-2));

    a = Math.abs(target_posx-now_posx);
    b = Math.abs(target_posy-now_posy);

    c = Math.ceil(Math.sqrt(a*a+b*b))
    //document.write("a is"+a+"<br>b is"+b+"<br>c is "+c);
    a_bc = (a/c)*bc;
    b_bc = (b/c)*bc;

    //document.write(a_bc+"<br>"+b_bc);
    //调定角色方向
    var dir = set_dir(now_posx,now_posy,target_posx,target_posy);
    spn1.scrollTop = (dir-1) * 64;

    debug.innerHTML = "角色移动，两点走直线<br>x边长:"+a+"<br>y边长"+b+"<br>斜边长:"+c+"<br>X步长 is"+a_bc+"<br>Y步长 is"+b_bc+"<br>方向:"+dir+"<br>now_posx:"+now_posx+"<br>now_posy"+now_posy+"<br>target_posx"+target_posx+"<br>target_posy"+target_posy;

    if(now_posx != target_posx){

        if(now_posx > target_posx){
            now_posx -= a_bc;
            if(now_posx <= target_posx)
                now_posx = target_posx;
            spn1.style.left = now_posx;
        }else{
            now_posx += a_bc;
            if(now_posx >= target_posx)
                now_posx = target_posx;
            spn1.style.left = now_posx;
        }
    }

    if(now_posy != target_posy){
        if(now_posy > target_posy){
            now_posy -= b_bc;
            if(now_posy <= target_posy)
                now_posy = target_posy;
            spn1.style.top = now_posy;
        }else{
            now_posy += b_bc;
            if(now_posy >= target_posy)
                now_posy = target_posy;
            spn1.style.top = now_posy;
        }
    }

    if(isNaN(a_bc) && isNaN(b_bc)){
        clearTimeout(theTimeout2);
        clearTimeout(theTimeout);
        theTimeout2 = 0;
        spn1.scrollLeft = 0;
/***自动走***/
        target_posx= Math.round(Math.random()*800);
        target_posy = Math.round(Math.random()*500);
        theTimeout = setTimeout("move();",100);


    }else{
        if(theTimeout2 == 0){
            theTimeout2 = setTimeout("show_a();",150);
        }

theTimeout = setTimeout("move();",100);

}

return;
}

//调定角色方向
function set_dir(now_posx,now_posy,target_posx,target_posy){

    if(target_posx > now_posx){

        if(target_posy > now_posy){
            dir = 2;
        }
        if(target_posy == now_posy){
            dir = 1;
        }
        if(target_posy < now_posy){
            dir = 8;
        }
    }
    if(target_posx < now_posx){

        if(target_posy > now_posy){
            dir = 4;
        }
        if(target_posy == now_posy){
            dir = 5;
        }
        if(target_posy < now_posy){
            dir = 6;
        }
    }
    if(target_posx == now_posx){

        if(target_posy > now_posy){
            dir = 3;
        }
        if(target_posy < now_posy){
            dir = 7;
        }
    }

return dir;
}

i = 0;
function show_a(){
i += 32;
//alert(i);
    if(i<=128){
        spn1.scrollLeft = i;
    }else{
        i = 32;
        spn1.scrollLeft = i;
    }
    theTimeout2 = setTimeout("show_a();",150);
}

/**自动走第一步**/
move();

</script>
</body>
</html>

标签

#function #html #div #c