HTML+CSS+jquery实现飞机大战游戏

        这几天闲着没事运用html+css+jquery写了个飞机大战的游戏 分享下自己的思路：

        一：界面构建：
                 1.首先，先用HTML+CSS构建基本的页面结构，这里的设计如下图：

/*先给网页上所有元素添加一个红色的边框 方便布局 布局完毕后移除*/
*{
   box-sizing: border-box;
   border:1px solid red;
}

HTML代码：

<div class="header">
			<!--<div id="time" class="time"></div>-->
			<div id="score" class="score">0000</div>
		</div>
		
		<div id="content" class="content">
			<div id="player" class="player" style="left: 375px;"></div>
		</div>
		
		<div class="footer">
			<div class="lifePoints" :duration="4000"><div class="lifeBar"></div></div>
			<div class="skills">
				<div id="ASkill" class="skill" style="background:firebrick;color:#fff">A</div>
				<div id="SSkill" class="skill" style="background:lightskyblue;color:#fff">S</div>
				<div id="DSkill" class="skill" style="background:purple;color:#fff">D</div>
				<div id="FSkill" class="skill" style="background:lightgoldenrodyellow">F</div>
				
			</div>
			<div class="magicPoints"><div class="magicBar"></div></div>
		</div>

css代码：

body{
				position: relative;
				padding:0;
				margin: 0;
				
			}
			.header{
				position: fixed;
				line-height: 50px;
				top:0;
				left: 0;
				text-align: center;
				height: 50px;
				width:100%;
				z-index: 999;
				background:#555;
				color:goldenrod;
				font-size:30px;
			}
			.content{
				position: relative;
				margin: 50px auto 0 auto;
				width:100%;
				/*height: calc(100vh - 170px);*/
				height: 500px;
			}
			.footer{
				position: fixed;
				width: 100%;
				bottom:0;
				left:0;
				height: 120px;
			}
			.lifePoints{
				position: relative;
				width: 100%;
				height: 20px;
			}
			.lifeBar{
				position: absolute;
				left: 0;
				height: 20px;
				width: 0%;
				background:deeppink;
				transition: all ease .5s; 
				border-radius: 10px;
			}
			.skills{
				float: left;
				width: 75%;
				height: 100px;
			}
			.skill{
				float: left;
				width: 25%;
				height: 100px;
				line-height: 100px;
				text-align: center;
			}
			.magicPoints{
				position: relative;
				float:left;
				width: 25%;
				height: 100px;
			}
			.magicBar{
				position: absolute;
				width: 100%;
				height: 0px;
				background:deepskyblue;
				transition: all ease .5s; 
				border-radius: 30%;
				bottom: 0;
			}
			.player{
				width: 50px;
				height: 50px;
				background:red;
				position: absolute;
				bottom: 0;
			
			}
			.enemy{
				width: 50px;
				height: 50px;
				background:black;
				position: absolute;
				top: 0;
			
			}
			.shoot{
				position: absolute;
				top:calc(100% - 50px);
				width:8px;
				height:8px;
				border-radius: 50%;
				background:red;
				z-index: 1;
			}
			[class$=Skill]{
				width:20px;
				height:20px;
			}
			.enemy[type="A"],.enemy[type="S"],.enemy[type="D"],.enemy[type="F"]{
				width:50px;
				height: 50px;
			}

js部分：

var data = {
			playerX: 0, //玩家x轴坐标
			playerY: 0, //玩家y轴坐标
			enemyX: [], //敌人X坐标集
			enemyY: [], //敌人Y坐标集
			shootX: [], //子弹X坐标集
			shootY: [], //子弹Y坐标集
			score: 0, //分数
			lifePoint: 100, //玩家生命值
			magicPoint: 0, //玩家魔力值,满100能放必杀,通过击杀敌人获得
			isBoss:false,//是否Boss
			//随机数方法
			random: function(min, max) {
				return Math.floor(Math.random() * max + min);
			},
			//创建生命条
			createLifeBar:function(){
				$(".lifeBar").css("width",data.lifePoint+"%")
			},
			//创建法力条
			createMagicBar:function(){
				$(".magicBar").css("height",data.magicPoint+"%")	
			},
			
			//更新玩家分数
			refreshScore:function(){
				$("#score").html(data.score);
				
			},
			
			//创建敌人
			createEnemy:function(){
				var temp=data.random(0,100);//生成0-100的随机数，用作概率判断
				var windowWidth = $(window).width();//浏览器宽度
				var left = data.random(0,windowWidth - 50)//敌人left值
				if(temp>0&&temp<=10){//A类精英,能且只能通过A技能击杀
					var html = '<div class="enemy" style="background:firebrick;left:'+left+'px" life="200" type="A" lifeUp&