js 飞机大战

完整文件及代码可以在网盘下载，下载链接为：https://pan.baidu.com/s/1hs7sBUs 密码: d83x

飞机大战css定义：

<style>

#container{　　

width:320px;

height:568px;

background: url(images/start.png);

margin:20px auto;

position: relative;

overflow: hidden;　　

}

#container input{

width:120px;

height: 38px;

background: #ff6600;

border:;

color:#fff;

font-size:14px;

font-family: 微软雅黑;

position: absolute;

left: 100px;

bottom:50px;

}

#enddiv{

position: absolute;

top: 210px;

left: 75px;

border: 1px solid gray;

border-radius: 5px;

text-align: center;

background-color:#d7ddde;

display: none;

z-index:;

}

.plantext{

width: 160px;

height: 30px;

line-height: 30px;

font-size: 16px;

font-weight: bold;

}

#enddiv div{

width: 160px;

height: 50px;

}

#enddiv div button{

margin-top:10px ;

width: 90px;

height: 30px;

border: 1px solid gray;

border-radius: 30px;

}

#scoretext{

margin:;

font-family: arial;

font-size:12px;

font-weight: bold;

color:#ff6600;

position: absolute;

left: 4px;

top: 4px;

z-index:;

}

</style>

飞机大战： HTML代码如下：

　　<div id="container">

        <p id="scoretext"></p>

        <div id="enddiv">

            <p class="plantext">游戏结束</p>

            <div><button onclick="restartGame()" id="restart">继续</button></div>

        </div>

        <input type="button" value="开始游戏" id="startBtn">

    </div>

飞机大战：调用js

//中大型飞机射击次数未实现，gameover未实现

        function startGame(container){

            var startBtn = document.getElementById("startBtn");

            startBtn.onclick = function(){

                container.style.background = "url(images/background_1.png)";

                this.style.display = "none";

                bgMove(container);

                var score = 0;

                var myplan = new MyPlan(120,480,container);

                var middleEnemy = new MiddleEnemy(container,myplan.bullets,myplan,score); //中型飞机对象实例

                var maxEnemy = new MaxEnemy(container,myplan.bullets,myplan,score);//大型飞机对象实例

                var enemy = new Enemy(container,myplan.bullets,myplan,middleEnemy,maxEnemy,score);

                enemy.init();

            }

        }

        var speed = 0;

        function bgMove(container){

            setInterval(function(){

                speed++;

                container.style.backgroundPosition = "0 " + speed + "px";

                if(speed > 568){

                    speed = 0;

                }

            },15);

        }

        function gameOver(){

            var enddiv = document.getElementById("enddiv");

            var restart = document.getElementById("restart");

            enddiv.style.display = "block";

            restart.onclick = function(){

                location.reload();

            }

        }

        var score = 0;

        function getScore(num){

            var scoretext = document.getElementById("scoretext");

            score += num;

            scoretext.innerHTML = score + "分";

        }

        onload = function(){

            var container = document.getElementById("container");

            startGame(container);

        }

飞机大战：我方飞机创建：

Array.prototype.remove = function(value){

    for(var i = 0; i < this.length; i++){

        if(this[i] == value){

            this.splice(i,1);

        }

    }

}

function MyPlan(x , y , container){

    this.x = x;

    this.y = y;

    this.img = "images/my.gif";

    this.container = container;

    this.bullets = [];

    this.createTimer;

    this.init();

}

MyPlan.prototype = {

    init:function(){

        this.create();

        this.planMove();

        this.bullets.push(this.plan);

        var that = this;

        this.createTimer = setInterval(function(){

            that.createBullets();

        },200);

        this.createBullets();

    },

    planMove:function(){

        var that = this;

        this.container.onmousemove = function(e){

            e = e || event;

            var maxLeft = that.container.offsetWidth - that.plan.offsetWidth;

            var maxTop = that.container.offsetHeight - that.plan.offsetHeight;

            var planX = Math.max(Math.min(e.clientX - that.container.offsetLeft - that.plan.offsetWidth / 2,maxLeft),0);

            var planY = Math.max(Math.min(e.clientY - that.container.offsetTop - that.plan.offsetHeight / 2,maxTop),0);

            that.plan.style.left = planX + "px";

            that.plan.style.top = planY + "px";

        }

    },

    create:function(){

        this.plan = document.createElement("img");

        this.plan.src = this.img;

        this.plan.style.cssText = "position:absolute; top:" + this.y + "px; left:" + this.x + "px;";

        this.container.appendChild(this.plan);

    },

    createBullets:function(){

        this.bull = document.createElement("img");

        this.bull.src = "images/bullet1.png";

        var bullX = this.plan.offsetLeft + this.plan.offsetWidth / 2 - 6 / 2;

        var bullY = this.plan.offsetTop - 14;

        this.bull.style.cssText = "position:absolute; top:" + bullY + "px; left:" + bullX + "px;";

        this.container.appendChild(this.bull);

        this.bullets.push(this.bull);

        var bull = this.bull; //不能用that = this 对象冒充 闭包问题

        var container = this.container;

        var bullets = this.bullets;

        this.bull.timer = setInterval(function(){

            bull.style.top = bull.offsetTop - 3 + "px";

            if(bull.offsetTop <= -14){

                bullets.remove(bull);

                container.removeChild(bull);

                clearInterval(bull.timer);

            }

        },8);

    }

}

飞机大战：敌方基本飞机创建：

function Enemy(container,bullets,myplan,middleEnemy,maxEnemy,score){

    this.container = container;

    this.img = "images/enemy1_fly_1.png";

    this.createTime = 600; //创建敌机的间隔时间

    this.bullets = bullets;

    this.dieImg = "images/enemy1_fly_3.gif";

    this.width = 34; //敌机的宽度

    this.height = 24;    //敌机的高度

    this.myplan = myplan;

    this.count = 1; //小型敌机创建个数

    this.dieCount = 1; //敌机消灭需子弹打击次数

    this.middleEnemy = middleEnemy;

    this.maxEnemy = maxEnemy;

    this.score = score;

}

Enemy.prototype = {

    init:function(){

        var that = this;

        var middleEnemy = this.middleEnemy;

        var maxEnemy = this.maxEnemy;

        var count = 0;

        setInterval(function(){

            that.create();

            count++;

            if(count % 5 == 0){

                middleEnemy.create();

            }

            if(count % 30 == 0){

                maxEnemy.create();

                count = 1;

            }

        },this.createTime);

    },

    create:function(){

        this.enemy = document.createElement("img");

        this.enemy.src = this.img;

        var enemyX = Math.random() * (this.container.offsetWidth - this.width);

        var enemyY = -1 * this.height;

        this.enemy.style.cssText = "position:absolute; left:" + enemyX + "px; top:" + enemyY + "px;";

        this.container.appendChild(this.enemy);

        var enemy = this.enemy;

        this.data_hitCount = 0;

        var container = this.container;

        var bullets = this.bullets;

        var dieImg = this.dieImg;

        var myplan = this.myplan;

        var plan = this.myplan.plan;

        var createBullets = this.myplan.createBullets;

        var dieCount = this.dieCount;

        var isremove = true; //是否可以移除敌机

        var score = this.score;

        var that = this;

        this.enemy.timer = setInterval(function(){

            enemy.style.top = enemy.offsetTop + 3 + "px";

            for(var i = 0; i < bullets.length; i++){

                if(bullets[i].offsetLeft + bullets[i].offsetWidth > enemy.offsetLeft && bullets[i].offsetLeft < enemy.offsetLeft + enemy.offsetWidth){

                    if(bullets[i].offsetTop + bullets[i].offsetHeight > enemy.offsetTop && bullets[i].offsetTop < enemy.offsetTop + enemy.offsetHeight && isremove){

                        if(i == 0){

                            plan.src = "images/myover.gif";

                            container.onmousemove = null;

                            clearInterval(myplan.createTimer);

                            gameOver();

                        }

                        else{

                            container.removeChild(bullets[i]);

                            bullets.remove(bullets[i]);

                            that.data_hitCount++;

                            if(that.data_hitCount == dieCount){

                                isremove = false;

                                enemy.src = dieImg;

                                getScore(dieCount);

                                setTimeout(function(){

                                    container.removeChild(enemy);

                                },300);

                            }

                        }

                    }

                }

            }

            if(enemy.offsetTop >= container.offsetHeight){

                container.removeChild(enemy);

                clearInterval(enemy.timer);

            }

        },30);

    }

}

飞机大战：其他敌机创建：

function MiddleEnemy(container,bullets,myplan,score){

    Enemy.call(this,container,bullets,myplan,score);

    this.img = "images/enemy2_fly_1.png";

    this.dieImg = "images/enemy2_fly_3.gif";

    this.width = 46;  //敌机的宽度

    this.height = 60; //敌机的高度

    this.dieCount = 5;

}

MiddleEnemy.prototype = Enemy.prototype;

function MaxEnemy(container,bullets,myplan,score){

    Enemy.call(this,container,bullets,myplan,score);

    this.img = "images/enemy3_fly_1.png";

    this.dieImg = "images/enemy3_fly_3.gif";

    this.width = 110; //敌机的宽度

    this.height = 164; //敌机的高度

    this.dieCount = 10;

}

MaxEnemy.prototype = Enemy.prototype;

效果图如图所示：

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

JS+html实现简单的飞机大战
摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现飞机html: <!DOCTYPE html> <html lang=&q ...
微信小游戏 demo 飞机大战代码分析（四）(enemy.js， bullet.js, index.js)
微信小游戏 demo 飞机大战代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战代码分析(一)(main.js) 微信小游戏 demo 飞 ...
微信小游戏 demo 飞机大战代码分析（三）(spirit.js, animation.js)
微信小游戏 demo 飞机大战代码分析(三)(spirit.js, animation.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. ...
JS 实现飞机大战
这是JS版本的飞机大战,和C#版本的思路相同,就是语言上有差别,用来巩固知识.可以将代码直接引入到HTML中就可以看到效果 //编写背景对象 function Background(width,hei ...
js实例--飞机大战
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)
整体效果展示: 一.实现思路如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...
用Javascript模拟微信飞机大战游戏
最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...

随机推荐

【转】.net MVC 生命周期
对于Asp.net MVC,我对它的生命周期还是兴趣很浓,于是提出两个问题: 一个HTTP请求从IIS移交到Asp.net运行时,Asp.net MVC是在什么时机获得了控制权并对请求进行处理呢?处理 ...
[android] android项目架构
准备步骤: 1.创建工程(设置版本兼容,最低兼容版本) 2.导入常用jar包,(处理字符串和加密用的jar文件) Commons Lang,Commons Codec commons-codec.ja ...
Java Object类的equals()方法
所有类都从Object类中继承了equals方法,Object类中equals方法源代码如下: public boolean equals(Object obj) { retu ...
Nginx 503错误总结
nginx 503错误(Service Temporarily Unavailable 服务暂时不可用): 503是一种HTTP状态码,由于临时的服务器维护或者过载,服务器当前无法处理请求.这个状况 ...
MySQL聚合函数在计算时，不会自动匹配与之相对应的数据
学习mysql过程中遇到了一个困惑,纠结了我半天时间,刚刚又重新复习了一下,终于知道问题所在以下是一个需求: 取得平均薪水最高的部门的部门编号代码如下: select deptno, avg(sa ...
java 单例的实现及多线程下的安全
package com.demo01; public class Single { /** * 设计模式:单例设计模式 * 解决一个类中只允许存在一个对象这种情况: * 不允许通过类,无限制的创建该类 ...
html高度塌陷问题解决
高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠开启BFC的元素不会被浮动元素所覆盖开启BFC的元素可以包含浮动的子元素如何开启 ...
AngularJs动态添加元素和删除元素
动态添加元素和删除元素 //通过$compile动态编译html var html="<div ng-click='test()'>我是后添加的</div>" ...
Java中的深拷贝和浅拷贝（转载）
深拷贝(深复制)和浅拷贝(浅复制)是两个比较通用的概念,尤其在C++语言中,若不弄懂,则会在delete的时候出问题,但是我们在这幸好用的是Java.虽然java自动管理对象的回收,但对于深拷贝(深复 ...
故障排除：无法启动、访问或连接到 Azure 虚拟机上运行的应用程序
有多种原因可导致无法启用或连接到在 Azure 虚拟机 (VM) 上运行的应用程序.原因包括应用程序未在预期端口上运行或侦听.侦听端口受到阻止,或网络规则未将流量正确传递到应用程序.本文说明有条理地找 ...

js 飞机大战

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

随机推荐

热门专题