这次加上了敌机的生命，分数，重新开始等功能的完善
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞机大战</title>
<style>
canvas{
border: 1px solid pink;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<canvas width="480" height="852" ></canvas>
<script>
// 0. 数据初始化
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
// 各个阶段
var ready = 0;
var loading = 1;
var running = 2;
var pause = 3;
var over = 4;
// 当前阶段
var state = ready;
// 生命值
var life = 3;
// 分数
var score = 0;
// 画布宽高
var width = 480;
var height = 853;
// 1.准备阶段
// 绘制动的背景图
var bg = new Image();
bg.src = 'img/background.png';
// bg.onload = function(){
// ctx.drawImage(bg,0,0,480,852);
// }
var bgParam = {
bg:bg,
x:0,
y:0,
width:480,
height:852
}
// 创建一个构造函数 ，用来实例化背景图对象
function Bg(param){
this.bg = param.bg;
this.x = param.x;
this.y = param.y;
this.width = param.width;
this.height = param.height;
// 交替图片坐标
this.y1 = -this.height;
// 绘制
this.paint = function(){
ctx.drawImage(this.bg,this.x,this.y,this.width,this.height);
ctx.drawImage(this.bg,this.x,this.y1,this.width,this.height);
}
// 运动
this.sport = function(){
this.y +=5;
this.y1 +=5;
if(this.y >= this.height){
this.y = -this.height;
}
if(this.y1 >= this.height){
this.y1 = -this.height;
}
}
}
var bgObj = new Bg(bgParam);
// 2.绘制logo
var logo = new Image();
logo.src = 'img/start.png';
// var logoParam = {
// logo :logo,
// x:0,
// y:0,
// width:400,
// height:654
// }
// function Logo(param){
// this.logo = param.logo;
// this.x = param.x;
// this.y = param.y;
// this.width = param.width;
// this.height = param.height;
// this.paint = function(){
// ctx.drawImage(this.logo,this.x,this.y,this.width,this.height);
// }
// }
// var logoObj = new Logo(logoParam);
canvas.onclick = function(){
if(state === ready){
state = loading;
}
}
// 2.游戏加载阶段 loading
var imgArr = ['img/game_loading1.png','img/game_loading2.png','img/game_loading3.png','img/game_loading4.png']
var imgLoading = [];
for(var i = 0; i<imgArr.length;i++){
imgLoading[i] = new Image();
imgLoading[i].src = imgArr[i];
}
// 定义图片信息
var loadingParm = {
imgLoading:imgLoading,
width:186,
height:38
}
function Loading(param){
this.imgLoading = param.imgLoading;
this.width = param.width;
this.height = param.height;
this.x = 0;
this.y = height - param.height
// 定义图片下标
this.index = 0;
// 定义一个属性，用来判断定时器执行次数
this.time = 0;
this.paint = function(){
ctx.drawImage(this.imgLoading[this.index],this.x,this.y,this.width,this.height);
}
this.sport = function(){
this.time++;
if(this.time %5 == 0){
this.index ++;
if(this.index === this.imgLoading.length){
// 绘制图片超过整体数量时，进入下一阶段
state = running;
}
}
}
}
var loadingObj = new Loading(loadingParm)
// 3.开始游戏 running
// 自己
var heroArr = ['img/hero1.png','img/hero2.png','img/hero_blowup_n1.png','img/hero_blowup_n2.png','img/hero_blowup_n3.png','img/hero_blowup_n4.png']
var heroPlane = [];
for(var i = 0; i<heroArr.length;i++){
heroPlane[i] = new Image();
heroPlane[i].src = heroArr[i];
}
var heroParam = {
heroPlane:heroPlane,
width:99,
height:124
}
function Hero(param){
this.heroPlane = param.heroPlane;
this.width = param.width;
this.height = param.height;
this.x =width/2-this.width/2;
this.y = height - this.height;
this.index = 0;
this.down = false;
this.time = 0;
// 绘制
this.paint =function(){
ctx.drawImage(this.heroPlane[this.index],this.x,this.y,this.width,this.height);
}
this.sport = function(){
// 我方飞机被撞击了
// 1.我方飞机没有被撞击
if(!this.down){
if(this.index === 0){
this.index = 1;
}else{
this.index = 0;
}
}else{
// 2.我方飞机被撞击了
this.index ++;
if(this.index === this.heroPlane.length){
life --;
if(life == 0){
state = over;
this.index = this.heroPlane.length - 1;
}else{
heroObj = new Hero(heroParam);
}
}
}
}
this.shoot = function(){
this.time ++;
if(this.time % 10 ===0){
bullets.push(new Bullet(bulletParam));
}
}
}
var heroObj = new Hero(heroParam);
// 飞机跟着鼠标移动
canvas.onmousemove = function(e){
if(state === running){
heroObj.x = e.offsetX-heroObj.width/2;
heroObj.y = e.offsetY-heroObj.height/2;
}
}
// 3.2子弹
// 3.2.1 创建子弹图片
var bullet = new Image();
bullet.src = 'img/bullet1.png'
var bulletParam = {
bullet:bullet,
width:9,
height:21
}
function Bullet(param){
this.bullet = param.bullet;
this.width = param.width;
this.height = param.height;
this.x = heroObj.x + heroObj.width/2 - this.width/2;
this.y = heroObj.y - this.height -10;
// 判断子弹是否碰撞到了敌机
this.down = false;
// 绘制
this.paint = function(){
ctx.drawImage(this.bullet,this.x,this.y,this.width,this.height);
}
// 运动
this.sport = function(){
this.y -= 25
}
}
// 存储子弹
var bullets = [];
// 绘制子弹
function bulletsPaint(){
for(var i = 0;i<bullets.length ;i++){
bullets[i].paint();
}
}
function bulletsSport(){
for(var i = 0;i<bullets.length ;i++){
bullets[i].sport();
}
}
// 删除子弹
// 1.子弹飞出屏幕外面
// 2.子弹碰到敌机
function bulletsDelete(){
for(var i =0; i<bullets.length;i++){
if(bullets[i].y < -this.height || bullets[i].down){
bullets.splice(i, 1)
}
}
}
// 3.3敌方飞机
// 3.3.1 小号飞机
var enemy1Arr = ['img/enemy1.png','img/enemy1_down1.png','img/enemy1_down2.png','img/enemy1_down3.png','img/enemy1_down4.png']
var enemyPlane = [];
for(var i =0; i<enemy1Arr.length ; i++){
enemyPlane[i] = new Image();
enemyPlane[i].src = enemy1Arr[i];
}
// 3.3.2 中号飞机
var enemy2Arr = ['img/enemy2.png','img/enemy2_down1.png','img/enemy2_down2.png','img/enemy2_down3.png','img/enemy2_down4.png']
var enemy2Plane = [];
for(var i =0; i<enemy2Arr.length ; i++){
enemy2Plane[i] = new Image();
enemy2Plane[i].src = enemy2Arr[i];
}
// 3.3.3 大号飞机
var enemy3Arr = ['img/enemy3_n1.png','img/enemy3_n2.png','img/enemy3_hit.png','img/enemy3_down1.png','img/enemy3_down2.png','img/enemy3_down3.png','img/enemy3_down4.png','img/enemy3_down5.png','img/enemy3_down6.png']
var enemy3Plane = [];
for(var i =0; i<enemy3Arr.length ; i++){
enemy3Plane[i] = new Image();
enemy3Plane[i].src = enemy3Arr[i];
}
// 小号飞机信息
var enemy1 = {
enemyPlane:enemyPlane,
width:57,
height:51,
score:3,
lif:1
}
// 中号飞机信息
var enemy2 = {
enemyPlane:enemy2Plane,
width:69,
height:95,
score:5,
lif:2
}
// 大号飞机信息
var enemy3 = {
enemyPlane:enemy3Plane,
width:165,
height:261,
score:10,
lif:3
}
// 敌机的构造函数
function Enemy(param){
this.enemyPlane = param.enemyPlane;
this.width = param.width;
this.height = param.height;
this.score = param.score;
this.lif = param.lif;
this.x = Math.random()*(width - this.width);
this.y = - this.height;
this.index = 0;
this.down = false;
this.bang = false;
this.paint = function(){
ctx.drawImage(this.enemyPlane[this.index],this.x,this.y,this.width,this.height);
}
this.sport = function(){
if(!this.down){
// 当前敌机未被碰撞时
this.y += 4;
}else{
this.index ++;
if(this.index === this.enemyPlane.length){
this.index = this.enemyPlane.length-1;
this.bang = true;
}
}
}
// 判断是否被碰撞
this.hit = function(obj){
return obj.x +obj.width >this.x && obj.x <= this.x +this.width && obj.y<= this.y +this.height && obj.y
}
}
var a = new Enemy(enemy1);
var b = new Enemy(enemy2);
var c = new Enemy(enemy3);
//
var enemies = [];
var kk =0;
function pushEnemy(){
kk++;
if(kk % 10 ==0){
var random = Math.random();
if(random <0.4){
enemies.push(new Enemy(enemy1));
}else if(random < 0.8){
// 中号飞机
enemies.push(new Enemy(enemy2));
}else{
enemies.push(new Enemy(enemy3));
}
}
}
// 绘制飞机和运动
function enemyPaint(){
for(var i =0;i<enemies.length;i++){
enemies[i].paint();
}
}
function enemy2Paint(){
for(var i =0;i<enemies.length;i++){
enemies[i].sport();
}
}
function enemyDelete(){
for(var i = 0;i<enemies.length;i++){
if(enemies[i].y >= height || enemies[i].bang){
enemies.splice(i,1);
}
}
}
// 如何检测敌机被子弹碰撞
function checkHit(){
for(var i =0;i<enemies.length;i++){
for(var j = 0 ; j<bullets.length;j++){
if(enemies[i].hit(bullets[j])){
enemies[i].lif--;
if(enemies[i].lif <=0){
if(enemies[i].score == 3){
score += 3;
}else if(enemies[i].score == 5){
score += 5;
}else{
score +=10;
}
enemies[i].down = true;
}
bullets[j].down = true;
}
}
// 敌机和hero
if(enemies[i].hit(heroObj)){
enemies[i].down = true;
heroObj.down = true;
}
}
}
function scoreText() {
ctx.font = "30px bold"
ctx.fillText("score:" + score, 10, 30);
ctx.fillText("life:" + life, 300, 30);
};
// 游戏暂停的阶段
canvas.onmouseout = function() {
if (state === running) {
state = pause;
}
};
canvas.onmouseover = function() {
if (state === pause) {
state = running;
}
};
function geamove(){
ctx.font = "40px bold";
ctx.fillText("游戏结束",160,400);
state = over;
}
function gg(){
if(state == over){
ctx.font = "40px bold";
ctx.fillText("重新开始",160,440);
state = over;
}
canvas.ondblclick = function(){
if(state == over){
state = running;
life = 4;
score = 0;
}
}
}
// 定时器
var timer = setInterval(function(){
bgObj.paint();
bgObj.sport();
if(state == ready){
ctx.drawImage(logo,0,0,480,852);
}else if(state === loading){
loadingObj.paint();
loadingObj.sport();
}else if(state === running){
// heroObj.paint();
heroObj.paint();
heroObj.sport();
heroObj.shoot();
// 绘制子弹
bulletsPaint();
bulletsSport();
// 敌方飞机
pushEnemy();
enemyPaint();
enemy2Paint();
checkHit();
enemyDelete();
bulletsDelete();
scoreText();
}else if(state === over){
heroObj.paint();
geamove();
gg();
}else if(state == pause){
bgObj.paint();
bgObj.sport();
heroObj.paint();
bulletsPaint();
enemyPaint();
scoreText();
}
},60)
</script>
</body>
</html>