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 任何浏览器都可以运行]. 效果图: 原理:利用 ...
随机推荐
- java 类与对象基础整理
之前学习javaSE的时候,没有针对性地对对类与对象的一些基础进行整理,下面这些内容是笔记内容整理后的,希望以后自己可以通过这些博客时常复习! 一.类and对象的基础 类似于类的生命啊,类与对象的关系 ...
- 单例模式的c++实现
#pragma once #include <iostream> #include <memory> #include <Windows.h> using name ...
- HOST文件配置
HOST文件配置位置:C:\Windows\System32\drivers\etc\HOSTS 127.0.0.1 localhost 127.0.0.1 app.weilan.com 127.0. ...
- hdu 1162 Eddy's picture (Kruskal 算法)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 Eddy's picture Time Limit: 2000/1000 MS (Java/Ot ...
- kafka controller重构
Kafka Controller 是 Kafka 的核心组件,在前面的文章中,已经详细讲述过 Controller 部分的内容.在过去的几年根据大家在生产环境中应用的反馈,Controller 也积累 ...
- Python爬虫教程-18-页面解析和数据提取
本篇针对的数据是已经存在在页面上的数据,不包括动态生成的数据,今天是对HTML中提取对我们有用的数据,去除无用的数据 Python爬虫教程-18-页面解析和数据提取 结构化数据:先有的结构,再谈数据 ...
- Python log 模块介绍
刚用Python log模块写了一个例子,记录一下. import logging import logging.handlers import os from datetime import dat ...
- centos系统移植
今天将一个服务器上面的硬盘拆掉放到安装到另外一个服务器上面,硬盘里已经安装系统为centos6.0. 服务器 为dell的1850,好吧,在今天我还有幸搞这种“屎”前的服务器还是很幸运的! 硬盘换了之 ...
- C++11标准之右值引用(rvalue reference)
1.右值引用引入的背景 临时对象的产生和拷贝所带来的效率折损,一直是C++所为人诟病的问题.但是C++标准允许编译器对于临时对象的产生具有完全的自由度,从而发展出了Copy Elision.RVO(包 ...
- SVN常用功能介绍(二)
说明 上一章节主要描述了SVN的简介.安装搭建,和项目管理人员对SVN的常用操作. 这章主要讲解,SVN对应角色组员,在实际运用中的常用操作. 将SVN服务器项目导入到开发组员的本地电脑里 方式一: ...