首页 > 代码库 > js实例--飞机大战

js实例--飞机大战

2024-08-27 09:03:13   221人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>飞机大战</title>
        <style>
            #did{
                width:500px;height:500px;
                background:url("./images/bg2.png") no-repeat 0px -1036px;
                position:relative;overflow:hidden;}
            #gid{position:absolute;top:350px;left:100px;}
            #p0,#p1,#p2,#p3,#p4,#e1,#e2,#e3,#boom{position:absolute;}
        </style>
    </head>
    <body>
        <h2>JavaScript实例:飞机大战</h2>
        <div id="did">
            <img id="p0" src="./images/eshot.png" style="display:none;"/>
            <img id="p1" src="./images/eshot.png" style="display:none;"/>
            <img id="p2" src="./images/eshot.png" style="display:none;"/>
            <img id="p3" src="./images/eshot.png" style="display:none;"/>
            <img id="p4" src="./images/eshot.png" style="display:none;"/>
            
            <img id="e1" src="./images/e1.png" style="display:none;"/>
            <img id="e2" src="./images/e2.png" style="display:none;"/>
            <img id="e3" src="./images/e3.png" style="display:none;"/>
           
            <img id="boom" src="./images/boom.gif" style="display:none;"/>
        
           <img id="gid" src="./images/me.png"/>
        </div>
        <script type="text/javascript">
            var btop=-1036;
            var m=0,b=0;
            var did = document.getElementById("did");
            var gid = document.getElementById("gid");
            var boom = document.getElementById("boom");
            window.document.onkeydown = function(ent){
                //获取兼容的事件对象
                var event = ent || window.event;
                //alert(event.keyCode);
                //根据键盘值执行对应操作
                switch(event.keyCode){
                    case 37: //左方向键
                        gid.style.left = Math.max(0,gid.offsetLeft-5)+"px";
                        break;
                    case 38: //上方向键
                        gid.style.top = Math.max(0,gid.offsetTop-5)+"px";
                        break;
                    case 39: //右方向键
                        gid.style.left = Math.min(450,gid.offsetLeft+5)+"px";
                        break;
                    case 40: //下方向键
                        gid.style.top = Math.min(440,gid.offsetTop+5)+"px";
                        break;
                    case 32: //空格键
                        shoot(gid.offsetLeft+51,gid.offsetTop); //发射炮弹
                        break;
                }
            }
            
            //发射炮弹方法
            function shoot(x,y){
                //遍历所有炮弹
                for(var i=0;i<5;i++){
                    var p = document.getElementById("p"+i);
                    //判断炮弹是否可用
                    if(p.style.display=="none"){
                        p.style.top = y+"px";
                        p.style.left = x+"px";
                        p.style.display = "block";
                        return;
                    }
                }
            }
            
            //碰撞检测函数
            function doCheckP(p,e){
                //获取检测坐标
                var x1 = e.offsetLeft+3;
                var x2 = e.offsetLeft+93;
                var y1 = e.offsetTop+35;
                var y2 = e.offsetTop+59;
                var x = p.offsetLeft+1;
                var y = p.offsetTop;
                //判断是否有像素重叠
                if(x>x1 && x<x2 && y>y1 && y<y2){
                     return true;
                }
                return false;
            }
            
            //游戏主线程
            function running(){
                //负责移动可见炮弹
                for(var i=0;i<5;i++){
                    var p = document.getElementById("p"+i);
                    //判断炮弹是否可用
                    if(p.style.display=="block"){
                        p.style.top = p.offsetTop-5+"px";
                        //回收出了屏幕的炮弹
                        if(p.offsetTop<-10){
                            p.style.display = "none";
                        }
                        
                        //碰撞检测
                        //遍历所有敌机
                        for(var j=1;j<=3;j++){
                            var e = document.getElementById("e"+j);
                            //判断是否可见
                            if(e.style.display=="block"){
                                if(doCheckP(p,e)){
                                    
                                    //设置爆炸位置
                                    boom.style.top = p.offsetTop-170+"px";
                                    boom.style.left = p.offsetLeft-200+"px";
                                    boom.style.display ="block";
                                    b=0;
                                    
                                    //隐藏敌机和炮弹
                                    p.style.display = "none";
                                    e.style.display = "none";
                                }
                            }
                        }
                    }
                }
               
                //随机设置出现敌机
                var n = Math.ceil(Math.random()*10000)%20;
                if(n==5){
                    for(var i=1;i<=3;i++){
                        var e = document.getElementById("e"+i);
                        //判断而是否可用
                        if(e.style.display=="none"){
                            e.style.display="block";
                            e.style.top=-85+"px";
                            e.style.left=Math.ceil(Math.random()*10000)%400+"px";
                            break;
                        }
                    }
                }
                
                //负责移动可见飞机
                for(var i=1;i<=3;i++){
                    var e = document.getElementById("e"+i);
                    //判断而是否可用
                    if(e.style.display=="block"){
                        e.style.top = e.offsetTop+4+"px";
                        //判断是否出界
                        if(e.offsetTop>500){
                            e.style.display = "none";
                        }
                    }
                }
                
                //控制爆炸时间
                if(b>=0){
                    b++;
                }
                if(b>10){
                     boom.style.display ="none";
                     b=-1;
                }
                
                //负责无缝滚动背景图片
                m+=2;
                did.style.backgroundPosition="0px "+(btop+m)+"px";
                if(m>768){
                    m=0;
                }
                
                
                setTimeout("running()",33);
            }
            
            running();
        </script>
    </body>
</html>

 

js实例--飞机大战


联系
我们