飞机大战项目

今天来给大家讲一下飞机大战这个项目

首先，html页面中创建一个画布，然后就不用管html和CSS页面了

JS页面：

画布画笔肯定需要获取的

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

var START=0; /*加载*/
var STARTING = 1; /*加载中*/
var RUNNING = 2; /*游戏开始*/
var PAUSE = 3; /*暂停*/
var GAMEOVER = 4; /*结束*/

var start=START;
// 设置宽和高
var WIDTH=480;
var HEIGHT=650;
// 设置游戏得分
var score=0;
// 设置飞机生命值
var life = 5;

var img = new Image();
img.src = 'img/background.png';

var bg={
img:img,
width:480,
height:852
}

function Bg(unm){
this.width=unm.width;
this.height=unm.height;
this.Image=unm.img;
// 第一张图片的位置
this.x1=0;
this.y1=0;
// 第二张图片位置
this.x2=0;
this.y2=-this.height;
// 绘制的方法paint
this.paint=function(){
context.drawImage(this.Image,this.x1,this.y1);
context.drawImage(this.Image,this.x2,this.y2);
}
// 运动的方法step
this.step=function(){
this.y1++;
this.y2++;
if(this.y1==this.height){
this.y1=-this.height
}
if(this.y2==this.height){
this.y2=-this.height
}
}
}

// 创建背景对象
var sky=new Bg(bg);

 

这样的话这个背景图片就可以动了，前提是调用。调用在最后面

var log=new Image();
log.src="img/start.png";

var loading=[];
loading[0]=new Image;
loading[0].src="img/game_loading1.png"
loading[1]=new Image;
loading[1].src="img/game_loading2.png"
loading[2]=new Image;
loading[2].src="img/game_loading3.png"
loading[3]=new Image;
loading[3].src="img/game_loading4.png"

var Loading={
img:loading,
length:loading.length,
width:186,
height:38
}

function jz(ld){
this.img=ld.img;
this.length=ld.length;
this.width=ld.width;
this.height=ld.height;
// 定义一个索引,方面查找图片
this.starindex=0
// 绘制图片的方法paint
this.paint=function(){
context.drawImage(this.img[this.starindex],0,HEIGHT-this.height);
}
// 运动的方法step
this.time=0
this.step=function(){
this.time++
if(this.time%3==0){
this.starindex++}
if (this.starindex == this.length) {
start=RUNNING
}
}
}

var sky1=new jz(Loading);

 

 英雄登场阶段

canvas.onclick=function(){
if(start==START){
start=STARTING;
}
}

点击画面之后，开始游戏

var heros1 = [];
// 飞机未被撞击时的状态
heros1[0] = new Image;
heros1[0].src = "img/hero1.png";
heros1[1] = new Image;
heros1[1].src = "img/hero2.png";
// 飞机被撞击的状态
heros1[2] = new Image;
heros1[2].src = "img/hero_blowup_n1.png";
heros1[3] = new Image;
heros1[3].src = "img/hero_blowup_n2.png";
heros1[4] = new Image;
heros1[4].src = "img/hero_blowup_n3.png";
heros1[5] = new Image;
heros1[5].src = "img/hero_blowup_n4.png";

var heros = {
img: heros1,
length: heros1.length,
width: 99,
height: 124,
frame: 2 /*区分飞机是否碰撞的状态*/
}

function hero(her) {
this.img = her.img;
this.length = her.length;
this.width = her.width;
this.height = her.height;
this.frame = her.frame;
// 图片索引
this.starindex = 0;
// 飞机的位置
this.x = WIDTH / 2 - this.width / 2;
this.y = HEIGHT - 150
// 飞机是否被撞击
this.dash = false; /*飞机未被撞击*/
// 碰撞以后会产生动画 是否撞完了
this.candel = false;
// 撞击方法
this.bang = function() {
this.dash = true;
}
// 绘制飞机paint方法
this.paint = function() {
context.drawImage(this.img[this.starindex], this.x, this.y)
};
// 运动的方法
this.step = function() {
if(!this.dash) {
this.starindex++;
this.starindex = this.starindex % 2;
} else {
this.starindex++;
if(this.starindex == this.length) {
life--;
if(life == 0) {
start = GAMEOVER;
this.starindex = this.length - 1
} else {
sky2 = new hero(heros)
}
}
}
}
// 射击的方法
this.time = 0;
this.shoot = function() {
this.time++;
if(this.time % 3 == 0) {
bulled.push(new bulls(bull));
}
}
}

var sky2 = new hero(heros);

 

 

 

 

 

 这是我们的飞机运动的两个阶段，以及发射的子弹

canvas.onmousemove = function(event) {
var event = event || window.event;
if(start == RUNNING) {
// 获取鼠标在画布中的位置
var x = event.offsetX;
var y = event.offsetY;
sky2.x = x - sky2.width / 2
sky2.y = y - sky2.height / 2
}
}

鼠标移开画布之后，游戏暂停

var img1 = new Image();
img1.src = "img/bullet1.png";

var bull = {
img: img1,
width: 9,
height: 21
}

function bulls(bb) {
this.img = bb.img;
this.width = bb.width;
this.height = bb.height;
// 绘制坐标
this.x = sky2.x + sky2.width / 2 - this.width / 2;
this.y = sky2.y - this.height - 10;
// 绘制方法
this.paint = function() {
context.drawImage(this.img, this.x, this.y)
};
// 移动的方法
this.step = function() {
this.y -= 5;
};
// 碰撞属性
this.candel = false;
// 碰撞方法 改变碰撞属性
this.bang = function() {
this.candel = true;
}
}
var sky3 = new bulls(bull);

var bulled = [];

function suoyou() {
for(var i = 0; i < bulled.length; i++) {
bulled[i].paint();
}
}

function yidong() {
for(var i = 0; i < bulled.length; i++) {
bulled[i].step();
}
}

function qingchu() {
for(i = 0; i < bulled.length; i++) {
if(bulled[i].candel || bulled[i].y < -bulled[i].height) {
bulled.splice(i, 1)
}
}
}

发射子弹的方法

var enemy1 = []; /*小飞机*/
enemy1[0] = new Image();
enemy1[0].src = "img/enemy1.png";
enemy1[1] = new Image();
enemy1[1].src = "img/enemy1_down1.png";
enemy1[2] = new Image();
enemy1[2].src = "img/enemy1_down2.png";
enemy1[3] = new Image();
enemy1[3].src = "img/enemy1_down3.png";
enemy1[4] = new Image();
enemy1[4].src = "img/enemy1_down4.png";
var enemy2 = []; /*中飞机*/
enemy2[0] = new Image();
enemy2[0].src = "img/enemy2.png";
enemy2[1] = new Image();
enemy2[1].src = "img/enemy2_down1.png";
enemy2[2] = new Image();
enemy2[2].src = "img/enemy2_down2.png";
enemy2[3] = new Image();
enemy2[3].src = "img/enemy2_down3.png";
enemy2[4] = new Image();
enemy2[4].src = "img/enemy2_down4.png";
var enemy3 = []; /*大飞机*/
enemy3[0] = new Image();
enemy3[0].src = "img/enemy3_n1.png";
enemy3[1] = new Image();
enemy3[1].src = "img/enemy3_n2.png";
enemy3[2] = new Image();
enemy3[2].src = "img/enemy3_down1.png";
enemy3[3] = new Image();
enemy3[3].src = "img/enemy3_down2.png";
enemy3[4] = new Image();
enemy3[4].src = "img/enemy3_down3.png";
enemy3[5] = new Image();
enemy3[5].src = "img/enemy3_down4.png";
enemy3[6] = new Image();
enemy3[6].src = "img/enemy3_down5.png";
enemy3[7] = new Image();
enemy3[7].src = "img/enemy3_down6.png";

var Enemy1 = {/*小飞机*/
img: enemy1,
length: enemy1.length,
width: 57,
height: 51,
type: 1,
/*飞机类型 1是小飞机*/
frame: 1,
/*飞机的动态小中飞机为同一种*/
life: 1,
score: 100
}
var Enemy2 = {/*中飞机*/
img: enemy2,
length: enemy2.length,
width: 69,
height: 95,
type: 2,
frame: 1,
life: 5,
score: 300
}
var Enemy3 = {/*大飞机*/
img: enemy3,
length: enemy3.length,
width: 169,
height: 248,
type: 3,
frame: 2,
life: 20,
score: 15000
}

function dffj(df) {
this.img = df.img;
this.length = df.length;
this.width = df.width;
this.height = df.height;
this.type = df.type;
this.frame = df.frame;
this.life = df.life;
this.score = df.score;
// 敌方飞机的坐标
this.x = Math.random() * (WIDTH - this.width);
this.y = -this.length;
// 敌方飞机是否被撞击
this.down = false;
// 敌方飞机是否被删除
this.del = false;
// 敌方飞机的索引
this.startindex = 0;
// 敌方飞机的绘制的方法
this.paint = function() {
context.drawImage(this.img[this.startindex], this.x, this.y)
}
// 敌方飞机的运动方法
this.step = function() {
if(!this.down) {
this.startindex++;
// 小中飞机下标是0,大飞机是0和1之间切换
this.startindex = this.startindex % this.frame;
this.y++;
} else {
this.down = true;
this.startindex++;
if(this.startindex == this.length - 1) {
this.del = true; /*飞机被删除*/
this.startIndex = this.length - 1; /*飞机停留在最后一张图片*/
}
}
}

绘制敌机，分为大中小三个等级，下图为小飞机

 

 

 

 

 

 

 

 

 

 

// 碰撞造成数据的变化
this.bang = function() {
this.life--;
if(this.life == 0) {
this.down = true;
score += this.score;
}
}
// 判断是否碰撞
this.hit = function(unm) {
// 传参可以我方飞机也可以是子弹·数据
return this.height + this.y > unm.y && this.y < unm.y + unm.height &&
this.x + this.width > unm.x && this.x < unm.x + unm.width
}
}

var dfj = [];
// 将创造的敌方飞机的对象放入数组中
function enterEnemies() {
var rand = Math.floor(Math.random() * 100);
if(rand < 5) {
dfj.push(new dffj(Enemy1));
} else if(rand < 7) {
dfj.push(new dffj(Enemy2));
} else if(rand > 98) {
if (dfj&&dfj.length) {
if(dfj[0].type != 3 && dfj.length > 2) {
dfj.splice(0, 0, new dffj(Enemy3));
}
}

}
}

function sydj() {
for(var i = 0; i < dfj.length; i++) {
dfj[i].paint();
}
}

function djyd() {
for(var i = 0; i < dfj.length; i++) {
dfj[i].step();
}
}

function deldj() {
for(var i = 0; i < dfj.length; i++) {
if(dfj[i].del || dfj[i].y > HEIGHT) {
dfj.splice(i, 1);
}
}
}

击毁时飞机发生的变化（大飞机一样）

function hit() {
// 撞击的是我方飞机
for(var i = 0; i < dfj.length; i++) { //
if(dfj[i].hit(sky2)) {
dfj[i].bang();
sky2.bang();
}

// 撞击的是子弹
for(var j = 0; j < bulled.length; j++) {
if(dfj[i].hit(bulled[j])) {
bulled[j].bang();
dfj[i].bang();
}
}
}
}

// 飞机的生命值和得分
function paintText() {
context.font = "bold 24px Arial";
context.fillText("SCORE:" + score, 10, 30);
context.fillText("LIFE:" + life, 400, 30);
}
// 暂停
canvas.onmouseover = function() {
if(start == PAUSE) {
start = RUNNING;
}
}

canvas.onmouseout = function() {
if(start == RUNNING) {
start = PAUSE;
}
}
// 暂停图片
var pause = new Image();
pause.src = "img/game_pause_nor.png";
// 游戏结束的方法
function gameover() {
context.font = "bold 50px Arial";
context.fillText("GAME OVER", 90, 300)
}

 

最后，调用前面需要的方法，来运行飞机大战游戏

setInterval(function(){
sky.paint();
sky.step();
switch (start){
case START:
context.drawImage(log,0,0,WIDTH,HEIGHT);
break;

case STARTING:
sky1.paint();
sky1.step();
break;

case RUNNING:
sky2.paint();
sky2.step();
sky2.shoot();

sky3.paint();
sky3.step();

suoyou();
yidong();
qingchu();

paintText()
enterEnemies()
sydj();
djyd();
deldj();

hit();
break;

case PAUSE:
context.drawImage(pause,WIDTH/2-pause.width/2,HEIGHT/2-pause.height/2,
pause.width,pause.height);
break;

case GAMEOVER:
gameover();
break;
}
},10)

 

好了，飞机大战完成，可以开始玩啦！！