js+html写的弱智游戏，坦克发射

最新推荐文章于 2023-05-22 14:47:22 发布

小新s23

最新推荐文章于 2023-05-22 14:47:22 发布

阅读量593

点赞数 3

分类专栏：不知道文章标签： javascript html

本文链接：https://blog.csdn.net/u013408258/article/details/50767839

版权

不知道专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我也不知道我自己是闲到什么地步了，想搞Java开发但是却分到了测试。学了几天js，写了这么个玩意儿。直接copy，再加一张名为tank.PNG的图片就可以看到效果了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
游戏规则：左右键控制方向，z键发射子弹
<input type="hidden" id="h" class="10">
<script type="text/javascript">
    var h=document.getElementById("h");
    var selfIn=0;
    function come(id){
        var pxN=parseInt(h.className);
        if(pxN>=500){
            alert("游戏结束");
            self.clearInterval(selfIn);
            return false;
        }
        pxN=pxN+1;
        h.className=pxN.toString();
        var ele=document.getElementById(id);
        ele.className="start";
        ele.style.height=pxN.toString()+"px";
    }
    function start(speed){
        document.getElementById("tank").attributes["onkeydown"].nodeValue="go(event,"+speed+")";
        if(document.getElementsByClassName("start").length!=0){
            self.clearInterval(selfIn);
            var sel=(document.getElementsByClassName("start"))[0];
            sel.style.height="10px";
            document.getElementById("h").className="10";
            sel.className=" ";
        }

        var n=Math.random().toString();
        var id= n.substring(2,3)+"_";
        selfIn=self.setInterval("come('"+id+"')",speed);
//        self.setInterval("come('"+id+"',"+pxN+")",speed);
    }
</script>
<!--键盘打击事件-->
<script type="text/javascript">
    function go(ele,sp){
        var e=ele.keyCode;
        if(e==37){
            var cl=document.getElementsByClassName("tf");
            var t=cl[0];
            var id=parseInt(t.id);
            if(id==0){
                return false;
            }//对上一个元素进行清空
            t.className=" ";
            t.style.backgroundImage="";
            //对前一个元素进行属性增加
            var preId=id-1;
            var nod=document.getElementById(preId.toString());
            nod.className="tf";
            nod.style.backgroundImage="url(tank.PNG)";
            nod.style.backgroundRepeat="no-repeat";
        }else if(e==39){
            var cl=document.getElementsByClassName("tf");
            var t=cl[0];
            var id=parseInt(t.id);
            if(id==9){
                return false;
            }//对上一个元素进行清空
            t.className=" ";
            t.style.backgroundImage="";
            //对前一个元素进行属性增加
            var preId=id+1;
            var nod=document.getElementById(preId.toString());
            nod.className="tf";
            nod.style.backgroundImage="url(tank.PNG)";
            nod.style.backgroundRepeat="no-repeat";
        }else if(e==90){
            var shoot=document.getElementsByClassName("tf")[0];
            var shootTarget=document.getElementById(shoot.id+"_");
            if("start"==shootTarget.className){
                start(sp);
            }else{
                return false;
            }
        }else{
            return false;
        }
    }
</script>
<div id="foe" style="width: 1000px;height: 500px;background-color: #D2E0E6"></div>
<div id="tank" style="width:1000px;height: 125px;background-color: rgba(16, 16, 33, 0.47)" οnkeydοwn="go(event,100)">
    <button οnclick="start(100)">儿童级别</button>
    <button οnclick="start(10)">成人</button>
    <button οnclick="start(1)">牛逼</button>
    <button οnclick="start(0.1)">不是人级别</button><br>
</div>

<!--创造排版-->
<script type="text/javascript">
    var fo=document.getElementById("foe");
    var tank=document.getElementById("tank");
    for(var v=0;v<10;v++){
        var node=document.createElement("div");
        node.style.width="100px";
        node.style.height="100px";
        node.style.float="left";
        node.id= v.toString();
        if(v=="5"){
            node.className="tf";
            node.style.backgroundImage="url(tank.PNG)";
            node.style.backgroundRepeat="no-repeat";
        }
        tank.appendChild(node);
        <!--上排-->
        var tid=v+"_";
        var nod=document.createElement("div");
        nod.style.width="100px";
        nod.style.height="10px";
        nod.style.float="left";
        nod.style.backgroundColor="red";
        nod.id=tid;
        fo.appendChild(nod);
    }
</script>

</body>
</html>

实在懒得找就把我这张拿去吧，，，