完整文件及代码可以在网盘下载,下载链接为: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 飞机大战的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. JS 实现飞机大战

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

  7. js实例--飞机大战

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  8. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

  9. 用Javascript模拟微信飞机大战游戏

    最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...

随机推荐

  1. 解决 Java 调用 Azure SDK 证书错误 javax.net.ssl.SSLHandshakeException

    Azure 作为微软的公有云平台,提供了非常丰富的 SDK 和 API 让开发人员可以非常方便的调用的各项服务,目前除了自家的 .NET.Java.Python. nodeJS.Ruby,PHP 等语 ...

  2. JMS - ActiveMQ的简单使用

    首先需要下载ActiveMQ,下面的链接给我们列出了所有版本:http://activemq.apache.org/download-archives.html每个版本为不同的OS提供了链接: 公司电 ...

  3. Vue-[v-model]理解示例

    对应文档节点: https://vuefe.cn/v2/guide/components.html#Customizing-Component-v-model <body> <div ...

  4. canal —— 阿里巴巴mysql数据库binlog的增量订阅&消费组件

    阿里巴巴mysql数据库binlog的增量订阅&消费组件canal ,转载自  https://github.com/alibaba/canal 最新更新 canal QQ讨论群已经建立,群号 ...

  5. webpack_hmr报错 cannot load 状态500

    使用vue-cli时,启动本地环境,然后页面没有关闭,直接切换到线上环境,过一会会发起一个http://xxx/__webpack_hmr请求,会报cannot load原因:它属于nodejs中的一 ...

  6. dotnet watch+vs code提升asp.net core开发效率

    在园子中,已经又前辈介绍过dotnet watch的用法,但是是基于asp.net core 1.0的较老版本来讲解的,在asp.net core 2.0的今天,部分用法已经不太一样,所以就再写一篇文 ...

  7. Codeforces Round #416 (Div. 2) A+B

    A. Vladik and Courtesy 2 seconds 256 megabytes   At regular competition Vladik and Valera won a and  ...

  8. IE8下的怪异模式

    使用DWZ框架,老是出现点击button后在winxp IE8下出现新页面,经过检查后发现IE8下submit后,return false就不行了,必须使用window.event.returnVal ...

  9. Android 保存和恢复activity的状态数据

    一般来说, 调用onPause()和onStop()方法后的activity实例仍然存在于内存中, activity的所有信息和状态数据不会消失, 当activity重新回到前台之后, 所有的改变都会 ...

  10. python三次输入错误验证登录

    # login.py# 提示用户输入用户名和密码# 验证用户名和密码# 如果v错误,则输出用户名或密码错误# 如果成功,则输出欢迎,xxxnum = 0while True: name = input ...