2018年1月3日水曜日

ただ画像が動き回るだけのスクリプト(JavaScript)

ポックンのただ画像が動き回るだけのスクリプト(JavaScript)

<html>
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script type="text/javascript">
    var x =40, y =40; /* 初期位置       */
    var dx=10, dy=10; /* 移動速度       */
    var direction=0;  /* 移動方向       */
    var distance=0;   /* 移動距離       */
    var flag_cnt=0;
    function move() {
        setTimeout("move()", 100);
        if(flag_cnt >= distance) {
            /* 移動方向を決定 */
            direction=Math.floor(Math.random()*(7-0+1))+0;
            /* 移動距離を決定 */
            distance=Math.floor(Math.random()*(30-0+1))+0;
            /* フラグカウンタ初期化 */
            flag_cnt=0;
        }
        var obj=document.getElementById("face");
        var msg=document.getElementById("msg");
        msg.innerHTML="flag_cnt:"+flag_cnt+" 移動方向:"+direction+" 移動距離:"+distance;
        /* 移動処理 */
        switch(direction) {
            case 4:  /* 右上 */
                if(0 < y-dy) y-=dy;
            case 0:  /* 右 */
                if(500 > x+dx) x+=dx;
                break;
            case 5:  /* 右下 */
                if(500 > x+dx) x+=dx;
            case 1:  /* 下 */
                if(350 > y+dy) y+=dy;
                break;
            case 6:  /* 左下 */
                if(350 > y+dy) y+=dy;
            case 2:  /* 左 */
                if(0 < x-dx) x-=dx;
                break;
            case 7:  /* 左上 */
                if(0 < x-dx) x-=dx;
            case 3:  /* 上 */
                if(0 < y-dy) y-=dy;
                break;
        }
        obj.style.left=x;
        obj.style.top=y;
        flag_cnt++;
    }
</script>
</head>
<body onLoad="move()">
<div id="msg">
ここの内容が変わります
</div>
<img src="01.png" style="position:absolute;left:46;top:46">
<img id="face" src="02.GIF" style="position:absolute;left:40; top:40">
</body>
</html>
</body>
</html>
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)