HTML 飞机大战代码(可保存本地html运行)

最新推荐文章于 2024-07-27 06:59:09 发布
最新推荐文章于 2024-07-27 06:59:09 发布
阅读量2w 收藏 41
点赞数 16
分类专栏： Html5
<!DOCTYPE html>
<html>
 <head>
  <title>HTML5版本的飞机大战</title>
  <meta charset="utf-8" />
 </head>


 <body>
  <!-- 定义<div>元素,作为容器 -->
  <div style="margin:0 auto;width:512px; height:768px;background:#323232; text-align:center;vertical-align:middle">
<canvas id="canvas" width="512px" height="768px"></canvas>
  </div>
<div style="margin-left: 43%">QWE切换飞机&nbsp;&nbsp;&nbsp;ZXC切换子弹</div>
  <script>
// 0 游戏的初始化阶段
// 01 获取<canvas>元素,并且创建画布对象
var canvas = document.getElementById("canvas");
var context = canvas.getContext("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 = "http://www.lxstly.sgzlkj.com/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 = "http://www.lxstly.sgzlkj.com/images2/start.png";


// 从 1 到 2 过渡
canvas.onclick = function(){
// 判断当前状态为 START 时,修改为 STARTTINT
if(state == START){
state = STARTTING;
}
}


// 2 完成游戏的动画过渡阶段
// 21 加载动画图片
var loadings = [];
loadings[0]=new Image();
loadings[0].src="http://www.lxstly.sgzlkj.com/images2/hero4.png"
loadings[1]=new Image();
loadings[1].src="http://www.lxstly.sgzlkj.com/images2/hero5.png"
loadings[2]=new Image();
loadings[2].src="http://www.lxstly.sgzlkj.com/images2/hero6.png"
loadings[3]=new Image();
loadings[3].src="http://www.lxstly.sgzlkj.com/images2/hero7.png"
loadings[4]=new Image();
loadings[4].src="http://www.lxstly.sgzlkj.com/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="http://www.lxstly.sgzlkj.com/images2/hero1.png"
heros[1]=new Image();
heros[1].src="http://www.lxstly.sgzlkj.com/images2/hero2.png"
heros[2]=new Image();
heros[2].src="http://www.lxstly.sgzlkj.com/images2/hero3.png"
heros[3] = new Image();
heros[3].src = "http://www.lxstly.sgzlkj.com/images/hero_blowup_n1.png";
heros[4] = new Image();
heros[4].src = "http://www.lxstly.sgzlkj.com/images/hero_blowup_n2.png";
heros[5] = new Image();
heros[5].src = "http://www.lxstly.sgzlkj.com/images/hero_blowup_n3.png";
heros[6] = new Image();
heros[6].src = "http://www.lxstly.sgzlkj.com/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)){
bullets2[bullets2.length] = new Bullet2(BULLET2);
}else if(wudi==2||(score>=100&&score<150)){
bullets2[bullets2.length] = new Bullet2(BULLET2);
bullets3[bullets3.length] = new Bullet3(BULLET3);
}
else if(wudi==3||(score>=150&&score<200)){
bullets2[bullets2.length] = new Bullet2(BULLET2);
bullets3[bullets3.length] = new Bullet3(BULLET3);
bullets4[bullets4.length] = new Bullet4(BULLET4);
}else if(wudi==4||(score>=200&&score<250)){
bullets2[bullets2.length] = new Bullet2(BULLET2);
bullets3[bullets3.length] = new Bullet3(BULLET3);
bullets4[bullets4.length] = new Bullet4(BULLET4);
bullets5[bullets5.length] = new Bullet5(BULLET5);
}else if(wudi==5||(score>=250&&score<300)){
bullets2[bullets2.length] = new Bullet2(BULLET2);
bullets3[bullets3.length] = new Bullet3(BULLET3);
bullets4[bullets4.length] = new Bullet4(BULLET4);
bullets5[bullets5.length] = new Bullet5(BULLET5);
bullets6[bullets6.length] = new Bullet6(BULLET6);
}else if(wudi==6||score>=300){
bullets2[bullets2.length] = new Bullet2(BULLET2);
bullets3[bullets3.length] = new Bullet3(BULLET3);
bullets4[bullets4.length] = new Bullet4(BULLET4);
bullets5[bullets5.length] = new Bullet5(BULLET5);
bullets6[bullets6.length] = new Bullet6(BULLET6);
bullets7[bullets7.length] = new Bullet7(BULLET7);
}else if(wudi==7){
wudi=0;
}

}
// 撞击后的方法
this.canDown = function(){
this.life--;
if(this.life==0){
this.down = true;//表示执行爆破动画
this.frameIndex = 2;
}//动画图片切换到爆破
}
}
// 314 创建我方飞机对象
var hero = new Hero(HERO);
// 315 为<canvas>元素绑定mousemove事件
canvas.onmousemove = function(event){
if(state == RUNNING){
// a. 鼠标坐标值:pageX|clientX|offsetX|x
// b. 根据鼠标当前坐标值,修改hero的坐标值
hero.x = event.offsetX - hero.width/2;
hero.y = event.offsetY - hero.height/2;
}
}


// 32 完成子弹的功能
// 321 加载子弹图片
var bullet = new Image();
bullet.src = "http://www.lxstly.sgzlkj.com/images2/bullet2.png";

var bullet2 = new Image();
bullet2.src = "http://www.lxstly.sgzlkj.com/images2/bullet2.png";


var bullet3 = new Image();
bullet3.src = "http://www.lxstly.sgzlkj.com/images2/bullet2.png";


var bullet4 = new Image();
bullet4.src = "http://www.lxstly.sgzlkj.com/images2/bullet2.png";


var bullet5 = new Image();
bullet5.src = "http://www.lxstly.sgzlkj.com/images2/bullet2.png";


var bullet6 = new Image();
bullet6.src = "http://www.lxstly.sgzlkj.com/images2/bb.png";


var bullet7 = new Image();
bullet7.src = "http://www.lxstly.sgzlkj.com/images2/bullet2.png";
// 322 初始化必要数据
var BULLET = {
imgs : bullet,
width : 11,
height : 25
}


var BULLET2 = {
imgs : bullet2,
width : 11,
height : 25
}


var BULLET3 = {
imgs : bullet3,
width : 11,
height : 25
}
var BULLET4 = {
imgs : bullet4,
width : 11,
height : 25
}
var BULLET5 = {
imgs : bullet5,
width : 11,
height : 25
}
var BULLET6 = {
imgs : bullet6,
width : 36,
height : 33
}
var BULLET7 = {
imgs : bullet7,
width : 11,
height : 25
}
var wudi=0;
var dj=0;
var speed2=0;
// 323 定义子弹的构造器
function Bullet(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定义子弹的坐标值
this.x = hero.x + hero.width/2 - this.width/2-1;
this.y = hero.y - this.height - 5;
// 定义是否允许删除子弹的标识
this.del = false;
// 绘制方法
this.paint = function(cxt){
cxt.drawImage(this.imgs,this.x,this.y);
}


// 移动方法
this.step = function(){

this.y -=25//150*Math.cos((Math.PI/8)*speed2);
}

}


function Bullet2(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定义子弹的坐标值

this.x1 = hero.x + hero.width/2 - this.width-20;
this.y1 = hero.y - this.height +10;

// 定义是否允许删除子弹的标识
this.del2 = false;
// 绘制方法

this.paint2 = function(cxt){
cxt.drawImage(this.imgs,this.x1,this.y1);
}


// 移动方法

this.step2 = function(){
this.y1 -=25;

}

}




function Bullet3(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定义子弹的坐标值

this.x2 = hero.x + hero.width/2 - this.width+30;
this.y2 = hero.y - this.height +10;

// 定义是否允许删除子弹的标识
this.del3 = false;
// 绘制方法

this.paint3 = function(cxt){
cxt.drawImage(this.imgs,this.x2,this.y2);
}


// 移动方法

this.step3 = function(){
this.y2 -=25;

}

}
function Bullet4(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定义子弹的坐标值

this.x3 = hero.x + hero.width/2 - this.width-3;
this.y3 = hero.y - this.height +10;

// 定义是否允许删除子弹的标识
this.del4 = false;
// 绘制方法

this.paint4 = function(cxt){
cxt.drawImage(this.imgs,this.x3,this.y3);
}


// 移动方法

this.step4 = function(){
this.y3 -=25;


}

}
function Bullet5(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定义子弹的坐标值

this.x4 = hero.x + hero.width/2 - this.width+15;
this.y4 = hero.y - this.height +10;

// 定义是否允许删除子弹的标识
this.del5 = false;
// 绘制方法

this.paint5 = function(cxt){
cxt.drawImage(this.imgs,this.x4,this.y4);
}


// 移动方法

this.step5 = function(){
this.y4 -=25;

}

}


function Bullet6(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定义子弹的坐标值

this.x5 = hero.x + hero.width/2 - this.width-80;
this.y5 = hero.y - this.height +10;

// 定义是否允许删除子弹的标识
this.del6 = false;
// 绘制方法

this.paint6 = function(cxt){
cxt.drawImage(this.imgs,this.x5,this.y5);
}


// 移动方法

this.step6 = function(){
this.y5 -=25;
this.x5-=20;


}

}
function Bullet7(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定义子弹的坐标值

this.x6 = hero.x + hero.width/2 - this.width+80;
this.y6 = hero.y - this.height +10;

// 定义是否允许删除子弹的标识
this.del7 = false;
// 绘制方法

this.paint7 = function(cxt){
cxt.drawImage(this.imgs,this.x6,this.y6);
}


// 移动方法

this.step7 = function(){
this.y6 -=25;
this.x6-=-20;

}

}












// 324 创建存储子弹的数组
var bullets = [];
var bullets2 = [];
var bullets3 = [];
var bullets4 = [];
var bullets5 = [];
var bullets6 = [];
var bullets7 = [];



// 325 定义绘制所有子弹的函数
function paintBullets(){
for(var i=0;i<bullets.length;i++){
bullets[i].paint(context);
}
for(var k=0;k<bullets2.length;k++){

bullets2[k].paint2(context);

}
for(var l=0;l<bullets3.length;l++){

bullets3[l].paint3(context);

}
for(var m=0;m<bullets4.length;m++){

bullets4[m].paint4(context);

}
for(var n=0;n<bullets5.length;n++){

bullets5[n].paint5(context);

}
for(var u=0;u<bullets6.length;u++){

bullets6[u].paint6(context);

}
for(var p=0;p<bullets7.length;p++){

bullets7[p].paint7(context);

}
}
// 326 定义移动所有子弹的函数
function stepBullets(){
for(var i=0;i<bullets.length;i++){
bullets[i].step();
}
for(var k=0;k<bullets2.length;k++){
bullets2[k].step2();
}
for(var l=0;l<bullets3.length;l++){
bullets3[l].step3();
}
for(var m=0;m<bullets4.length;m++){

bullets4[m].step4();

}
for(var n=0;n<bullets5.length;n++){

bullets5[n].step5();

}
for(var u=0;u<bullets6.length;u++){

bullets6[u].step6();

}
for(var p=0;p<bullets7.length;p++){

bullets7[p].step7();

}
}
// 327 定义移除飞出画面子弹的函数
function delBullets(){
for(var i=0;i<bullets.length;i++){
if(bullets[i].y <= -bullets[i].height || bullets[i].del){
bullets.splice(i,1);
}

}
for(var k=0;k<bullets2.length;k++){
if(bullets2[k].y1 <= -bullets2[k].height || bullets2[k].del){
bullets2.splice(k,1);
}
}
for(var l=0;l<bullets3.length;l++){
if(bullets3[l].y2 <= -bullets3[l].height || bullets3[l].del){
bullets3.splice(l,1);
}
}
for(var m=0;m<bullets4.length;m++){
if(bullets4[m].y3 <= -bullets4[m].height || bullets4[m].del){
bullets4.splice(m,1);
}
}
for(var n=0;n<bullets5.length;n++){
if(bullets5[n].y4 <= -bullets5[n].height || bullets5[n].del){
bullets5.splice(n,1);
}
}
for(var u=0;u<bullets6.length;u++){
if(bullets6[u].y5 <= -bullets6[u].height || bullets6[u].del){
bullets6.splice(u,1);
}
}
for(var p=0;p<bullets7.length;p++){
if(bullets7[p].y6 <= -bullets7[p].height || bullets7[p].del){
bullets7.splice(p,1);
}
}

}


// 33 完成敌方飞机的功能
// 331 加载敌方飞机的图片
var enemy1 = [];
enemy1[0] = new Image();
enemy1[0].src = "http://www.lxstly.sgzlkj.com/images2/enemy1.png";
enemy1[1] = new Image();
enemy1[1].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down1.png";
enemy1[2] = new Image();
enemy1[2].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down2.png";
enemy1[3] = new Image();
enemy1[3].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down3.png";
enemy1[4] = new Image();
enemy1[4].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down4.png";
enemy1[5] = new Image();
enemy1[5].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down5.png";
enemy1[6] = new Image();
enemy1[6].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down6.png";
var enemy2 = [];
enemy2[0] = new Image();
enemy2[0].src = "http://www.lxstly.sgzlkj.com/images2/enemy2.png";
enemy2[1] = new Image();
enemy2[1].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down1.png";
enemy2[2] = new Image();
enemy2[2].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down2.png";
enemy2[3] = new Image();
enemy2[3].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down3.png";
enemy2[4] = new Image();
enemy2[4].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down4.png";
enemy2[5] = new Image();
enemy2[5].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down5.png";
enemy2[6] = new Image();
enemy2[6].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down6.png";
var enemy3 = [];
enemy3[0] = new Image();
enemy3[0].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_n1.png";
enemy3[1] = new Image();
enemy3[1].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_n2.png";
enemy3[2] = new Image();
enemy3[2].src = "http://www.lxstly.sgzlkj.com/images2/enemy6_down1.png";
enemy3[3] = new Image();
enemy3[3].src = "http://www.lxstly.sgzlkj.com/images2/enemy6_down2.png";
enemy3[4] = new Image();
enemy3[4].src = "http://www.lxstly.sgzlkj.com/images2/enemy6_down3.png";
enemy3[5] = new Image();
enemy3[5].src = "http://www.lxstly.sgzlkj.com/images2/enemy6_down4.png";
enemy3[6] = new Image();
enemy3[6].src = "http://www.lxstly.sgzlkj.com/images2/enemy6_down5.png";
enemy3[7] = new Image();
enemy3[7].src = "http://www.lxstly.sgzlkj.com/images2/enemy6_down6.png";
var enemy4 = [];
enemy4[0] = new Image();
enemy4[0].src = "http://www.lxstly.sgzlkj.com/images2/enemy4.png";
enemy4[1] = new Image();
enemy4[1].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down1.png";
enemy4[2] = new Image();
enemy4[2].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down2.png";
enemy4[3] = new Image();
enemy4[3].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down3.png";
enemy4[4] = new Image();
enemy4[4].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down4.png";
enemy4[5] = new Image();
enemy4[5].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down5.png";
enemy4[6] = new Image();
enemy4[6].src = "http://www.lxstly.sgzlkj.com/images2/enemy3_down6.png";
var enemy5 = [];
enemy5[0] = new Image();
enemy5[0].src = "http://www.lxstly.sgzlkj.com/images2/enemy4.png";
enemy5[1] = new Image();
enemy5[1].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down1.png";
enemy5[2] = new Image();
enemy5[2].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down2.png";
enemy5[3] = new Image();
enemy5[3].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down3.png";
enemy5[4] = new Image();
enemy5[4].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down4.png";
enemy5[5] = new Image();
enemy5[5].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down5.png";
enemy5[6] = new Image();
enemy5[6].src = "http://www.lxstly.sgzlkj.com/images2/enemy1_down6.png";
// 332 初始化必要的数据
var ENEMY1 ={
imgs : enemy1,
width : 68,
height : 55,
sum : enemy1.length,
type : 1,
life : 4,
score : 1
}
var ENEMY2 = {
imgs : enemy2,
width : 90,
height : 60,
sum : enemy2.length,
type : 2,
life : 10,
score : 3
}
var ENEMY3 = {
imgs : enemy3,
width : 222,
height : 170,
sum : enemy3.length,
type : 3,//种类
life : 20,//生命值
score : 10
}
var ENEMY4 ={
imgs : enemy4,
width : 68,
height : 45,
sum : enemy4.length,
type : 1,
life : 4,
score : 1
}
var ENEMY5 ={
imgs : enemy5,
width : 68,
height : 55,
sum : enemy1.length,
type : 1,
life : 4,
score : 1
}
// 333 定义敌方飞机的构造器
function Enemy(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
this.sum = config.sum;
this.type = config.type;
// 增加敌方飞机的生命值
this.life = config.life;
// 增加敌方飞机的得分
this.score = config.score;
// 定义敌方飞机的坐标值
this.x = Math.random()*(WIDTH-this.width);
this.y = -this.height;
// 定义数组索引值
this.frameIndex = 0;
// 定义是否执行爆破动画的标识
this.down = false;
// 定义是否允许删除的标识
this.del = false;
// 绘制方法
this.paint = function(cxt){
cxt.drawImage(this.imgs[this.frameIndex],this.x,this.y);
}
this.speed=0;
// 移动方法
this.step = function(){
if(this.down){//爆破
this.speed++;
if(this.speed%10==0){
this.frameIndex++;
}
if(this.frameIndex == 7){
this.del = true;
score += this.score;
this.frameIndex = this.sum - 1;
}
}else{//正常
switch (this.type){
case 1://小飞机
this.frameIndex = 0;
this.y += 5;
break;
case 2://中飞机
this.frameIndex = 0;
this.y += 3;
break;
case 3://大飞机
this.frameIndex = (this.frameIndex == 0) ? 1 : 0;
this.y+=3;
break;
case 4://小飞机
this.frameIndex =  0;
this.y+=5;
break;

}
}
}
// 敌方飞机被撞击的规则
this.hit = function(compont){
// 我方 - 1)子弹;2)我方飞机
return compont.y + compont.height >= this.y &&
   compont.x + compont.width >= this.x &&
   compont.y <= this.y + this.height &&
   compont.x <= this.x + this.width||
   (compont.y1 + compont.height >= this.y &&
   compont.x1 + compont.width >= this.x &&
   compont.y1 <= this.y + this.height &&
   compont.x1 <= this.x + this.width)||
   (compont.y2 + compont.height >= this.y &&
   compont.x2 + compont.width >= this.x &&
   compont.y2 <= this.y + this.height &&
   compont.x2 <= this.x + this.width)||
   (compont.y3 + compont.height >= this.y &&
   compont.x3 + compont.width >= this.x &&
   compont.y3 <= this.y + this.height &&
   compont.x3 <= this.x + this.width)||
   (compont.y4 + compont.height >= this.y &&
   compont.x4 + compont.width >= this.x &&
   compont.y4 <= this.y + this.height &&
   compont.x4 <= this.x + this.width)||
   (compont.y5 + compont.height >= this.y &&
   compont.x5 + compont.width >= this.x &&
   compont.y5 <= this.y + this.height &&
   compont.x5 <= this.x + this.width)||
   (compont.y6 + compont.height >= this.y &&
   compont.x6 + compont.width >= this.x &&
   compont.y6 <= this.y + this.height &&
   compont.x6 <= this.x + this.width);
}
this.canDown = function(){
this.life--;//生命值-1
// 判断生命值是否为0
if(this.life == 0){
this.down = true;//表示执行爆破动画
if(this.type == 3){//大飞机
this.frameIndex = 2;
}else{//小|中飞机
this.frameIndex = 1;
}
}
}
}
// 334 创建敌方飞机的数组
var enemies = [];
// 335 定义生成敌方飞机的函数
function createEnemy(){
var num = Math.random()*((500-1+1)-1);
if(num <= 15&&num>=6){//小飞机
enemies[enemies.length] = new Enemy(ENEMY1);
}else if(num <= 20&&num>=7){//中飞机
enemies[enemies.length] = new Enemy(ENEMY2);
}else if(num <= 40&&num>=21){//中飞机
enemies[enemies.length] = new Enemy(ENEMY4);
}else if(num <= 45&&num>=41){//中飞机
enemies[enemies.length] = new Enemy(ENEMY5);
}else if(num <=5.9){//大飞机
/*
  判断数组的第一个元素
  * 如果第一个元素是大飞机,不再生成
  * 如果第一个元素不是大飞机,将第一个元素替换成大飞机
*/
if(enemies.length > 0 && enemies[0].type != 3){
enemies.splice(0,0,new Enemy(ENEMY3));
}
}
}
// 336 绘制所有敌方飞机的函数
function paintEnemies(){
for(var i=0;i<enemies.length;i++){
enemies[i].paint(context);
}
}
// 337 移动所有敌方飞机的函数
function stepEnemies(){
for(var i=0;i<enemies.length;i++){
enemies[i].step();
}
}
// 338 移除飞出画面的敌方飞机函数
function delEnemies(){
for(var i=0;i<enemies.length;i++){
if(enemies[i].y == HEIGHT || enemies[i].del){
enemies.splice(i,1);
}
}
}


// 34 定义判断当前敌方飞机是否被撞击的函数
function checkHit(){
// a. 遍历所有的敌方飞机
for(var i=0;i<enemies.length;i++){
// 被我方飞机撞击
if(enemies[i].hit(hero) && !hero.down && !enemies[i].down){
hero.canDown();//我方飞机执行被撞击后的逻辑
enemies[i].canDown();//敌方飞机执行被撞击后的逻辑
}
// 被子弹撞击
for(var j=0;j<bullets.length;j++){
if(enemies[i].hit(bullets[j]) && !enemies[i].down){
bullets[j].del = true;//子弹撞击后的逻辑
enemies[i].canDown();//敌方飞机执行被撞击后的逻辑
}
}
for(var o=0;o<bullets2.length;o++){
if(enemies[i].hit(bullets2[o]) && !enemies[i].down){
bullets2[o].del2 = true;//子弹撞击后的逻辑
enemies[i].canDown();//敌方飞机执行被撞击后的逻辑
}
}
for(var l=0;l<bullets3.length;l++){
if(enemies[i].hit(bullets3[l]) && !enemies[i].down){
bullets3[l].del3 = true;//子弹撞击后的逻辑
enemies[i].canDown();//敌方飞机执行被撞击后的逻辑
}
}
for(var m=0;m<bullets4.length;m++){
if(enemies[i].hit(bullets4[m]) && !enemies[i].down){
bullets4[m].del4 = true;//子弹撞击后的逻辑
enemies[i].canDown();//敌方飞机执行被撞击后的逻辑
}
}
for(var n=0;n<bullets5.length;n++){
if(enemies[i].hit(bullets5[n]) && !enemies[i].down){
bullets5[n].del5 = true;//子弹撞击后的逻辑
enemies[i].canDown();//敌方飞机执行被撞击后的逻辑
}
}
for(var u=0;u<bullets6.length;u++){
if(enemies[i].hit(bullets6[u]) && !enemies[i].down){
bullets6[u].del6 = true;//子弹撞击后的逻辑
enemies[i].canDown();//敌方飞机执行被撞击后的逻辑
}
}
for(var p=0;p<bullets7.length;p++){
if(enemies[i].hit(bullets7[p]) && !enemies[i].down){
bullets7[p].del7 = true;//子弹撞击后的逻辑
enemies[i].canDown();//敌方飞机执行被撞击后的逻辑
}
}

}
}


// 35 在画布中绘制游戏得分和生命值
function paintText(){
context.font = "bold 24px 微软雅黑";
context.fillText("SCORE : "+score,10,30);
context.fillText("LIFE : "+life,380,30);
}


// 4 完成游戏的暂停阶段
// 41 当鼠标离开画布
canvas.onmouseout = function(){
if(state == RUNNING){
state = PAUSED;
}
}
// 42 当鼠标回到画布
canvas.onmouseover = function(){
if(state == PAUSED){
state = RUNNING;
}
}
// 43 绘制游戏暂停阶段的暂停标识
var paused = new Image();
paused.src = "http://www.lxstly.sgzlkj.com/images/game_pause_nor.png";
paused.width = 60;
paused.height = 45;


// 5 绘制GAMEOVER的提示内容
function paintOver(){
context.font = "bold 48px 微软雅黑";
context.fillText("GAME OVER",WIDTH/2-150,HEIGHT/2)
}
//触发键盘
document.οnkeydοwn=function(event){
             var e = event || window.event || arguments.callee.caller.arguments[0];
              if(e && e.keyCode==90){ // 按 z
bullet.src="http://www.lxstly.sgzlkj.com/images2/bullet1.png";//制造
}
if(e && e.keyCode==88){ // 按 x
bullet.src="http://www.lxstly.sgzlkj.com/images2/bullet3.png";//制造
}
if(e && e.keyCode==67){ // 按 c
bullet.src="http://www.lxstly.sgzlkj.com/images2/bullet2.png";//制造
}
if(e && e.keyCode==81){ // 按 q
heros[0].src="http://www.lxstly.sgzlkj.com/images2/heroy1.png";//
heros[1].src="http://www.lxstly.sgzlkj.com/images2/heroy2.png";//
heros[2].src="http://www.lxstly.sgzlkj.com/images2/heroy3.png";//
}
if(e && e.keyCode==87){ // 按 w
heros[0].src="http://www.lxstly.sgzlkj.com/images2/heror1.png";//
heros[1].src="http://www.lxstly.sgzlkj.com/images2/heror2.png";//
heros[2].src="http://www.lxstly.sgzlkj.com/images2/heror3.png";//
}
if(e && e.keyCode==69){ // 按 e
heros[0].src="http://www.lxstly.sgzlkj.com/images2/hero1.png";//
heros[1].src="http://www.lxstly.sgzlkj.com/images2/hero2.png";//
heros[2].src="http://www.lxstly.sgzlkj.com/images2/hero3.png";//
}
if(e && e.keyCode==82){ // 按 r
wudi++
}
if(e && e.keyCode==86){ // 按 v
dj++;
if(dj==1){
BULLET.width=24;
bullet.src = "http://www.lxstly.sgzlkj.com/images2/bullet2_lv2.png";
}else{dj=0;
BULLET.width=11;
bullet.src = "http://www.lxstly.sgzlkj.com/images2/bullet2.png";
}
}
}
// 定义核心控制器
setInterval(function(){
backg.paint(context);//绘制背景图片
backg.step();//动画

switch (state){
case START:
context.drawImage(logo,20,0);//绘制LOGO
break;
case STARTTING:
loading.paint(context);//绘制动画图片
loading.step();//动画方法执行
break;
case RUNNING:
//speed2+=0.01;
hero.paint(context);//绘制方法
hero.step();//动画方法
hero.shoot();//射击方法


paintBullets();//绘制所有子弹方法
stepBullets();//移动所有子弹方法
delBullets();//移除飞出画面的子弹方法


createEnemy();//生成敌方飞机的方法
paintEnemies();//绘制敌方飞机的方法
stepEnemies();//移动敌方飞机的方法
delEnemies();//移除飞出画面的敌机方法


checkHit();//检查是否撞击方法


paintText();//绘制游戏得分和生命值
break;
case PAUSED:
hero.paint(context);//绘制方法
paintBullets();//绘制所有子弹方法
paintEnemies();//绘制敌方飞机的方法


paintText();//绘制游戏得分和生命值
context.drawImage(paused,WIDTH/2-paused.width/2,HEIGHT/2-paused.height/2);
break;
case GAMEOVER:
hero.paint(context);//绘制方法
paintBullets();//绘制所有子弹方法
paintEnemies();//绘制敌方飞机的方法


paintText();//绘制游戏得分和生命值
paintOver();
break;
}
},30);


  </script>
 </body>
</html>
专家-郭老师
关注
专栏目录
飞机大战的HTML
qianmingmaoyao的博客
10-19 782
飞机大战
简易的飞机大战源码HTML
08-29
HTML文件，飞机大战源代码，可以让你在电脑上玩的代码
html--飞机大战
最新发布
stqer的博客
07-27 552
<!DOCTYPE html> <html onselectstart="return false"> <head> <meta charset="UTF-8" /> <title>热狗大赛</title> <style> *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;} li{ list-sty
html5飞机大战源码
12-14
html5飞机大战源码
HTML版飞机大战
04-01
发现一款实用HTML版的小游戏。感觉很好给大家共享下！
html飞机大战小游戏文本讲解,html、JS 飞机大战游戏
weixin_29331115的博客
05-31 343
飞机大战你的浏览器不支持canves画布元素，请更新浏览器获得演示效果。飞机大战分数：0分var canvas=document.getElementById('myCanvas');var context=canvas.getContext('2d');document.addEventListener('keydown',onKeydown);//飞机类和其属性var Plan=functio...
HTML5飞机大战
m0_71663621的博客
06-01 611
基于HTML5 Canvas的简单游戏，名为“HTML5飞机大战”。它包括了一个Canvas元素和一个JavaScript脚本。JavaScript脚本定义了四个类：GameObject、Player、Enemy和Bullet，分别代表游戏对象、玩家、敌人和子弹。它还定义了三个变量：player、enemies和bullets，分别代表玩家、敌人和子弹。它还定义了两个函数：spawnEnemy和shoot，分别用于生成敌人和发射子弹。最后，它定义了一个update函数，用于更新游戏状态和绘制游戏画面。在up
HTML5飞机大战源码.rar
12-15
在飞机大战中，可能用到这些技术来保存用户的分数、游戏进度等信息，使得游戏状态可以在浏览器关闭后仍然保持。 5. **请求动画帧**：`requestAnimationFrame()`是HTML5提供的一种优化动画性能的方式，它会在下一次...
飞机大战HTML5游戏
06-24
总的来说，《飞机大战HTML5游戏》结合了HTML5的Canvas技术和游戏设计原理，提供了一款可在手机端流畅运行的娱乐产品。通过学习和分析这个游戏的源码，开发者可以深入理解HTML5游戏开发，掌握Canvas绘图技巧，以及...
HTML5全民飞机大战游戏代码
03-04
10. **跨平台兼容性**：HTML5全民飞机大战游戏的目标是全平台覆盖，因此开发者需要考虑不同浏览器的兼容性问题，确保游戏在Chrome、Firefox、Safari、Edge等主流浏览器上都能正常运行。 综上所述，HTML5全民飞机...
HTML加js做的飞机大战
10-17
在这个"飞机大战"游戏中，HTML作为结构标记语言定义了游戏界面的基本元素，而JavaScript则负责为这些元素添加动态行为，使得游戏能够运行并响应用户的操作。 HTML（HyperText Markup Language）是创建网页的标准...
用html做飞机大战
02-06
飞机大战html版！目前虽然有些卡顿，但是有闯关游戏，想想还是挺划算的，双击play.html即可开始大战，加油！！！
html5游戏飞机大战
01-05
自己写的飞机大战代码，使用canvas，方向键控制，z子弹,x大招；
飞机大战-HTML-JavaScript-代码
05-24
一个web网页，用HTML写的，css样式、JavaScript也在里面，会动，有特效，学习前端的朋友可以试着下载来看看，有些地方是可以借鉴的，挺不错的
HTML——飞机大战小游戏（完整代码+音乐）.rar
02-22
这是一个由前端技术（HTML等）实现的飞机大战----小游戏，包含完整的代码，同时也有背景音乐，可以供各位学习等使用，欢迎各位下载！
HTML5飞机大战项目源码
10-15
用了HTML5的新技术，代码注释清晰，拿来学习参考交流
html5简单的飞机大战源码.zip
04-04
总的来说，这个“飞机大战”游戏充分利用了HTML5的特性，包括`<canvas>`图形绘制、JavaScript动态交互以及可能的本地存储和音频处理，为玩家提供了一个完全在浏览器中运行的、无需额外插件的趣味游戏体验。
【HTML——简易 飞机大战 小游戏（效果+代码）】
2401_84152189的博客
05-07 197
* 记录得分 *//* 再来一次 */
html飞机大战游戏代码
05-20
以下是一个简单的 HTML 飞机大战游戏代码： ```html <!DOCTYPE html> <html> <head> <title>飞机大战</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="600"></canvas> <script> // 获取画布和上下文 var canvas = document.getElementById("gameCanvas"); var ctx = canvas.getContext("2d"); // 定义飞机属性 var plane = { x: canvas.width / 2, y: canvas.height - 50, width: 50, height: 50, speed: 5 }; // 监听键盘事件 document.addEventListener("keydown", function(event) { if (event.keyCode === 37) { // 左箭头 plane.x -= plane.speed; } else if (event.keyCode === 39) { // 右箭头 plane.x += plane.speed; } }); // 定义子弹属性 var bullets = []; var bulletSpeed = 10; function createBullet() { bullets.push({ x: plane.x + plane.width / 2, y: plane.y, width: 5, height: 10, speed: bulletSpeed }); } // 定义敌机属性 var enemies = []; var enemySpeed = 3; function createEnemy() { enemies.push({ x: Math.random() * (canvas.width - 50), y: 0, width: 50, height: 50, speed: enemySpeed }); } // 游戏循环 var score = 0; setInterval(function() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制飞机 ctx.fillStyle = "blue"; ctx.fillRect(plane.x, plane.y, plane.width, plane.height); // 绘制子弹 ctx.fillStyle = "red"; bullets.forEach(function(bullet) { ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); bullet.y -= bullet.speed; }); // 绘制敌机 ctx.fillStyle = "green"; enemies.forEach(function(enemy) { ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); enemy.y += enemy.speed; }); // 检测子弹和敌机是否碰撞 bullets.forEach(function(bullet) { enemies.forEach(function(enemy, i) { if (bullet.x < enemy.x + enemy.width && bullet.x + bullet.width > enemy.x && bullet.y < enemy.y + enemy.height && bullet.y + bullet.height > enemy.y) { bullets.splice(bullets.indexOf(bullet), 1); enemies.splice(i, 1); score++; } }); }); // 检测敌机是否撞到飞机 enemies.forEach(function(enemy) { if (enemy.x < plane.x + plane.width && enemy.x + enemy.width > plane.x && enemy.y < plane.y + plane.height && enemy.y + enemy.height > plane.y) { alert("游戏结束！得分：" + score); location.reload(); } }); // 创建子弹和敌机 createBullet(); if (score >= 10) { createEnemy(); } }, 30); </script> </body> </html> ``` 这只是一个简单的示例，你可以根据自己的需求和技能来进行改进和扩展，比如添加更多的敌机、增加游戏难度等等。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值