<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞机大战</title>
<style>
div{
text-align: center;
margin: 10px auto;
}
#canFly{
background-color: #999999;
cursor: pointer;
}
body{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div>
<h3>飞机大战</h3>
<canvas id="canFly" width="480" height="650"></canvas>
</div>
</body>
<!-- JS代码 -->
<script type="application/javascript">
//自执行函数
(function(){
//获取画布
var canvas = document.getElementById("canFly");
//获取画布上下文
var context = canvas.getContext("2d");
//游戏数据设定
var gameDate={
//状态
state:0,
//游戏状态
START:0,
STARTING:1,
RUNNING:2,
PAUSED:3,
GAMEOVER:4,
//英雄飞机生命数量
heroLife:3,
//得分
score:0,
//画布的宽高
WIDTH:canvas.width,
HEIGHT:canvas.height
}
/* **********加载背景图片********** */
var bgImg = new Image();
bgImg.src="images/background.png";
//背景图片的初始化数据
var SKY = {
imgs:bgImg,
width:canvas.width,
height:canvas.height,
}
/* **********加载游戏图片********** */
//logo图片
var startLogo = new Image();
startLogo.src="images/start.png";
//加载飞机入场动画
var loadings=[];
loadings[0] = new Image();
loadings[0].src = "images/game_loading1.png";
loadings[1] = new Image();
loadings[1].src = "images/game_loading2.png";
loadings[2] = new Image();
loadings[2].src = "images/game_loading3.png";
loadings[3] = new Image();
loadings[3].src = "images/game_loading4.png";
//初始化英雄机入场动画图片数据
var LOADING={
imgs : loadings,
width:186,//图片宽度
height:38,//图片高度
sum:loadings.length
}
//英雄机入场动画构造器
function loading(config){
//调用通过构造器初始化
Compant.call(this,config);
//定义绘制方法
this.paint = function(){
context.drawImage(this.imgs[this.index],0,gameDate.HEIGHT-this.height)
}
//定义动画
this.step = function(){
this.time++;
if(this.time%40==0){
this.index++;
if(this.index==this.sum){
//载入动画加载结束，进入游戏
gameDate.state = gameDate.RUNNING;
this.time=0;//重置动画时间
}
}
}
}
//画布单击事件，开始载入游戏
canvas.onclick = function(){
if(gameDate.state == gameDate.START){
gameDate.state = gameDate.STARTING;
}
}
//绑定画布鼠标移动事件，控制飞机跟随鼠标移动
canvas.onmousemove = function(){
//获取鼠标的坐标
var x = event.offsetX;
var y = event.offsetY;
//计算英雄机的坐标
hero.x = x - hero.width/2;
hero.y = y - hero.height/2;
//如果游戏在暂停状态，则游戏继续开始
if(gameDate.state == gameDate.PAUSED){
gameDate.state = gameDate.RUNNING;
}
}
//鼠标移除画布外，则游戏暂停
canvas.onmouseout = function(){
if(gameDate.state == gameDate.RUNNING){
gameDate.state = gameDate.PAUSED;
}
}
//加载暂停图片
var paused = new Image();
paused.src = "images/game_pause_nor.png";
//绘制暂停图标
function paintPaused(){
context.drawImage(paused,gameDate.WIDTH/2-30,gameDate.HEIGHT/2-22.5);
}
//创建背景图片的构造器
function BgSky(config){
//调用通过构造器初始化
Compant.call(this,config);
//图片绘制高度变量
this.y1 = - this.height;
this.y2 = 0;
//定义绘制方法
this.paint = function(){
context.drawImage(this.imgs,0,this.y1);//第一张图片
context.drawImage(this.imgs,0,this.y2);//第二张图片
}
//背景的运动方法
this.step = function(){
this.time++;
if(this.time%3==0){
this.y1++;
this.y2++;
//图片已经移动到画布后，将y坐标重置为-height，实现图片连续滚动
this.y1>this.height&&(this.y1 = -this.height);
this.y2>this.height&&(this.y2 = -this.height);
this.time=1;//重置移动时间
}
}
}
//定义构造器
function Compant(config){
//加载图片
this.imgs = config.imgs;
//设置图片的宽高
this.width = config.width;
this.height = config.height;
this.sum = config.sum;
this.length = config.length;
//敌机具有的属性
this.type = config.type;//敌机类型
this.life = config.life;//敌机生命值
this.score = config.score;//敌机分数
//设置相对速度
this.time = 0;
//设置图片的索引值
this.index = 0;
//是否执行爆破动画标识
this.down = false;
//是否删除标识
this.conDelete = false;
//绘制坐标
this.x = 0;
this.y = 0;
//绘制方法
this.piant = function(){
context.drawImage(this.imags[this.index],this.x,this.y);
}
//移动方法
this.setp = function(){};
//执行撞击后的逻辑方法
this.bang = function(){};
}
//绘制得分方法
function paintText(){
context.font="bold 24px 微软雅黑";
context.fillText("得分:"+gameDate.score,10,30);
context.fillText("生命:"+gameDate.heroLife,390,30);
}
//加载英雄机图片
var heros = [];
//正常图片
heros[0] = new Image();
heros[0].src = "images/hero1.png";
heros[1] = new Image();
heros[1].src = "images/hero2.png";
//坠机图片
heros[2] = new Image();
heros[2].src = "images/hero_blowup_n1.png";
heros[3] = new Image();
heros[3].src = "images/hero_blowup_n2.png";
heros[4] = new Image();
heros[4].src = "images/hero_blowup_n3.png";
heros[5] = new Image();
heros[5].src = "images/hero_blowup_n4.png";
//初始化英雄机的数据
var HERO={
imgs : heros,
width : 99,
height:124,
sum:heros.length,
length:2
}
//定义hero构造器
function hero(config){
//调用通过构造器初始化
Compant.call(this,config);
//定义子弹的速度
this.btTime=0;
//定义英雄机的起始坐标
this.x = (gameDate.WIDTH-this.width)/2;
this.y = gameDate.HEIGHT-this.height-10;
//绘制英雄机
this.paint = function(){
context.drawImage(this.imgs[this.index],this.x,this.y);
}
//定义英雄机动画
this.step = function(){
this.time++;
if(this.down){//飞机爆炸动画
if(this.time%15==0){
this.index++;
if(this.index>=this.sum){
//爆炸动画播放完毕，判断是否还有生命
if(gameDate.heroLife>0){
hero = new hero(HERO);
this.down=false;//将击落状态重置为false
}else{
//游戏结束
gameDate.state = gameDate.GAMEOVER;
}
this.index = this.length;
}
}
}else{
//正常动画
if(this.time%15==0){
this.index++;
this.index = this.index%this.length;
this.time = 0;
}
}
}
//增加飞机射击方法
this.shoot = function(){
this.btTime++;
if(this.btTime%25==0){
bullets[bullets.length]= new Bullet(BULLET);
this.btTime = 0;
}
}
//英雄机撞机方法
this.bang = function(){
//状态变为击落状态
this.down = true;
//减一条命
gameDate.heroLife--;
this.index = this.length;
}
}
//子弹图片加载
var bullet = [];
bullet[0] = new Image();
bullet[0].src = "images/bullet1.png";
//初始化子弹的数据
var BULLET={
imgs:bullet,
width:8,
height:21,
sum:bullet.length
}
//子弹的构造器
function Bullet(config){
//调用通过构造器初始化
Compant.call(this,config);
//子弹的坐标
this.x = hero.x+hero.width/2 - this.width/2;
this.y = hero.y - this.height;
//绘制子弹
this.paint = function(){
context.drawImage(this.imgs[this.index],this.x,this.y);
}
//子弹动画
this.step = function(){
this.y-=1;//子弹每次向上移动1个像素
}
//删除子弹
this.bang = function(){
this.canDelete = true;
}
}
//定义子弹数组
var bullets = [];
//定义绘制所有子弹的函数
function paintBullets(){
for(var i=0;i<bullets.length;i++){
//循环绘制子弹
bullets[i].paint();
if(gameDate.state==gameDate.RUNNING){
//调用动画函数
bullets[i].step();
}
}
}
//清除飞出屏幕外或击中敌机的子弹
function clearBullet(){
for(var i=bullets.length-1;i>=0;i--){
if(bullets[i].y<=bullets[i].height || bullets[i].canDelete){
bullets.splice(i,1);//从子弹数组中移除飞出屏幕外或者击中敌机的子弹
}
}
}
//
//游戏执行函数
var sky = new BgSky(SKY);
var loading = new loading(LOADING);
var hero = new hero(HERO);
function gameExec(){
//背景
sky.paint();
sky.step();
switch(gameDate.state){
case gameDate.START://游戏待启动状态
context.drawImage(startLogo,30,0);
break;
case gameDate.STARTING://游戏载入中状态
loading.paint();
loading.step();
break;
case gameDate.RUNNING://游戏进行中
//加载英雄机
hero.paint();
hero.step();
//调用射击方法
hero.shoot();
//绘制所有子弹
paintBullets();
//清除子弹
clearBullet();
break;
case gameDate.PAUSED://暂停
//绘制英雄机
hero.paint();
//绘制子弹
paintBullets();
//绘制暂停图片
paintPaused();
break;
}
//绘制得分
paintText();
//定时执行
setTimeout(function(){
gameExec();//递归
},8);
}
function init(){
gameExec();
}
//执行初始化方法
init();
})()
</script>
</html>
浙公网安备 33010602011771号