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. ...

随机推荐

iife js
摘自:http://dz.sdut.edu.cn/blog/subaochen/2016/02/%E8%AF%B4%E4%B8%80%E8%AF%B4js%E7%9A%84iife/ 1 定义 IIF ...
文档分享-Activiti 5.16 用户手册
今天在翻看工作流相关的网页的时候,在开源中国上http://www.oschina.net/question/915507_149175发现activiti的中文文档:http://www.mossl ...
隐藏NavigationBar的正确方式
-(void)viewWillAppear:(BOOL)animated { [self.navigationController setNavigationBarHidden:YES animate ...
lucene+IKAnalyzer实现中文纯文本检索系统
首先IntelliJ IDEA中搭建Maven项目(web):spring+SpringMVC+Lucene+IKAnalyzer spring+SpringMVC搭建项目可以参考我的博客整合Luc ...
java 在循环中删除数组元素
在写代码中经常会遇到需要在数组循环中删除数组元素的情况,但删除会导致数组长度变化. package com.fortunedr.thirdReport; import java.util.ArrayL ...
String、StringBuffer与StringBuilder之间区别
关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 1.三者在执行速度方面的比较:StringBuilder > String ...
吐槽贴：百度地图 api 封装的实用功能 [源码下载]
ZMap 类功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
海拔高度图*.dem文件的读取—vtkDEMReader
vtkDEMReader reads digital elevation files and creates image data. Digital elevation files are produ ...
java 解 poj 1000
import java.util.Scanner; public class A1000 { public static void main(String[] args) { Scanner sc=n ...
webservice客户端添加soap Header信息
根据wsdl文件的header信息,在客户端中添加相应的header 1.wsdl信息如图 <soapenv:Envelope xmlns:soapenv="http://schema ...

js实例--飞机大战

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

随机推荐

热门专题