js实例--飞机大战

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

JS 实现飞机大战
这是JS版本的飞机大战,和C#版本的思路相同,就是语言上有差别,用来巩固知识.可以将代码直接引入到HTML中就可以看到效果 //编写背景对象 function Background(width,hei ...
js 飞机大战
完整文件及代码可以在网盘下载,下载链接为:https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义: <style> #container{ ...
微信小游戏 demo 飞机大战代码分析（三）(spirit.js, animation.js)
微信小游戏 demo 飞机大战代码分析(三)(spirit.js, animation.js) 微信小游戏 demo 飞机大战代码分析(一)(main.js) 微信小游戏 demo 飞机大战代码 ...
JS+html实现简单的飞机大战
摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现飞机html: <!DOCTYPE html> <html lang=&q ...
基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）
接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...
基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（上）
最近接触过几个版本的cocos2dx,决定每个大变动的版本都尝试一下.本实例模仿微信5.0版本中的飞机大战游戏,如图: 一.工具 1.素材:飞机大战的素材(图片.声音等)来自于网络 2.引擎:coco ...
微信小游戏 demo 飞机大战代码分析（四）(enemy.js， bullet.js, index.js)
微信小游戏 demo 飞机大战代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战代码分析(一)(main.js) 微信小游戏 demo 飞 ...
微信小游戏 demo 飞机大战代码分析（二）(databus.js)
微信小游戏 demo 飞机大战代码分析(二)(databus.js) 微信小游戏 demo 飞机大战代码分析(一)(main.js) 微信小游戏 demo 飞机大战代码分析(三)(spirit. ...
微信小游戏 demo 飞机大战代码分析（一）(game.js, main.js)
微信小游戏 demo 飞机大战代码分析(一)(main.js) 微信小游戏 demo 飞机大战代码分析(二)(databus.js) 微信小游戏 demo 飞机大战代码分析(三)(spirit. ...

随机推荐

linux文件目录结构
1./ 文件系统的入口,最高一级目录 2./bin 存放基础系统所需的命令 3./boot 包含Linux内核及系统引导程序所需要的文件 4./dev 设备文件存储目录(声卡.磁盘.分区..) 5./ ...
python学习笔记-（十四）I/O多路复用阻塞、非阻塞、同步、异步
1. 概念说明 1.1 用户空间与内核空间现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空间(虚拟存储空间)为4G(2的32次方).操作系统的核心是内核,独立于普通的应用程序,可 ...
coreseek增量索引合并
重建主索引和增量索引: [plain] view plain copy /usr/local/coreseek/bin/indexer--config /usr/local/coreseek/etc/ ...
ITShare
框架底层通过IBatis和XML实现ORM映射: 业务处理类似UI,通过Controller和JavaScript交互: 视图通过Castle与NVelocity实现,jquery.tmpl渲染: . ...
jQuery选择器总结
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中 ...
variadic function 的使用
最近在看<the c programming language> K&R 7.3章 Variable-length Argument Lists 变长参数列表, 笔记一下用法 1 ...
OpenStack三种类型的NAT转换
SNAT SNAT即源网络地址转换,这个NAT路由修改IP包包头中的源IP地址.SNAT功能通常用于让只具有私有IP地址的主机能够访问外网,比如,多个PC使用路由器共享上网,每个PC都配置了内网IP, ...
XmlRootElement JAXB
http://desert3.iteye.com/blog/1570092(文章已经很好) 看了那边文章以后尝试后写点直白的 PROPERTY: JAXB 绑定类中的每个获取方法/设置方法对将会自动绑 ...
window 使用vagrant搭建开发开发环境
# -*- mode: ruby -*-# vi: set ft=ruby : # All Vagrant configuration is done below. The "2" ...
用R做逻辑回归之汽车贷款违约模型
数据说明本数据是一份汽车贷款违约数据 application_id 申请者ID account_number 账户号 bad_ind 是否违约 vehicle_year ...

js实例--飞机大战

js实例--飞机大战的更多相关文章

随机推荐

热门专题