HTML飞机大战代码(可保存本地html运行)--688IT编程网

HTML飞机⼤战代码（可保存本地html运⾏）

<!DOCTYPE html>

<html>

<head>

<title>HTML5版本的飞机⼤战</title>

</head>

<body>

</div>

<div >QWE切换飞机 ZXC切换⼦弹</div>

// 0 游戏的初始化阶段

// 01 获取<canvas>元素，并且创建画布对象

var canvas = ElementById("canvas");

var context = Context("2d");

// 02 获取<canvas>元素的⾼度和宽度

const WIDTH = canvas.width;

const HEIGHT = canvas.height;

// 03 定义表⽰游戏的5个阶段的标识

const START = 0;

const STARTTING = 1;

const RUNNING = 2;

const PAUSED = 3;

const GAMEOVER = 4;

// 04 定义表⽰游戏当前阶段的变量

var state = 0;

// 05 定义表⽰游戏得分的变量

var score = 0;

// 06 定义表⽰游戏的⽣命值

var life = 3;

// 1 完成游戏的开始阶段

/ 11 绘制游戏的背景图⽚

// 111 加载背景图⽚

var bg = new Image();

bg.src = "www.lxstly.sgzlkj/images2/background.jpg";

// 112 初始化相关数据 - 来源于服务器端

var BG = {

imgs : bg,//表⽰图⽚内容

width : 512,

height : 768

}

// 113 定义背景图⽚的构造器 - 封装

function Bg(config){

// a. 接收初始化的数据

this.imgs = config.imgs;

this.width = config.width;

this.height = config.height;

// 将2张图⽚的y值定义为变量

this.y1 = 0;

this.y2 = -this.height;

// b. 定义绘制⽅法

this.paint = function(cxt){

cxt.drawImage(this.imgs,0,this.y1);

cxt.drawImage(this.imgs,0,this.y2);

}

// c. 定义动画⽅法

this.step = function(){

// 向下移动

this.y1+=2;

this.y2+=2;

// 判断边界

if(this.y2 == 0){

this.y1 = -this.height;

}

if(this.y1 == 0){

this.y2 = -this.height;

}

// 114 创建背景对象

var backg = new Bg(BG);

// 115 加载游戏LOGO图⽚

var logo = new Image();

logo.src = "www.lxstly.sgzlkj/images2/start.png";

// 从 1 到 2 过渡

// 判断当前状态为 START 时，修改为 STARTTINT

if(state == START){

state = STARTTING;

}

// 2 完成游戏的动画过渡阶段

// 21 加载动画图⽚

var loadings = [];

loadings[0]=new Image();

loadings[0].src="www.lxstly.sgzlkj/images2/hero4.png" loadings[1]=new Image();

loadings[1].src="www.lxstly.sgzlkj/images2/hero5.png" loadings[2]=new Image();

loadings[2].src="www.lxstly.sgzlkj/images2/hero6.png" loadings[3]=new Image();

loadings[3].src="www.lxstly.sgzlkj/images2/hero7.png" loadings[4]=new Image();

loadings[4].src="www.lxstly.sgzlkj/images2/hero8.png" // 22 初始化必要数据

var LOADING = {

imgs : loadings,

width : 79,

height : 400,

sum : loadings.length

}

// 23 定义动画图⽚构造器

function Loading(config){

this.imgs = config.imgs;

this.width = config.width;

this.height = config.height;

this.sum = config.sum;

// 定义图⽚数组的索引值

this.frameIndex = 0;

// 绘制⽅法

this.paint = function(cxt){

cxt.drawImage(this.imgs[this.frameIndex],(WIDTH-this.width)/2,HEIGHT-this.height); }

// 定义表⽰相对速度的变量

this.speed = 0;

// 动画⽅法

this.step = function(){

this.speed++;

if(this.speed%6 == 0){

this.frameIndex++;

}

if(this.frameIndex == 5){

state = RUNNING;

}

// 24 创建动画对象

var loading = new Loading(LOADING);

// 3 完成游戏的运⾏阶段

// 31 完成我⽅飞机相关功能

// 311 加载我⽅飞机的图⽚

var heros=[];

heros[0]=new Image();

heros[0].src="www.lxstly.sgzlkj/images2/hero1.png"

heros[1]=new Image();

heros[1].src="www.lxstly.sgzlkj/images2/hero2.png"

heros[2]=new Image();

heros[2].src="www.lxstly.sgzlkj/images2/hero3.png"

heros[3] = new Image();

heros[3].src = "www.lxstly.sgzlkj/images/hero_blowup_n1.png";

heros[4] = new Image();

heros[4].src = "www.lxstly.sgzlkj/images/hero_blowup_n2.png";

heros[5] = new Image();

heros[5].src = "www.lxstly.sgzlkj/images/hero_blowup_n3.png";

heros[6] = new Image();

heros[6].src = "www.lxstly.sgzlkj/images/hero_blowup_n4.png";

// 312 初始化必要的数据

var HERO = {

imgs : heros,

width : 80,

height : 81,

sum : heros.length,

life:20

}

// 313 创建我⽅飞机的构造器

function Hero(config){

this.imgs = config.imgs;

this.width = config.width;

this.height = config.height;

this.sum = config.sum;

// 定义图⽚数组的索引值

this.frameIndex = 0;

// 定义我⽅飞机的坐标值

this.x = (WIDTH-this.width)/2;

this.y = HEIGHT-this.height-30;

// 定义是否执⾏爆破动画的标识

this.down = false;

this.life=config.life;

// 绘制⽅法

this.paint = function(cxt){

cxt.drawImage(this.imgs[this.frameIndex],this.x,this.y); }

this.speed=0;

// 动画⽅法

this.step = function(){

if(this.down){//爆破动画

this.frameIndex++;

if(this.frameIndex == this.sum){

this.frameIndex = this.sum - 1;

life--;

if(life == 0){

state = GAMEOVER;

}else{

hero = new Hero(HERO);

}

}else{//切换动画

// this.frameIndex的值为0或1

// a. 分⽀结构 if..else..

/*if(this.frameIndex == 0){

this.frameIndex = 1;

}else{

this.frameIndex = 0;

}*/

// b. 三⽬运算

// c. 公式计算

this.speed++;

if(this.speed%2==0){

this.frameIndex++;

}

if(this.frameIndex==3){

this.frameIndex=0;

}

// 射击⽅法

this.shoot = function(){

bullets[bullets.length] = new Bullet(BULLET);

if(wudi==1||(score>=20&&score<100)){