<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.map{
position: relative;
width: 400px;
height: 700px;
border: 1px solid black;
margin: 0 auto;
overflow: hidden;
cursor: none;
}
.bg_img{
position: absolute;
z-index: -1;
width: 400px;
height: 700px;
background: url("../image/12.png") 0 0 no-repeat;
background-size: 400px 700px;
}
.score{
position: absolute;
right: 0;
top: 0;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<div class="map">
<span class="score">Score:0</span>
<div class="bg_img"></div>
<div class="bg_img"></div>
</div>
<script>
var map=document.getElementsByClassName("map")[0];
var score=document.getElementsByClassName("score")[0];
var bg_img=document.getElementsByClassName("bg_img");
var Score=0;
//背景图移动
(function(){
bg_img[0].style.top="-700px";
bg_img[1].style.top="0";
function bg_animation(){
for(var i=0;i<bg_img.length;i++){
var top=parseInt(bg_img[i].style.top);
top++;
if(top>=700){
top=-700;
}
bg_img[i].style.top=top+"px";
}
}
setInterval(bg_animation,30);
})();
//封装用户飞机
var user;
function User(){
//封装属性
this.width=60;
this.height=70;
this.src="../image/14.gif";
this.x;
this.y;
this._user=null;
//创建用户飞机
this.createUser=function(){
if(this._user==null){
this._user=document.createElement("img");
this._user.style.width=this.width+"px";
this._user.style.height=this.height+"px";
this._user.style.position="absolute";
this._user.style.top="600px";
this._user.style.left="170px";
this._user.style.zIndex=1;
this._user.src=this.src;
map.appendChild(this._user);
}
}
//用户飞机移动
this.user_move=function(x,y){
this.x=x;
this.y=y;
this._user.style.top=y+"px";
this._user.style.left=x+"px";
}
}
//封装用户飞机子弹
var bullet;
function Bullet(){
this.width=10;
this.height=20;
this.src="../image/15.png";
this.x;
this.y;
this._bullet=null;
//创建子弹
this.create_bullet=function(){
if(this._bullet==null){
this._bullet=document.createElement("img");
this._bullet.style.width=this.width+"px";
this._bullet.style.height=this.height+"px";
this._bullet.style.position="absolute";
this._bullet.style.zIndex=1;
this._bullet.src=this.src;
map.appendChild(this._bullet);
this.x=parseInt(user._user.style.left)+(user.width/2)-(this.width/2);
this.y=parseInt(user._user.style.top)-this.height;
}
this._bullet.style.top=this.y+"px";
this._bullet.style.left=this.x+"px";
}
//子弹移动
this.bullet_move=function(index,array){
this.y-=2;
if(this.y<=0){
this._bullet.remove();
array.slice(index,1);
}
this.create_bullet();
}
//子弹击中敌机
this.shoot_enemy=function(enemy,index,array){
for(var key in enemy)
{
//控制子弹的y必须在敌机的height的范围之内
if(this.y>=enemy[key].y&&this.y<=enemy[key].y+enemy[key].height&&this.x>enemy[key].x-this.width&&this.x<enemy[key].x+enemy[key].width)
{
//当血量为0时移除敌机
enemy[key].blood-=1;
if(enemy[key].blood<=0)
{
//分数的记录
Score+=enemy[key].score;
score.innerHTML="Score:"+Score;
enemy[key]._enemy.remove();//删除敌机的dom元素
enemy.splice(key,1);//删除敌机在数组里面的实例化对象
}
this._bullet.remove();//删除子弹的dom元素
array.splice(index,1);//删除子弹在子弹数组里面的实例化对象
}
}
}
}
//封装敌机
var enemy;
function Enemy(w,h,b,src,score){
this.width=w||40;
this.height=h||30;
this.blood=b||3;
this.src=src||"../image/17.png";
this.score=score||100;
this.x;
this.y;
this.speed=2;
this._enemy=null;
this.create_enemy=function(){
if(this._enemy==null){
this._enemy=document.createElement("img");
this._enemy.style.width=this.width+"px";
this._enemy.style.height=this.height+"px";
this._enemy.style.position="absolute";
this._enemy.src=this.src;
this._enemy.style.zIndex=2;
map.appendChild(this._enemy);
this.x=Math.random()*(400-this.width);
this.y=-this.height;
}
this._enemy.style.top=this.y+"px";
this._enemy.style.left=this.x+"px";
}
//敌机移动
this.enemy_move=function(key,array){
this.y+=this.speed;
if(this.y>=700){
this._enemy.remove();
array.slice(key,1);
}
this._enemy.style.top=this.y+"px";
}
//判断敌机是否与用户飞机相撞
if(user.x>this.x-user.width+20&&user.x<this.x+this.width-20&&user.y<this.y+this.height-10&&user.y>this.y-user.height+10)
{
alert("Game Over!");
//停止所有的计时器
clearInterval(time_createEnemy);
clearInterval(time_createBullet);
clearInterval(time_bulletMove);
clearInterval(time_enemyMove);
map.onmousemove=null;
return;
}
}
var bullet_array=[];
var enemy_array=[];
//定义全局变量接收计时器
var time_createBullet;
var time_bulletMove;
var time_createEnemy;
var time_enemyMove;
window.onload=function(){
//实例化 用户飞机
user=new User();
user.createUser();
//隔200ms创建一个子弹 添加到数组中
time_createBullet=setInterval(function(){
bullet=new Bullet();
bullet.create_bullet();
bullet_array.push(bullet);
},200);
//控制子弹移动
time_bulletMove=setInterval(function(){
if(bullet_array.length>0)
{
for(var i=0;i<bullet_array.length;i++)
{
bullet_array[i].bullet_move(i,bullet_array);
if(enemy_array.length>0)
{
//每颗子弹调用shoot_enemy方法
if(bullet_array[i]==undefined)return;//飞机飞到最高处，发射子弹直接消失，下面没有对象
bullet_array[i].shoot_enemy(enemy_array,i,bullet_array);
}
}
}
},5)
//创建敌机 创建出大敌机概率为0.3，小敌机概率为0.7
time_createEnemy=setInterval(function(){
if(Math.random()>0.7){
enemy=new Enemy();
enemy.create_enemy();
enemy_array.push(enemy);
}
else{
enemy=new Enemy(50,65,5,"../image/18.png",300);
enemy.create_enemy();
enemy_array.push(enemy);
}
},1000);
//控制敌机下落
time_enemyMove=setInterval(function(){
if(enemy_array.length>0){
for(var key in enemy_array){
enemy_array[key].enemy_move(key,enemy_array);
}
}
},15)
//给地图添加鼠标移动事件
map.onmousemove=function(e){
var x= e.pageX-this.offsetLeft-user.width/2;
var y= e.pageY-this.offsetTop-user.height/2;
user.user_move(x,y);
}
}
</script>
</body>
</html>JS小游戏 飞机大战
猜你喜欢
转载自blog.csdn.net/weixin_42069386/article/details/84849410
今日推荐
周排行