乐趣区

关于javascript:用所学JS的知识做一个简单的坦克小游戏

jiezi

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            margin:20px auto;
        }
        div.content{
            height: 300px;
            border:1px solid red;
            position: relative;
        }
        span{
            color: red;
            font-size: 20px;
        }
        img{position: absolute;}
        img:last-child{margin-top: 60px;}

    </style>
    <script type="text/javascript">
window.onload=function(){var btns=document.getElementsByTagName('button');
    var imgs=document.images;
    var span=document.getElementsByTagName("span")[0];

    // 手动挪动
    btns[0].onclick=function(){imgs[0].style.left=imgs[0].offsetLeft+10+"px";
    }

    // 发射
    btns[1].onclick=function(){var num=Number(span.innerHTML);


        var id=setInterval(function(){
            span.innerHTML= --num;
            if(num==0){clearInterval(id);

                imgs[0].style.left=imgs[0].offsetLeft+100+"px";
            }
        },1000);
    // 赛跑
    btns[2].onclick=function(){var id=setInterval(function(){var random1=Math.round(Math.random()*10);
            var random2=Math.round(Math.random()*10);
            imgs[0].style.left=imgs[0].offsetLeft+random1+"px";
            imgs[1].style.left=imgs[1].offsetLeft+random2+"px";

            if(imgs[0].offsetLeft>400 || imgs[1].offsetLeft>400){clearInterval(id);
                if(imgs[0].offsetLeft>400){alert("tanke1 胜出");
                }else{alert("tanke2 胜出");
                }
            }
        },100);
    }

    // 主动挪动
    function run(){var tanke1=imgs[0];
        var id0=setInterval(function(){
            tanke1.style.left=tanke1.offsetLeft+10+"px";
            if(tanke1.offsetLeft>390){clearInterval(id0);
                tanke1.src='tanke_down.jpg';
                var id1=setInterval(function(){
                    tanke1.style.top=tanke1.offsetTop+10+"px";
if(tanke1.offsetTop>200){clearInterval(id1);
    tanke1.src='tanke_left.jpg';

    var id2=setInterval(function(){
        tanke1.style.left=tanke1.offsetLeft-10+"px";
        if(tanke1.offsetLeft<10){clearInterval(id2);
            tanke1.src='tanke_up.jpg'
            var id3=setInterval(function(){
                tanke1.style.top=tanke1.offsetTop-10+"px";
                if(tanke1.offsetTop<10){clearInterval(id3);
                    tanke1.src='tanke_right.jpg';

                    run();}
            },100)
        }
    },100)
}
                },100);
            }
        },100);


    }
    btns[3].onclick=run;
}
    </script>
</head>
<body>
    <div class="btns">
        <button> 手动挪动 </button>
        <button> 发射 </button>
        <button> 赛跑 </button>
        <button> 主动挪动 </button>
        <span>5</span>
    </div>
    <div class="content">
        <img src="tanke_right.jpg" alt=""> <br>

        <img src="tanke_right.jpg" alt="">
    </div>
</body>
</html>

最初实现的效果图如下图所示:

性能: 这个网络游戏实现了对小坦克的手动挪动、主动挪动、赛跑以及发射的性能，其中发射还退出了倒计时的属性。

点击手动挪动第一个小坦克会向右挪动一小段距离，具体挪动的间隔依据所设置的值来确定。

点击发射会进入 5 秒倒计时，倒计时完结后第一个小坦克会向右霎时挪动一段距离，具体挪动多少间隔也须要看本人的设置。

点击赛跑两个小坦克会向右同时登程，通过间歇调用的设置，两个坦克会在某个工夫随机挪动随机的间隔，直到某一方将要贴近边框线则停下且胜出，同时弹框显示。

点击主动挪动第一个小坦克会向右登程，直至将要碰到右边框线时向下转向，接着将要碰到下边框线时向左转向，而后在将要碰到左边框线时向上转向，最初在将要碰到上边框线时向右转向，顺次循环（挪动的具体位置也需本人设置）。

退出移动版