html5游戏开发-弹幕+仿雷电小游戏demo

webcode

浏览: 5931075 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

本游戏使用的是html5的canvas，运行游戏需要浏览器支持html5。

本篇文章详细讲解如何用html5来开发一款射击游戏，雷电可以说是射击游戏中的经典，下面就来模仿一下。

先看一下游戏截图

演示地址

http://fsanguo.comoj.com/html5/barrage2/index.html

游戏开发，需要用到开源库件：LegendForHtml5Programming。

LegendForHtml5Programming1.1下载地址：

http://legendforhtml5programming.googlecode.com/files/LegendForHtml5Programming1.1.zip

LegendForHtml5Programming库件制作过程，以及如何在游戏中进行配置，请看下面链接

http://blog.csdn.net/lufy_legend/article/details/6844949

游戏预计用到下面几个文件

index.html

js文件夹｜---Main.js

　　　　｜---Plain.js//飞机
　　　　｜---Bullet.js//子弹
　　　　｜---Global.js//共通

images文件夹｜--图片

我简单说一下制作过程，源代码在最下面

首先建立index.html文件，

打开Main.js

在里面添加代码，先将图片全部读取，并显示进度条

以及，将一些可能会用到的变量添加进去

/**
 * Main
 * */
//设定游戏速度，屏幕大小，回调函数
init(50,"mylegend",480,800,main);

/**层变量*/
//显示进度条所用层
var loadingLayer;
//游戏最底层
var backLayer;
//控制层
var ctrlLayer;

/**int变量*/
//读取图片位置
var loadIndex = 0;
//贞数
var frames = 0;
//BOOS START
var boosstart = false;
//GAME OVER
var gameover = false;
//GAME CLEAR 
var gameclear = false;
//得分
var point = 0;
/**对象变量*/
//玩家
var player;
//得分
var pointText;

/**数组变量*/
//图片path数组
var imgData = new Array();
//读取完的图片数组
var imglist = {};
//子弹数组
var barrage = new Array();
//子弹速度数组
var barrageSpeed = [5,10];
//储存所有敌人飞机的数组
var enemys = new Array();

现在，所用到的图片已经全部都加载完毕，先添加背景，显示一张图片

用legend库件显示图片非常简单

效果如下

射击游戏，子弹是亮点，如何添加多种子弹是游戏的关键

要使子弹有变化，必须要设定相应的角度，加速度，等多种变量

下面为了实现这些变化，我们来建立一个子弹类

然后，在子弹移动过程中，根据这些变量来实现多种变换

在共通类中，加入一个子弹数组，用来区分各种子弹

游戏最基本的子弹，当然就是每次发一个子弹

在共通类里建一个发射子弹的函数

这里，最终需要根据发射的飞机不同而不同，所以我加入了参数飞机

那现在建立飞机类，如下

/**
 * 飞机类
 * */
function Plain(name,belong,x,y,bullets){
	base(this,LSprite,[]);
	var self = this;
	//飞机名称
	self.name = name;
	//飞机位置
	self.x = x;
	self.y = y;
	//飞机所属
	self.belong = belong;
	//子弹数组
	self.bullets = bullets;
	//初始子弹
	self.bullet = self.bullets[Math.floor(Math.random()*self.bullets.length)];
	self.shootspeed = Global.bulletList[self.bullet].shootspeed;
	//枪口旋转角度
	self.sspeed = 0;
	//射击频率控制
	self.shootctrl = 0;
	//获取飞机属性
	self.list = Global.getPlainStatus(self);
	//飞机图片
	self.bitmap = self.list[0];
	//显示
	self.addChild(self.bitmap);
	//枪口位置
	self.shootx = self.list[1];
	self.shooty = self.list[2];
	//移动速度
	self.speed = self.list[3];
	//飞机hp
	self.hp = self.list[4];
	//移动方向
	self.move = [0,0];
	//发射子弹数
	self.shootcount = 0;
	//是否发射子弹
	self.canshoot = true;
	if(name=="player")self.canshoot = false;
}

/**
 * 循环
 * */
Plain.prototype.onframe = function (){
	var self = this;
	//移动
	self.x += self.move[0]*self.speed;
	self.y += self.move[1]*self.speed;
	
	switch (self.name){
		case "player":
			//自机移动位置限制
			if(self.x < 0)self.x = 0;
			else if(self.x + self.bitmap.getWidth() > LGlobal.width)self.x = LGlobal.width-self.bitmap.getWidth();
			if(self.y < 0)self.y = 0;
			else if(self.y + self.bitmap.getHeight() > LGlobal.height)self.y = LGlobal.height-self.bitmap.getHeight();
			break;
		case "boss":
			//敌机BOSS移动
			if(self.y < 0){
				self.y = 0;
				self.move[1] = 1;
			}else if(self.y + self.bitmap.getHeight() > LGlobal.height){
				self.y = LGlobal.height-self.bitmap.getHeight();
				self.move[1] = -1;
			}
			//碰撞检测
			self.hitTest();
			break;
		case "enemy":
		default:
			//碰撞检测
			self.hitTest();
	}
	//射击
	if(self.canshoot)self.shoot();
};

/**
 * 碰撞检测
 * */
Plain.prototype.hitTest = function (){
	var self = this;
	var disx,disy,sw,ew;
	sw = (self.bitmap.getWidth() + self.bitmap.getHeight())/4;
	ew = (player.bitmap.getWidth() + player.bitmap.getHeight())/4;
	disx = self.x+sw - (player.x + ew);
	disy = self.y+self.bitmap.getHeight()/2 - (player.y + player.bitmap.getHeight()/2);
	if(disx*disx + disy*disy < (sw+ew)*(sw+ew)){
		player.visible = false;
		gameover = true;
	}
};
/**
 * 射击
 * */
Plain.prototype.shoot = function (){
	var self = this;
	if(self.shootctrl++ < self.shootspeed)return;
	self.shootctrl = 0;
	if(self.name == "boss"){
		if(self.shootcount++ % 20 > 5)return;
	}else{
		if(self.shootcount++ % 10 > 5)return;
	}
	Global.setBullet(self);
	if(self.name == "boss"){
		if(self.shootcount % 20 < 5)return;
	}else{
		if(self.shootcount % 10 < 5)return;
	}
	if(self.bullets.length <= 1)return;
	self.bullet = self.bullets[Math.floor(Math.random()*self.bullets.length)];
	self.shootspeed = Global.bulletList[self.bullet].shootspeed;
};

代码已经加入了详细的注释，不难理解吧

完善子弹类如下

/**
 * 子弹类 
 * */
function Bullet(belong,x,y,angle,xspeed,yspeed,aspeed,speed){
	base(this,LSprite,[]);
	var self = this;
	//子弹所属
	self.belong = belong;
	//出现位置
	self.x = x;
	self.y = y;
	//角度
	self.angle = angle;
	//移动速度
	self.speed = speed;
	//xy轴速度
	self.xspeed = xspeed;
	self.yspeed = yspeed;
	//旋转角度加成
	self.aspeed = aspeed;
	//子弹图片
	var bitmapdata,bitmap;
	bitmapdata = new LBitmapData(imglist["item1"]);
	bitmap = new LBitmap(bitmapdata);
	self.bitmap = bitmap;
	//显示
	self.addChild(bitmap);
}

/**
 * 循环
 * @param 子弹序号
 * */
Bullet.prototype.onframe = function (index){
	var self = this;

//子弹移动
	self.x += self.xspeed;
	self.y += self.yspeed;
	
	//子弹角度变更
	if(self.aspeed != 0){
		self.angle += self.aspeed;
		//子弹角度变更后，重新计算xy轴速度
		self.xspeed = self.speed*Math.sin(self.angle * Math.PI / 180);
		self.yspeed = self.speed*Math.cos(self.angle * Math.PI / 180);
	}
	//子弹位置检测
	if(self.x < 0 || self.x > LGlobal.width || self.y < 0 || self.y > LGlobal.height){
		//从屏幕移除
		backLayer.removeChild(self);
		//从子弹数组移除
		barrage.splice(index,1);
	}else{
		self.hitTest(index);
	}
	
};
/**
 * 子弹碰撞检测
 * @param 子弹序号
 * */
Bullet.prototype.hitTest = function (index){
	var self = this;
	var disx,disy,sw,ew,obj,i;
	if(self.belong == player.belong){
		//自机子弹
		for(i=0;i<enemys.length;i++){
			obj = enemys[i];
			sw = self.bitmap.getWidth()/2;
			ew = obj.bitmap.getWidth()/2;
			disx = self.x+sw - (obj.x + ew);
			disy = self.y+self.bitmap.getHeight()/2 - (obj.y + obj.bitmap.getHeight()/2);
			//距离检测
			if(disx*disx + disy*disy < ew*ew){
				obj.hp--;
				if(obj.hp == 0){
					point += 1;
					pointText.text = point;
					//从屏幕移除
					backLayer.removeChild(obj);
					//从敌机数组移除
					enemys.splice(i,1);
					if(obj.name == "boss"){
						gameclear = true;
					}
				}
				//从屏幕移除
				backLayer.removeChild(self);
				//从子弹数组移除
				barrage.splice(index,1);
			}
		}
	}else{
		//敌机子弹
		obj = player;
		sw = self.bitmap.getWidth()/2;
		ew = obj.bitmap.getWidth()/2;
		disx = self.x+sw - (obj.x + ew);
		disy = self.y+self.bitmap.getHeight()/2 - (obj.y + obj.bitmap.getHeight()/2);
		//距离检测
		if(disx*disx + disy*disy < ew*ew - 10){
			obj.visible = false;
			gameover = true;
			//从屏幕移除
			backLayer.removeChild(self);
			//从子弹数组移除
			barrage.splice(index,1);
		}
	}
};

子弹发射函数，修改如下

在Main文件里添加循环

现在，我只需要添加飞机，就可以发射子弹了

看效果