飞机大战项目（jQuery）
今天带来飞机大战的小游戏，先上游戏截图看看效果
游戏截图
思路
这几天在一边学一边写一个飞机大战的网页版简单小游戏，整体的代码运用到对象的思想，思路如下：
1.创建一个Create（类似于公共类），用于创建我方飞机（以下简称友机）、敌机、子弹的DOM；
2.根据飞机和子弹的操作，给Create这个公共类添加相应的属性。有创建、移动、销毁、移除一系列属性；
3.创建友机类、敌机类、子弹类，赋予其与Create一样的属性
4.给敌机类和子弹类添加移动操作前的属性，即给敌机和子弹加移动定时器，保证敌机和子弹的飞行（友机的飞行是通过键盘事件来触发的）；
5.创建游戏类，为其添加相关的属性方法；
6.给相关按钮添加点击事件
HTML代码部分
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞机大战title>
<script src="js/jquery-3.4.1.js">script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
head>
<body>
<div class="container">
<div class="buttonBox">
<button class="startBtn">开始游戏button>
<button class="resumeBtn">继续游戏button>
<button class="againBtn">重新开始button>
<div class="level">
<button class="easyBtn">简单难度button>
<button class="midBtn">中等难度button>
<button class="bigBtn">高级难度button>
div>
div>
<div class="scoreBox">
<div class="score">
<span>当前得分：span>
<span id="score">0span>
div>
<div class="mostScore">
<span>最高得分：span>
<span id="mostScore">0span>
div>
<div class="enemyNum">
<span>击落敌机：span>
<span id="enemyNum">0span>
div>
<div>
<div class="blood">友机血量：div>
<div class="bloodBar">
<div class="bar">div>
<div class="num">100%div>
div>
div>
div>
div>
<script type="text/javascript" src="js/index.js">script>
body>
html>
css代码部分
这部分是完成相关类的布局，就不多做解释了
*{
margin: 0;
padding: 0;
}
.container {
height: 580px;
width: 550px;
background-color: red;
margin: 3px 320px;
background: url(../images/background.png) no-repeat;
background-size: 550px 580px;
position: relative;
overflow: hidden;
}
.startBtn,.resumeBtn,.againBtn,.easyBtn,.midBtn,.bigBtn {
width: 300px;
height: 40px;
background-color: #fff;
border: 2px solid #767b7c;
border-radius: 50px;
font-size: 24px;
color: #5d5e5e;
font-weight: 700;
letter-spacing: 2px;
box-shadow: 0 0 1px 1px;
outline: none;
position: absolute;
top: 45%;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
z-index: 999;
}
.resumeBtn {
top: 230px;
display: none;
}
.againBtn {
top: 290px;
display: none;
}
.level {
display: none;
}
.easyBtn {
top: 200px;
}
.bigBtn {
top: 320px;
}
.scoreBox {
display: none;
}
.score,.mostScore,.enemyNum,.blood {
z-index: 999;
position: absolute;
top: 10px;
}
#score,#mostScore,#enemyNum {
font-weight: 700;
}
.score {
left: 110px;
}
.mostScore {
left: 300px;
}
.enemyNum {
top: 35px;
left: 110px;
}
.blood {
left: 300px;
top: 35px;
}
.bloodBar {
width: 100px;
height: 20px;
border: 1px solid #7d4040;
background-color: #f2eeee;
position: absolute;
top: 35px;
right: 63px;
}
.bar {
width: 100px;
height: 20px;
background-color: #c73535;
position: absolute;
}
.num {
width: 100px;
height: 20px;
text-align: center;
line-height: 21px;
color: #221b1d;
position: absolute;
}
.myPlane {
width: 60px;
height: 60px;
background: url(../images/me.png) no-repeat;
background-size: 60px 60px;
transition: background .5s ease;
position: absolute;
}
.enemyPlane_1 {
width: 57px;
height: 43px;
background: url(../images/enemy1.png) no-repeat;
position: absolute;
}
.enemyPlane_2 {
width: 69px;
height: 99px;
background: url(../images/enemy2.png) no-repeat;
position: absolute;
}
.enemyPlane_3 {
width: 165px;
height: 261px;
background: url(../images/enemy3.png) no-repeat;
position: absolute;
}
.bullet {
width: 5px;
height: 11px;
background: url(../images/bullet.png) no-repeat;
position: absolute;
}
接下来就是游戏的js文件，也就是核心代码
jQuery代码部分
$(document).ready(function(){
// 设置公共变量
var myPlane = null,
enemyPlane = [],
bullet = [],
game = null,
score = 0,
mostScore = localStorage.getItem('plane-score');
// 页面刚加载时获取本地最高得分记录
if(mostScore == null){
$("#mostScore").text("0");
}else {
$("#mostScore").text(mostScore);
}
// 创建一个公共类，用于创造飞机div元素和子弹div元素
// type中，1表示友机类型，2表示敌机类型1，3表示敌机类型2，4表示敌机类型3，5表示子弹类型
function Create(hp,offset,className,speed,type){
this.hp = hp; // 血量
this.offset = offset; // 位置
this.className = className; // 类名
this.speed = speed; // 速度
this.type = type; // 类型
}
// 构造方法
Create.prototype.init = function(){
this.createDOM.call(this);
};
// 创建div元素并加入页面
Create.prototype.createDOM = function(){
this.newDiv = $("");
this.newDiv.addClass(this.className);
$(".container").append(this.newDiv);
// 给新创建的div元素定位
this.newDiv.css({
"top": this.offset.y + "px",
"left": this.offset.x + "px"
});
};
// 飞机和子弹移动的方法
Create.prototype.move = function(){
var self = this;
// 友机移动操作
if(this.type == 1){
// 通过键盘事件来控制友机的位置
document.onkeydown = function(e){
// 通过判断确保友机在游戏界面内移动
switch(e.keyCode){
case 37:
if(self.offset.x >= 10)
self.offset.x -= self.speed;
break;
case 38:
if(self.offset.y >= 10)
self.offset.y -= self.speed;
break;
case 39:
if(self.offset.x <= 480)
self.offset.x += self.speed;
break;
case 40:
if(self.offset.y <= 510)
self.offset.y += self.speed;
break;
}
self.newDiv.css({
"left": self.offset.x + "px",
"top": self.offset.y + "px"
});
}
}
// 敌机移动操作
else if(this.type == 2 || this.type == 3 || this.type == 4){
if(self.offset.y <= 580){
self.offset.y += self.speed;
self.newDiv.css("top" , self.offset.y + "px");
}else { // 超出游戏界面则移除敌机的DOM元素
self.removeDOM();
}
}
else if(this.type == 5){
if(self.offset.y >= 11){ // 子弹在界面内
self.offset.y -= self.speed;
self.newDiv.css("top" , self.offset.y + "px");
}else { // 子弹超出界面时立即移除子弹DOM元素
self.removeDOM();
}
}
};
// 飞机和子弹销毁的方法
Create.prototype.destroy =function(){
this.hp --; // 血量减一
if(this.type == 1){
var blood = this.hp;
// 设置友机血条
$(".bar").css("width",blood + "px");
$(".num").text(blood + "%");
// 根据友机血量来改变飞机形态
switch(this.hp){
case 50: {
this.newDiv.css({
"background":"url(images/me_destroy_1.png) no-repeat",
"background-size":"60px 60px"
});
break;
};
case 20: {
this.newDiv.css({
"background":"url(images/me_destroy_2.png) no-repeat",
"background-size":"60px 60px"
});
break;
};
case 10: {
this.newDiv.css({
"background":"url(images/me_destroy_3.png) no-repeat",
"background-size":"60px 60px"
});
break;
};
// 友机血量为0，游戏结束，输出成绩，清除游戏对象中的定时器，移除友机的DOM元素
case 0: {
this.newDiv.css({
"background":"url(images/me_destroy_3.png) no-repeat",
"background-size":"60px 60px"
});
clearInterval(game.timer1);
clearInterval(game.timer2);
clearInterval(game.timer3);
clearInterval(game.timer4);
alert("游戏结束，您一共击落的敌机数为： " + game.enemyNum +
" , 您的本局得分为：" + score + " , 最高得分为：" + mostScore);
$(".againBtn").show();
return this.removeDOM();
}
}
}else if(this.type == 2){
switch(this.hp){
case 3: this.newDiv.css("background","url(images/enemy1_down1.png) no-repeat");break;
case 2: this.newDiv.css("background","url(images/enemy1_down2.png) no-repeat");break;
case 1: this.newDiv.css("background","url(images/enemy1_down3.png) no-repeat");break;
case 0: {
this.newDiv.css("background","url(images/enemy1_down4.png) no-repeat");
game.enemyNum++; // 敌机血量为0，击落数+1
$("#enemyNum").text(game.enemyNum);
clearInterval(this.timer); // 及时清除被击落的敌机的定时器
return this.removeDOM();
}
}
}else if(this.type == 3){
switch(this.hp){
case 15: this.newDiv.css("background","url(images/enemy2_down1.png) no-repeat");break;
case 10: this.newDiv.css("background","url(images/enemy2_down2.png) no-repeat");break;
case 5: this.newDiv.css("background","url(images/enemy2_down3.png) no-repeat");break;
case 0: {
this.newDiv.css("background","url(images/enemy2_down4.png) no-repeat");
game.enemyNum++;
$("#enemyNum").text(game.enemyNum);
clearInterval(this.timer);
return this.removeDOM();
}
}
}else if(this.type == 4){
switch(this.hp){
case 40: this.newDiv.css("background","url(images/enemy3_down1.png) no-repeat");break;
case 30: this.newDiv.css("background","url(images/enemy3_down2.png) no-repeat");break;
case 20: this.newDiv.css("background","url(images/enemy3_down3.png) no-repeat");break;
case 10: this.newDiv.css("background","url(images/enemy3_down4.png) no-repeat");break;
case 1: this.newDiv.css("background","url(images/enemy3_down5.png) no-repeat");break;
case 0: {
this.newDiv.css("background","url(images/enemy3_down6.png) no-repeat");
game.enemyNum++;
$("#enemyNum").text(game.enemyNum);
clearInterval(this.timer);
return this.removeDOM();
}
}
}else if(this.type == 5 && this.hp == 0){
clearInterval(this.timer);
return this.removeDOM();
}
};
// 移除DOM元素
Create.prototype.removeDOM = function(){
this.newDiv.remove();
};
// 创建友机类，并且赋予Create类的属性
function MyPlane(hp,offset,className,speed,type){
Create.call(this,hp,offset,className,speed,type);
};
MyPlane.prototype = Create.prototype;
// 创建友机类，并且赋予Create类的属性
function Enemy(hp,offset,className,speed,type){
Create.call(this,hp,offset,className,speed,type);
}
Enemy.prototype = Create.prototype;
// 敌机移动前的操作
Enemy.prototype.moveBefore =function(){
var self = this;
// 创建敌机的移动定时器
this.timer = setInterval(function(){
if(!self) clearInterval(self.timer); // 敌机DOM不存在（即已被击落）
self.move(); // 根据定时器移动敌机
},200);
};
// 创建子弹类，并且赋予Create类的属性
function Bullet(hp,offset,className,speed,type){
Create.call(this,hp,offset,className,speed,type);
}
Bullet.prototype = Create.prototype;
// 子弹移动前的操作
Bullet.prototype.moveBefore =function(){
var self = this;
this.timer = setInterval(function(){
if(!self) clearInterval(self.timer);
self.move();
},50);
}
// 创建游戏类
function Game(){
this.timer1 = null; // 类型2（敌机类型1）
this.timer2 = null; // 类型3（敌机类型2）
this.timer3 = null; // 类型4（敌机类型3）
this.timer4 = null; // 类型5（子弹类型）
this.enemyNum = 0; // 击落敌机数量
this.level = 0; // 游戏难度：1表示简单，2表示中等，3表示困难
}
// 构造方法
Game.prototype.init = function(){
// hp,offset,className,speed,type
myPlane = new MyPlane(100,{x:240,y:400},"myPlane",10,1);
myPlane.init();
myPlane.move();
// 根据游戏难度创建敌机
switch(this.level){
case 1: this.easyLevel();break;
case 2: this.midLevel();break;
case 3: this.bigLevel();break;
}
this.timer4 = setInterval(function(){
// 根据友机位置创建子弹对象
bul = new Bullet(1,{x:myPlane.offset.x + 30,y:myPlane.offset.y - 5},"bullet",10,5);
bul.init();
bul.moveBefore();
bullet.push(bul); // 将子弹对象存入子弹数组
game.impact(); // 判断碰撞
},100);
};
// 简单模式
Game.prototype.easyLevel = function(){
this.timer1 = setInterval(function(){
left = Math.floor(Math.random() * 493); // 随机获取敌机左偏移量
enemy = new Enemy(5,{x:left,y:0},"enemyPlane_1",10,2);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy); // 将敌机对象存入敌机数组
},500);
this.timer2 = setInterval(function(){
left = Math.floor(Math.random() * 481);
enemy = new Enemy(30,{x:left,y:0},"enemyPlane_2",3,3);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy);
},10000);
this.timer3 = setInterval(function(){
left = Math.floor(Math.random() * 385);
enemy = new Enemy(50,{x:left,y:0},"enemyPlane_3",1,4);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy);
},30000);
};
// 中等模式
Game.prototype.midLevel = function(){
this.timer1 = setInterval(function(){
left = Math.floor(Math.random() * 493);
enemy = new Enemy(10,{x:left,y:0},"enemyPlane_1",10,2);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy);
},500);
this.timer2 = setInterval(function(){
left = Math.floor(Math.random() * 481);
enemy = new Enemy(40,{x:left,y:0},"enemyPlane_2",6,3);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy);
},10000);
this.timer3 = setInterval(function(){
left = Math.floor(Math.random() * 385);
enemy = new Enemy(80,{x:left,y:0},"enemyPlane_3",3,4);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy);
},30000);
};
// 困难模式
Game.prototype.bigLevel = function(){
this.timer1 = setInterval(function(){
left = Math.floor(Math.random() * 493);
enemy = new Enemy(15,{x:left,y:0},"enemyPlane_1",10,2);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy);
},500);
this.timer2 = setInterval(function(){
left = Math.floor(Math.random() * 481);
enemy = new Enemy(50,{x:left,y:0},"enemyPlane_2",8,3);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy);
},10000);
this.timer3 = setInterval(function(){
left = Math.floor(Math.random() * 385);
enemy = new Enemy(100,{x:left,y:0},"enemyPlane_3",5,4);
enemy.init();
enemy.moveBefore();
enemyPlane.push(enemy);
},30000);
};
// 游戏记分方法
Game.prototype.score = function(){
score++;
$("#score").text(score);
// 判断是否更新游戏最高分数
if(mostScore < score){
mostScore = score;
$("#mostScore").text(mostScore);
// 更新存储在本地的最高分数记录
var storage = window.localStorage;
storage.setItem('plane-score', mostScore);
var getVal = localStorage.getItem('plane-score');
if( getVal != null ){
localStorage.setItem('plane-score',mostScore);
}
}
};
// 游戏暂停时触发的事件（清除一切定时器）
Game.prototype.pause = function(){
clearInterval(game.timer1);
clearInterval(game.timer2);
clearInterval(game.timer3);
clearInterval(game.timer4);
enemyPlane.forEach(function(elem){
clearInterval(elem.timer);
});
bullet.forEach(function(elem){
clearInterval(elem.timer);
});
// 确保难度选择按钮和暂停按钮界面重合
if($(".level").css("display") == "none"){
$(".resumeBtn").show();
$(".againBtn").show();
}
};
// 游戏暂停时点击继续按钮触发的事件
Game.prototype.start = function(){
switch(this.level){
case 1: this.easyLevel();break;
case 2: this.midLevel();break;
case 3: this.bigLevel();break;
}
this.timer4 = setInterval(function(){
bul = new Bullet(1,{x:myPlane.offset.x + 30,y:myPlane.offset.y - 5},"bullet",10,5);
bul.init();
bul.moveBefore();
bullet.push(bul);
game.impact();
},100);
// 再次创建敌机和子弹的移动定时器
enemyPlane.forEach(function(elem){
elem.moveBefore();
});
bullet.forEach(function(elem){
elem.moveBefore();
});
if($(".level").css("display") == "none"){
$(".resumeBtn").hide();
$(".againBtn").hide();
}
};
// 清空游戏数据的方法
Game.prototype.clear = function(){
// 游戏开始前将友机，敌机，子弹的DOM元素移除，分数和击落敌机数清零，恢复友机血条
$(".myPlane").remove();
$(".bullet").remove();
$(".enemyPlane_1").remove();
$(".enemyPlane_2").remove();
$(".enemyPlane_3").remove();
$("#score").text("0");
$("#enemyNum").text("0");
$(".bar").css("width","100px");
$(".num").text("100%");
// 游戏开始前初始化相关变量
score = 0,myPlane = null,enemyPlane = [],bullet = [];
this.enemyNum = 0;
};
// 创建游戏的分数界面和血条界面
Game.prototype.create = function(){
$(".level").hide();
$(".scoreBox").show();
$(".bloodBar").show();
};
// 游戏判断碰撞的方法
Game.prototype.impact = function(){
var enemyLen = enemyPlane.length; // 敌机数组长度
var bulletLen = bullet.length; // 子弹数组长度
// 更新子弹数组：如果子弹超出游戏界面，移除数组中对应的元素，即
// 子弹数组中的对象都是游戏界面中的子弹
for(var i = 0;i < bulletLen;i++){
if(bullet[i].offset.y < 11){
bullet.splice(i,1);
bulletLen--;
}
}
for(var i = 0;i < enemyLen;i++){
// 更新敌机数组：如果敌机超出游戏界面，移除数组中对应的元素，即
// 敌机数组中的对象都是游戏界面中的敌机
if((enemyPlane[i].offset.y > 537 && enemyPlane[i].type == 2) ||
(enemyPlane[i].offset.y > 481 && enemyPlane[i].type == 3) ||
(enemyPlane[i].offset.y > 320 && enemyPlane[i].type == 4)){
enemyPlane.splice(i,1);
enemyLen--;
continue;
}
// 判断子弹与敌机是否发生碰撞
// 同时满足以下条件则碰撞：
// 子弹左偏移 > 敌机左偏移
// 子弹左偏移 < 敌机左偏移 + 敌机本身的宽度
// 子弹上偏移 > 敌机上偏移
// 子弹上偏移 < 敌机上偏移 + 敌机本身的高度
for(var j = 0;j < bulletLen;j++){
// 前两个条件是保险，最后一个>=10是确保敌机出现在游戏界面才能被子弹攻击
if(enemyPlane[i] && bullet[j] && enemyPlane[i].offset.y >= 10)
//子弹撞到敌机
if(bullet[j].offset.x > enemyPlane[i].offset.x &&
bullet[j].offset.x < enemyPlane[i].offset.x + enemyPlane[i].newDiv.width() &&
bullet[j].offset.y > enemyPlane[i].offset.y &&
bullet[j].offset.y < enemyPlane[i].offset.y + enemyPlane[i].newDiv.height()){
bullet[j].destroy(); // 判断是否销毁子弹
enemyPlane[i].destroy(); // 判断是否销毁敌机
// 由于子弹的血量只有1，所有一旦碰撞就要销毁，子弹数组中也要移除相应的对象
bullet.splice(j,1);
bulletLen--;
game.score(); // 碰撞1次加1分
// 敌机血量为0，敌机数组要移除相应的对象
if(enemyPlane[i].hp == 0){
enemyPlane.splice(i,1);
enemyLen--;
}
}
}
}
// 判断友机与敌机是否发生碰撞
// 同时满足以下条件则碰撞：
// 友机左偏移 > 敌机左偏移 - 友机本身的宽度
// 友机左偏移 < 敌机左偏移 + 敌机本身的宽度
// 友机上偏移 > 敌机上偏移 - 友机本身的高度
// 友机上偏移 < 敌机上偏移 + 敌机本身的高度
// 注意： 这里不在上面的for循环里面判断是因为避免碰撞检测失败。
// 如友机碰到的敌机数组中的0号元素，但i已经遍历到1了
for(var i = 0;i < enemyLen;i++){
// 敌机撞到本机
if(myPlane.offset.x > enemyPlane[i].offset.x - myPlane.newDiv.width() &&
myPlane.offset.x < enemyPlane[i].offset.x + enemyPlane[i].newDiv.width() &&
myPlane.offset.y > enemyPlane[i].offset.y - myPlane.newDiv.height() &&
myPlane.offset.y < enemyPlane[i].offset.y + enemyPlane[i].newDiv.height()){
myPlane.destroy();
}
}
};
// 点击开始按钮触发的事件
$(".startBtn").click(function(){
$(this).hide();
$(".level").show(); // 选择难度
game = new Game();
// 空格键控制游戏的暂停与继续
document.addEventListener("keydown",function(e){
if(e.keyCode == 32){
if($(".resumeBtn").css("display") == "block" &&
$(".againBtn").css("display") == "block"){
game.start();
}else if($(".resumeBtn").css("display") == "none" &&
$(".againBtn").css("display") == "none"){
fly.pause();
game.pause();
}
}
});
});
// 选择简单难度触发的事件
$(".easyBtn").click(function(){
game.clear();
game.level = 1;
game.init();
game.create();
});
// 选择中等难度触发的事件
$(".midBtn").click(function(){
game.clear();
game.level = 2;
game.init();
game.create();
});
// 选择高级难度触发的事件
$(".bigBtn").click(function(){
game.clear();
game.level = 3;
game.init();
game.create();
});
// 点击继续按钮触发的事件
$(".resumeBtn").click(function(){
game.start();
});
// 点击重新开始按钮触发的事件
$(".againBtn").click(function(){
if(confirm("您确定要重新开始游戏吗？") == true){
// 清除所有定时器
clearInterval(game.timer1);
clearInterval(game.timer2);
clearInterval(game.timer3);
clearInterval(game.timer4);
$(".level").show(); // 选择重新开始的难度
$(".resumeBtn").hide();
$(".againBtn").hide();
}
});
});
代码到这里就结束啦，下面是一些知识补充点
localStorage的定义和使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage 属性是只读的。
- 语法
if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
//第一种设置方式：
storage["a"]=1;
//第二种设置方式：
storage.b=1;
//第三种设置方式：
storage.setItem("c",3);
console.log(typeof storage["a"]); //打印出结果：String
console.log(typeof storage["b"]); //打印出结果：String
console.log(typeof storage["c"]); //打印出结果：String
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取（常用）
var c=storage.getItem("c");
console.log(c);
// 修改
var getVal = localStorage.getItem('myStorage');
if( getVal != null ){
localStorage.setItem('myStorage','setOk');
console.log('修改成功');
}else{
console.log('未找到myStorage, getVal返回值为 null');
}
// 删除
var getVal = localStorage.getItem('myStorage');
if( getVal != null ){
localStorage.removeItem('myStorage');
console.log('删除成功');
}else{
console.log('未找到myStorage，getVal返回值为 null');
}
// 将localStorage的所有内容清除
var storage=window.localStorage;
storage.clear();
console.log("删除成功");
}
-
localStorage 的优势
1、localStorage 拓展了 cookie 的 4K 限制。
2、localStorage 可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。 -
localStorage 的局限
1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
3、localStorage在浏览器的隐私模式下面是不可读取的。
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
5、localStorage不能被爬虫抓取到。
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。
splice()方法与slice()方法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
语法：
arrayObject.splice(index,howmany,item1,…,itemX)
| 参数 | 描述 |
|---|---|
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置 |
| howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目 |
| item1, …, itemX | 可选。向数组添加的新项目 |
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
注意：splice() 方法会直接对数组进行修改。
slice() 方法可从已有的数组中返回选定的元素。
语法：
arrayObject.slice(start,end)
| 参数 | 描述 |
|---|---|
| start | 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 |
| end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 |
slice方法返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。可使用负值从数组的尾部选取元素。如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
注意：slice()方法并不会修改数组，而是返回一个子数组。
Ending
由于对对象的理解还不够深入，加上很多知识点的迷糊以及生疏，这次写的飞机大战项目功能简单且存在诸多不足，代码也比较冗杂，有些地方处理的不合理。如若读者在阅读中发现我的错误或者需要改进的地方，欢迎指出，十分感谢！