javascript飞机⼤战完整代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.game{
position:relative;
width: 320px;
height: 568px;
margin: 50px auto;
background: url('image/bg.png');
}
.game>img,.score,.life{
position: absolute;
}
.score{
top: 20px;
}
.life{
right: 0;
timeout on t2 timertop: 20px;
}
.life{width:60px;}
.life img{float: left;}
</style>
</head>
<body>
<div class="game">
<div class="score">得分:0</div>
<div class="life">
<img src="image/heart.png" alt="">
<img src="image/heart.png" alt="">
<img src="image/heart.png" alt="">
</div>
</div>
</body>
</html>
<script src="js/engine.js"></script>
<script src="js/bullet.js"></script>
<script src="js/hero.js"></script>
<script src="js/enemy.js"></script>
<script src="js/allEnemy.js"></script>
引擎
/*
游戏引擎
*/
var Engine = {
//刚开始的游戏状态
gameStatus:false,
//所以敌机
enemy:{},
//⼦弹
bullet:{},
/
/得分
scroe:0,
//背景图⽚
game:document.querySelector('.game'),
//页⾯得分
textScroe:document.querySelector('.score'),
//初始化
init:function(){
this.gameStart();
},
//游戏开始
gameStart:function(){
var _this = this;
//点击图⽚的时候判断游戏状态
lick = function(){
if(!_this.gameStatus){
_this.gameStatus = true;
//移动移动
_this.bgMove();
}
},
//背景移动
bgMove:function(){
var y=0;
var _this = this;
this.bgTimer = setInterval(function(){
y+=2;
_this.game.style['background-position-y']=y+'px';
},50)
},
createPlane:function(){
//创建敌机和英雄机
Hero.init();
/
/创建敌机
var num = parseInt(Math.random()*15)+1;
switch (num) {
case 1:
case 3:
case 5:
case 7:
case 9:
new SmallEnemy().init();
break;
case 2:
case 4:
case 6:
new MiddleEnemy().init();
case 8:
case 12:
new LargeEnemy().init();
}
},500)
},
//所有敌机和⼦弹都要动
handleMove:function(){
var _this=this;
//创建所有⼦弹
for(var i in _this.bullet){
_this.bullet[i].move()
}
//c创建所有敌机动
for(var i in _){
_[i].move()
}
},30)
},
//碰撞检测
isCompact:function(obj1,obj2){
var l1 = obj1.offsetLeft>obj2.offsetLeft+obj2.offsetWidth;        var l2 = obj2.offsetLeft>obj1.offsetLeft+obj1.offsetWidth;        var t1 = obj1.offsetTop>obj2.offsetTop+obj2.offsetHeight;        var t2 = obj2.offsetTop>obj1.offsetTop+obj1.offsetHeight;        if(l1||l2||t1||t2){
return false;
}else{
return true;
}
},
//更新得分
updateScroe:function(scroe){
this.scroe+=scroe;
},
gameOver:function(){
//停⽌创建敌机
ateTimer);
//⼦弹停⽌
veTimer);
}
};
/*
英雄机：因为英雄机只有⼀辆所以不需要⽤构造函数
*/
var Hero = {
//初始图⽚
self:null,
//初始left
left:0,
//初始top
top:0,
//⽣命值
life:3,
//加载进来的图和爆照的图
imgs:['image/hero.gif','image/hero-bang.gif'],
//获得到⾃⼰的红星
allHero:document.querySelectorAll('.life>img'),
//初始化
init:function(){
//创建⼀个元素
var img = ateElement('img');
/
/将图⽚路径赋值给它
img.src=this.imgs[0];
//插⼊到game中
Engine.game.appendChild(img);
//赋值给英雄机的初始图⽚
this.self = img;
//当图⽚加载完成以后获取图⽚的⾼度和宽度
var _this = this;//在函数⾥⾯this的指向会改变，所以我们提前报存下来
//因为上⾯的属性有this.left所以我们应该和图⽚⼀样赋值给它
_this.left = (Engine.game.offsetWidth-img.offsetWidth)/2;//英雄机的left中⼼点等于（game的宽度-英雄机的宽度）除以2            _p = Engine.game.offsetHeight-img.offsetHeight;
img.style.left = _this.left+'px';
p = _p+'px';
//初始化的时候调⽤move
_ve();
_this.shoot();
};
},
//⿏标移动的时候英雄机也要移动
move:function(){
//类似于放⼤镜
var _this = this;
var e = e||event;
var l = e.clientX - Engine.game.offsetLeft - _this.self.offsetWidth/2;
var t = e.clientY - Engine.game.offsetTop  - _this.self.offsetHeight/2;
//边界处理
var lmax = Engine.game.offsetWidth-_this.self.offsetWidth;//最⼤边界
var bmax = Engine.game.offsetHeight-_this.self.offsetHeight;//最⼤边界
l = l < 0 ? 0 : (l > lmax ? lmax : l);
t = t < 0 ? 0 : (t > bmax ? bmax : t);
//赋值
_this.self.style.left = l+'px';
_this.p = t+'px';
//更新left  top
_this.left = l;
_p = t;
}
},
//发⼦弹
shoot:function(){
//每隔100毫秒发⼀次⼦弹
var _this = this;
this.shootTimer = setInterval(function(){
var l = _this.left+_this.self.offsetWidth/2
new Bullet(l,_p).init();
},100)
},
bang:function(){
var img = ateElement('img');
img.src = this.imgs[1];
img.style.left = this.left+'px';
p = p+'px';
Engine.game.appendChild(img)
setTimeout(function(){
this.life--;
this.allHero = document.querySelectorAll('.life img');
this.allHero[0].remove();
console.log(this.allHeart,this.allHero[0])
if(this.life<=0){
this.destroy();
}
},
destroy:function(){
ve();
this.bang();
clearInterval(this.shootTimer);
//游戏结束
this.gameOver();
}
}
//在游戏没开始的时候不能出现英雄机和⼦弹所以要放在引擎⾥⾯
//Hero.init();
敌机类
/*
创建敌机：
*/
function Enemy(blood,speed,imgs,scroe){
//敌机left
this.left = 0;
//敌机top

//敌机⾎量
this.blood = blood;
//敌机速度
this.speed = speed;
//敌机图⽚集合
this.imgs = imgs;//爆炸前和爆炸后
//分数
this.scroe = scroe;
}
Enemy.prototype = {
constructor:Enemy,
init:function(){
//创建⼀个元素
var img = ateElement('img');
//将图⽚路径赋值给它
img.src=this.imgs[0];
/
/插⼊到game中
Engine.game.appendChild(img);
//赋值给敌机的初始图⽚
this.self = img;
//当图⽚加载完成以后获取图⽚的⾼度和宽度
var _this = this;//在函数⾥⾯this的指向会改变，所以我们提前报存下来        load = function(){
_this.left = parseInt(Math.random()*(320-img.offsetWidth));
_p = -img.offsetHeight;
img.style.left = _this.left+'px';
p = _p+'px';
};
/
/⽣成敌机编号并放⼊引擎的bullet中
this.id = Math.random();
<[this.id]=this;
},
//⼦弹移动，定时器都交给引擎去做
move:function(){
this.p = p+'px';
//越界判断
p>568+this.self.offsetWidth){
this.destroy();
}
//判断与英雄机相撞
if(Engine.isCompact(this.self,Hero.self)){
//⾃⼰销毁
this.destroy();
//英雄机
var img = ateElement('img');
img.src = this.imgs[1];
img.style.left = this.left+'px';
p = p+'px';
Engine.game.appendChild(img)
setTimeout(function(){
},1000)
},
destroy:function(){
//销毁
//从页⾯⼩时
ve();
this.bang();
//统计得分
Engine.updateScroe(this.scroe);
/
/从内存消失
[this.id];
}
}
⼤中⼩机器
/*
创建所有类型的飞机
*/
function SmallEnemy(){
var s = parseInt(Math.random()*3+3);
Enemy.call(this,1,s,['image/enemy1.png','image/enemy1-bang.gif'],10)
}
SmallEnemy.prototype = {
constructor: SmallEnemy,
__proto__: Enemy.prototype
};
function MiddleEnemy(){
var s = parseInt(Math.random()*3+2);
Enemy.call(this,5,s,['image/enemy2.png','image/enemy2-bang.gif'],20)
}
MiddleEnemy.prototype = {
constructor:MiddleEnemy,
__proto__:Enemy.prototype
}
function LargeEnemy(){
var s = parseInt(Math.random()*2+1);
Enemy.call(this,10,s,['image/enemy3.png','image/enemy3-bang.gif'],50)
}
LargeEnemy.prototype = {
constructor:LargeEnemy,
__proto__:Enemy.prototype
}
⼦弹
/
*
创建⼦弹：因为⼦弹不是只创建⼀个所以要⽤构造函数
注意⼀点：⼦弹发射的位置应该是英雄机的正中央的位置，所以需要传点东西进来
*/
function Bullet(l,t){
this.l = l;//保留⼀下传进来的l
this.t = t;//保留⼀下创进来的t
//初始图⽚
this.self = null;
//⼦弹初始left
this.left = 0;
/
/⼦弹初始top

//⼦弹的速度
this.speed = 2;
//⼦弹编号因为在引擎⾥⾯有⼀个专门存放⼦弹的对象，所以我们要给每⼀个⼦弹⽣成编号    this.id = '';
}
Bullet.prototype = {
constructor:Bullet,
init:function(){
//创建⼀个元素
var img = ateElement('img');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。