<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>飞机大战</title>
</head>
<body>
<div id="container">
<div id="main" >
<div id="stage" style="margin: 0 auto; width: 480px; height: 650px; background: #323232; text-align: center; vertical-align: middle" >
<img src="img/loading.gif" id="loading" />
<canvas id="canvas" style="display: none" width="480" height="650">
不支持画板对象
</canvas>
</div>
</div>
<footer>
</footer>
</div>
<script src="js/libs/jquery-1.6.2.min.js"></script>
<script>
//var sound = document.getElementById("sound");
//sound.volume = 0.1;
//sound.play();
//舞台的宽高
var WIDTH = 480;
var HEIGHT = 650;
//游戏状态控制
var START = 0;
var STARTING = 1
var RUNNING = 2;
var PAUSE = 3;
var GAME_OVER = 4;
var state = START;
var bg = new Image();
bg.src = "img/background.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";
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 = [];
b[0] = new Image();
b[0].src = "img/bullet1.png";
b[1] = new Image();
b[1].src = "img/bullet1.png";
var copyright = new Image();
copyright.src = "img/shoot_copyright.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 pause = new Image();
pause.src = "img/game_pause_nor.png";
//天空数据 代码 程序
var SKY = {
image : bg,
width : 480,
height : 852,
speed : 20
};
//敌人数据
var E1 = {
type : 1,
score : 1,
frames : e1,
baseFrameCount : 1,
life : 1,
width : 57,
height : 51,
maxSpeed : 200,
minSpeed : 100
};
var E2 = {
type : 2,
score : 5,
frames : e2,
baseFrameCount : 1,
life : 3,
width : 69,
height : 95,
maxSpeed : 200,
minSpeed : 100
};
var E3 = {
type : 3,
score : 20,
frames : e3,
baseFrameCount : 2,
life : 20,
width : 169,
height : 258,
speed : 50
};
//英雄数据
var HERO = {
frames : h,
baseFrameCount : 2,
width : 99,
height : 124
};
//子弹数据
var BULLET = {
frames : b,
baseFrameCount : 1,
width : 9,
height : 21,
speed : 3000
};
var LOADING = {
frames : loading,
baseFrameCount : 4,
width : 186,
height : 38,
speed : 7,
x : 0,
y : HEIGHT - 38
};
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var sky = new Sky(SKY);
var enemies = [];
var bullets = [];
var hero = new Hero(HERO);
var loading = new Loading(LOADING);
var score = 0;
var heros =3;
enemies[0] = new Enemy(E1);
//enemies[1] = new Enemy(E2);
//enemies[2] = new Enemy(E1);
//bullets[0] = new Bullet(BULLET, 50, 500);
//关闭Loaging
$("#loading").hide();
$("#canvas").show();
canvas.onmousemove = function(evt) {
if (state == RUNNING) {
var e = evt ? evt : window.event;
var mpoint = getPointOnCanvas(e.x, e.y);
if (!hero.down) {
hero.x = mpoint.x - hero.width / 2;
hero.y = mpoint.y - hero.height / 2;
}
}
}
canvas.onmouseout = function() {
if (state == RUNNING) {
state = PAUSE;
}
}
canvas.onmouseover = function() {
if (state == PAUSE) {
state = RUNNING;
}
}
canvas.onclick = function(evt) {
var e = evt ? evt : window.event;
if (state == START) {
state = STARTING;
}
}
setInterval(function() {
switch(state) {
case START:
sky.step();
break;
case STARTING:
sky.step();
loading.step();
break;
case RUNNING:
sky.step();
//组件运动
componentStep();
//新组件进入
componentEnter();
hero.shoot();
//碰撞规则检查
checkHit();
//旧组件删除
deleteComponent();
break;
case PAUSE:
sky.step();
break;
case GAME_OVER:
sky.step();
break;
}
//组件绘制
paint(ctx);
}, 1000 / 100);
var paintLastTime = 0;
var paintInterval = 1000 / 24;
function paint(ctx) {
if (! isActionTime(paintLastTime, paintInterval)) {
return;
}
paintLastTime = new Date().getTime();
switch(state) {
case START:
sky.paint(ctx);
var x = WIDTH / 2 - copyright.naturalWidth / 2;
var y = HEIGHT * (1 - 0.618) - copyright.naturalHeight / 2;
ctx.drawImage(copyright, x, y);
break;
case STARTING:
sky.paint(ctx);
loading.paint(ctx);
break;
case GAME_OVER:
sky.paint(ctx);
paintComponent(ctx)
var x = WIDTH / 2 - 245 / 2;
var y = HEIGHT * (1 - 0.6);
ctx.font = "40px Verdana";
ctx.fillText("GAME OVER", x, y);
//ctx.fillText("SCORE:"+score,x,y+45);
break;
case RUNNING:
sky.paint(ctx)
paintComponent(ctx);
break;
case PAUSE:
sky.paint(ctx);
paintComponent(ctx);
ctx.drawImage(pause, 0, 0);
break;
}
}
function paintComponent(ctx) {
for (var i = 0; i < enemies.length; i++) {
enemies[i].paint(ctx);
}
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint(ctx);
}
hero.paint(ctx);
ctx.font = "20px Verdana";
ctx.fillText("SCORE:" + score, 10, 20);
ctx.fillText("LIFE:" + heros, 400, 20);
//调试，打印敌人数量
//ctx.fillText("N:"+enemies.length,10,40);
}
function isActionTime(lastTime, interval) {
if (lastTime == 0) {
return true;
}
var currentTime = new Date().getTime();
return currentTime - lastTime >= interval;
}
/** 组件继承根，所有的显示组件都继承于这个类 */
function Component(config) {
//所有的显示动画帧，是一个数组
//数组元素实例: [基本动画0，基本动画1，基本动画2，销毁动画0，销毁动画1，销毁动画2，销毁动画3，销毁动画4 ]
// 正常运动期间循环显示基本动画帧，销毁时候显示开始显示销毁动画帧，销毁动画显示以后就可以从界面消除了。
this.frames = config.frames;
飞机大战.zip （58个子文件） 
shooter img 
enemy1_down2.png 3KB
hero1.psd 212KB enemy3_down6.png 7KB ufo1.png 6KB hero_protect_disapper_n3.png 24KB hero2.png 16KB hero_blowup_n1.png 17KB shoot_copyright.png 33KB background.png 26KB btn_finish.png 6KB enemy3_down4.png 45KB bullet1.png 478B hero_blowup_n3.png 20KB game_loading3.png 5KB game_pause_pressed.png 2KB hero1.png 15KB enemy1.png 5KB btn_finish_en.png 7KB enemy3_down5.png 50KB enemy1_down1.png 3KB enemy2_down1.png 8KB enemy3_down2.png 37KB ufo2.png 6KB enemy2_down4.png 3KB game_loading1.png 2KB enemy3_down1.png 35KB game_pause_nor.png 2KB enemy1_down4.png 1KB enemy3_hit.png 33KB enemy2_down2.png 8KB game_loading4.png 128B bomb.png 5KB hero_protect_disapper_n1.png 21KB start.png 42KB hero1_protect2.png 18KB enemy3_down3.png 41KB hero1_protect1.png 18KB .gitignore 13B shoot_copyright_en.png 47KB enemy3_n1.png 32KB enemy2.png 11KB hero_blowup_n2.png 18KB enemy3_n2.png 32KB enemy2_hit.png 7KB hero_blowup_n4.png 6KB hero_protect_disapper_n2.png 25KB enemy1_down3.png 4KB game_loading2.png 4KB
loading.gif 72KB enemy2_down3.png 10KB small-bee-hi.png 39KB
index.html 186KB js plugins.js 939B script.js 39B libs jquery-1.6.2.js 231KB jquery-1.6.2.min.js 89KB modernizr-2.0.6.min.js 16KB .project 261B资源评论
「已注销」
- 粉丝: 1195
最新资源
- 浅述计算机科学与技术的方法论.docx
- 遵义市运用大数据服务老干部.docx
- 浅析互联网思维下大学生创新创业意识培养路径.docx
- 物联网关键技术及应用.docx
- 图与网络分析研究例题解.doc
- 移动互联网网络融合策略控制研究.docx
- CAM技术应用现状、问题和发展趋势浅析《机械CAD与CAM》课程.doc
- 基于51单片机的电阻炉温度测量与控制系统方案设计书.doc
- 大型网络监控系统方案.doc
- 电子通信工程中解决电子干扰问题的对策探讨.docx
- 通信行业研究与发展专题报告-拥抱趋势-超配龙头.docx
- 通信管道施工及验收技术规范.doc
- 北京航空航天大学计算机应用技术考博参考书.doc
- 教育技术装备的管理信息化.docx
- android游戏设计方案单元教学方案设计方案.doc
- ThinkPadT60软件安装实用指南.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
