<!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实例--飞机大战的更多相关文章

  1. JS 实现飞机大战

    这是JS版本的飞机大战,和C#版本的思路相同,就是语言上有差别,用来巩固知识.可以将代码直接引入到HTML中就可以看到效果 //编写背景对象 function Background(width,hei ...

  2. js 飞机大战

    完整文件及代码可以在网盘下载,下载链接为:https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义: <style> #container{ ...

  3. 微信小游戏 demo 飞机大战 代码分析 （三）(spirit.js, animation.js)

    微信小游戏 demo 飞机大战 代码分析(三)(spirit.js, animation.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码 ...

  4. JS+html实现简单的飞机大战

    摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现 飞机html: <!DOCTYPE html> <html lang=&q ...

  5. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）

    接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...

  6. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（上）

    最近接触过几个版本的cocos2dx,决定每个大变动的版本都尝试一下.本实例模仿微信5.0版本中的飞机大战游戏,如图: 一.工具 1.素材:飞机大战的素材(图片.声音等)来自于网络 2.引擎:coco ...

  7. 微信小游戏 demo 飞机大战 代码分析（四）(enemy.js， bullet.js, index.js)

    微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...

  8. 微信小游戏 demo 飞机大战 代码分析 （二）(databus.js)

    微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...

  9. 微信小游戏 demo 飞机大战 代码分析 （一）(game.js, main.js)

    微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...

随机推荐

  1. es6学习笔记（1） let和const命令详解

    let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...

  2. Sharp Memory LCD (ls013b7dh03)驱动

    网上找不到什么靠谱的资料,甚至我调好了夏普原厂和代理商还来找我要demo,  哎,苦逼的码农. lcd_main.c #include "ls013b7dh03.h" #inclu ...

  3. 抓取百万知乎用户信息之HttpHelper的迭代之路

    什么是Httphelper? httpelpers是一个封装好拿来获取网络上资源的工具类.因为是用http协议,故取名httphelper. httphelper出现的背景 使用WebClient可以 ...

  4. Struts2返回json格式数据踩坑记录

    事件起因 昨天提测修改冻结/解冻银行卡样式的功能,微姐测试过程中发现调用ajax请求耗时过长,今天来排查,发现浏览器请求/finance/ajax/freeze/ajaxGetShopLists时,对 ...

  5. document.compatMode属性

    document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compat ...

  6. Windows下将nginx安装为服务运行

    今天看到nginx这个小服务器软件正式版更新到了1.4.2,想玩下它.这个服务器软件虽小,但功能强大,是开源软件,有着良好的性能,被很多个人.企业,甚至大型企业所使用! 由于是在Windows下,所以 ...

  7. centos7 开放端口

    开启端口 firewall-cmd --zone=public --add-port=80/tcp --permanent 命令含义:   --zone #作用域   --add-port=80/tc ...

  8. 第五篇 基于.net搭建热插拔式web框架（拦截器---请求管道）

    好了,前边我们把核心内容介绍完了,接下来要做的就是拦截用户的请求,并把请求转向沙箱内. 这里我们准备通过实现一个HttpModule类来完成请求的拦截与转发.新建一个HuberHttpModule类, ...

  9. tomcat 快速部署静态文件

    server.conf配置: <?xml version='1.0' encoding='utf-8'?> <!-- Licensed to the Apache Software ...

  10. CSS的5种常用的垂直居中的方法

    1.绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半 #child{ width: 200px; height: 150px; position: absolute; left: 50%; ...