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

我也不知道我自己是闲到什么地步了,想搞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>
实在懒得找就把我这张拿去吧,,,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值