<!DOCTYPE >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
</head>
<body>
<div id="stage" style="width:480px;height:650px;margin:0px auto;">
<canvas id="canvas" width="480" height="650"></canvas>
</div>
<script>
//定义宽和高
var WIDTH=480,HEIGHT=650;
var score = 0,life=3;
//定义状态
var START = 0;
var STARTING = 1;
var RUNNING = 2;
var PAUSE = 3;
var GAME_OVER = 4;
/**
* state表示游戏的状态
* 取值必须为以上五种之一
*/
var state = START;
//获取数据
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
//创建图像对象用来表示天空、英雄、敌人、版权
var bg = new Image();
bg.src="img/background.png";
var copyright = new Image();
copyright.src="img/shoot_copyright.png";
var pause = new Image();
pause.src="img/game_pause_nor.png";
var l = [];
l[0] = new Image();
l[0].src="img/game_loading1.png";
l[1] = new Image();
l[1].src="img/game_loading2.png";
l[2] = new Image();
l[2].src="img/game_loading3.png";
l[3] = new Image();
l[3].src="img/game_loading4.png";
//创建英雄图像数组
var h = [];
h[0] = new Image();
h[0].src="img/hero1.png";
h[1] = new Image();
h[1].src="img/hero2.png";
h[2] = new Image();
h[2].src="img/hero_blowup_n1.png";
h[3] = new Image();
h[3].src="img/hero_blowup_n2.png";
h[4] = new Image();
h[4].src="img/hero_blowup_n3.png";
h[5] = new Image();
h[5].src="img/hero_blowup_n4.png";
//创建子弹图像
var b = new Image();
b.src="img/bullet1.png";
//创建小飞机图像数组
var e1 = [];
e1[0] = new Image();
e1[0].src="img/enemy1.png";
e1[1] = new Image();
e1[1].src="img/enemy1_down1.png";
e1[2] = new Image();
e1[2].src="img/enemy1_down2.png";
e1[3] = new Image();
e1[3].src="img/enemy1_down3.png";
e1[4] = new Image();
e1[4].src="img/enemy1_down4.png";
//创建中型飞机图像数组
var e2 = [];
e2[0] = new Image();
e2[0].src="img/enemy2.png";
e2[1] = new Image();
e2[1].src="img/enemy2_down1.png";
e2[2] = new Image();
e2[2].src="img/enemy2_down2.png";
e2[3] = new Image();
e2[3].src="img/enemy2_down3.png";
e2[4] = new Image();
e2[4].src="img/enemy2_down4.png";
//创建大型飞机的图像数组
var e3 = [];
e3[0] = new Image();
e3[0].src="img/enemy3_n1.png";
e3[1] = new Image();
e3[1].src="img/enemy3_n2.png";
e3[2] = new Image();
e3[2].src="img/enemy3_down1.png";
e3[3] = new Image();
e3[3].src="img/enemy3_down2.png";
e3[4] = new Image();
e3[4].src="img/enemy3_down3.png";
e3[5] = new Image();
e3[5].src="img/enemy3_down4.png";
e3[6] = new Image();
e3[6].src="img/enemy3_down5.png";
e3[7] = new Image();
e3[7].src="img/enemy3_down6.png";
//为canvas添加事件(onclick,onmousemove,onmoseout)
canvas.onclick=function(){
if(state == START){
state = STARTING;
}
}
/**
*鼠标移动事件
*处理 hero与鼠标的位置
*/
canvas.onmousemove = function(e){
var x = e.offsetX;
var y = e.offsetY;
hero.x = x - HERO.width / 2;
hero.y = y - HERO.height / 2;
}
canvas.onmouseout = function(e){
if(state == RUNNING){
state = PAUSE;
}
}
canvas.onmouseover = function(e){
if(state == PAUSE){
state = RUNNING;
}
}
//数据对象
var SKY = {image:bg,width:480,height:650,speed:20};
var LOADING = {frames:l,width:186,height:38,x:0,y:HEIGHT-38,speed:5};
var HERO = {frames:h,baseFrameCount:2,width:99,height:124,speed:20};
var BULLET = {image:b,width:9,height:21};
var E1 = {type:1,score:1,frames:e1,baseFrameCount:1,life:1,minSpeed:160,maxSpeed:180,width:57,height:51};
var E2 = {type:2,score:5,frames:e2,baseFrameCount:1,life:5,minSpeed:120,maxSpeed:150,width:69,height:95};
var E3 = {type:3,score:20,frames:e3,baseFrameCount:2,life:20,speed:80,width:169,height:258};
//保存由hero发射的所有子弹
var bullets = [];
var enemies = [];
//业务对象
var Enemy = function(config){
this.down = false;//是否播放爆破状态,默认为否
this.canDelete = false;//是否删除当前飞机,默认为否
this.life = config.life;//敌人的生命力
this.score = config.score;//分数
this.frames = config.frames;//图像列表
this.frame=null;//当前显示的图像
this.frameIndex = 0;//当前显示的图像索引累加值
this.baseFrameCount=config.baseFrameCount;
this.width = config.width;
this.height = config.height;
//横纵坐标
this.x = Math.ceil(Math.random()*(WIDTH - config.width));
this.y = -config.height;
this.type = config.type;
this.speed = 0;
if(config.minSpeed && config.maxSpeed){
this.speed = 1000 / (Math.random() * (config.maxSpeed - config.minSpeed) + config.minSpeed);
}else {
this.speed = 1000 / config.speed;
}
this.lastTime = 0;
/**
* 检查时间是否到期
*/
this.timeInterval = function(){
var currentTime = new Date().getTime();
if(currentTime - this.lastTime >= this.speed){
this.lastTime = new Date().getTime();
return true;
}
return false;
}
this.step=function(){
if(this.timeInterval()){
if(this.down){
//播放爆破图像
//已经确定this.frameIndex = this.baseFrameCount;
if(this.frameIndex ==this.frames.length){
this.canDelete = true;
} else {
this.frame = this.frames[this.frameIndex];
this.frameIndex ++;
}
}else{
//播放基本图像
this.frame = this.frames[this.frameIndex % this.baseFrameCount];
this.frameIndex ++;
//飞机移动
this.move();
}
}
}
this.move = function(){
//飞机移动
this.y ++;
}
this.paint = function(ctx){
//绘制飞机图像
ctx.drawImage(this.frame,this.x,this.y);
}
/**
* 判断当前飞机对象是否超出canvas边界
*/
this.outOfBounds = function(){
if(this.y > HEIGHT){
return true;
}
return false;
}
/**
* 判断敌人是否与其他物体碰撞
* c：c可以是英雄，可以是子弹
*/
this.hit = function(c){
//c的中心点坐标
var cX = c.x + c.width / 2;
var cY = c.y + c.height / 2;
var leftStart = this.x - c.width / 2;
var leftEnd = this.x + this.width + c.width / 2;
var topStart = this.y - c.height / 2;
var topEnd = this.y + this.height + c.height / 2;
var result = leftStart < cX && cX < leftEnd && topStart < cY && cY < topEnd;
return result;
}
/**
* 当敌人飞机与其他元素碰撞时的操作方法
*/
this.duang = function(){
//生命的减少
this.life --;
if(this.life == 0){
//切换到爆破状态
this.down = true;
score += this.score;
this.frameIndex = this.baseFrameCount;
}
}
}
/**
* 子弹对象
*/
var Bullet = function(config,x,y){
this.width = config.width;
this.height = config.height;
this.frame = config.image;
this.x = x;
this.y = y;
this.canDelete = false;//是否删除子弹，默认为否
this.move = function(){
this.y -= 2;
}
this.paint = function(ctx){
ctx.drawImage(this.frame,this.x,this.y);
}
this.outOfBounds = function(){
return this.y < 0-this.height;
}
/**
* 子弹与敌人飞机碰撞时所做的操作
*/
this.duang = function(){
this.canDelete = true;
}
}
/**
* 创建飞机业务对象
*/
var Hero = function(config){
this.frames = config.frames;
this.frameIndex = 0;
this.baseFrameCount=config.baseFrameCount;
this.width=config.width;
this.height=config.height;
this.speed=1000/config.speed;
this.lastTime = 0;
this.x = (WIDTH - this.width) / 2;
this.y = HEIGHT - this.height - 30;
this.down=false;
this.canDelete = false;
this.step = function(){
var curren
HTML5飞机大战.zip （33个子文件） 
HTML5飞机大战 img 
enemy1_down2.png 3KB enemy3_down6.png 7KB hero2.png 16KB hero_blowup_n1.png 17KB shoot_copyright.png 33KB background.png 26KB enemy3_down4.png 45KB bullet1.png 478B hero_blowup_n3.png 20KB game_loading3.png 5KB hero1.png 15KB enemy1.png 5KB enemy3_down5.png 50KB enemy1_down1.png 3KB enemy2_down1.png 8KB enemy3_down2.png 37KB enemy2_down4.png 3KB game_loading1.png 2KB enemy3_down1.png 35KB game_pause_nor.png 2KB enemy1_down4.png 1KB enemy2_down2.png 8KB game_loading4.png 128B enemy3_down3.png 41KB enemy3_n1.png 32KB enemy2.png 11KB hero_blowup_n2.png 18KB enemy3_n2.png 32KB hero_blowup_n4.png 6KB enemy1_down3.png 4KB game_loading2.png 4KB enemy2_down3.png 10KB
1.html 15KB资源评论
雨滴_2018-06-06挺好用的么
HoggiChen
- 粉丝: 21
- 资源: 1
最新资源
- 基于SpringBoot+Vue的校医院挂号平台（前端代码）
- (源码)基于NodeMCU框架的NodeHealthGuard系统心脏健康早期预警系统.zip
- 基于SpringBoot+Vue的校医院挂号平台（后端代码）
- (源码)基于PyTorch的图像分类模型训练与评估系统.zip
- AT89C52单片机加LCD12864实现贪吃蛇游戏
- (源码)基于Java的研究生管理系统.zip
- (源码)基于SpringBoot和Vue的社区论坛系统.zip
- (源码)基于Python的自动安卓APK安装系统.zip
- (源码)基于SpringBoot和Netty的即时通讯系统.zip
- (源码)基于SpringBoot和Vue的小区物业后台管理系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
