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



	 

	 

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

	 

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

	 

	先看一下游戏截图

	 

	 

	

	演示地址

	 

	 

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

	 

	 

	 

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

	 

	 

	 

	LegendForHtml5Programming1.1下载地址：

	 

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

	 

	 

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

	 

	 

	index.html

	 

	js文件夹｜---Main.js

	 

	     　　　　｜---Plain.js//飞机

	     　　　　｜---Bullet.js//子弹

	     　　　　｜---Global.js//共通

	 

	images文件夹｜--图片

	 

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

	首先建立index.html文件，

	 

	 

	 

	 

	<!DOCTYPE html> 

	<html> 

	<head> 

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

	<title>弹幕</title> 

	<!-- 

	<meta name="viewport" content="width=480,initial-scale=0.5, minimum-scale=0.5, maximum-scale=1.0,user-scalable=no" />

	 --> 

	<meta name="viewport" content="width=480,initial-scale=0.6" /> 

	<script type="text/javascript" src="../legend/legend.js"></script>  

	<script type="text/javascript" src="./js/Global.js"></script>  

	<script type="text/javascript" src="./js/Bullet.js"></script>  

	<script type="text/javascript" src="./js/Plain.js"></script>  

	<script type="text/javascript" src="./js/Main.js"></script>  

	</head> 

	<body> 

	<div id="mylegend">loading……</div> 

	 

	</body> 

	</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(); 

	 

	function main(){ 

	    //准备读取图片 

	    imgData.push({name:"back",path:"./images/back.jpg"}); 

	    imgData.push({name:"enemy",path:"./images/e.png"}); 

	    imgData.push({name:"player",path:"./images/player.png"}); 

	    imgData.push({name:"boss",path:"./images/boss.png"}); 

	    imgData.push({name:"ctrl",path:"./images/ctrl.png"}); 

	    imgData.push({name:"item1",path:"./images/1.png"}); 

	    //实例化进度条层 

	    loadingLayer = new LSprite(); 

	    loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff"); 

	    addChild(loadingLayer); 

	    //开始读取图片 

	    loadImage(); 

	} 

	function loadImage(){ 

	    //图片全部读取完成，开始初始化游戏 

	    if(loadIndex >= imgData.length){ 

	        removeChild(loadingLayer); 

	        legendLoadOver(); 

	        gameInit(); 

	        return; 

	    } 

	    //开始读取图片 

	    loader = new LLoader(); 

	    loader.addEventListener(LEvent.COMPLETE,loadComplete); 

	    loader.load(imgData[loadIndex].path,"bitmapData"); 

	} 

	function loadComplete(event){ 

	    //进度条显示 

	    loadingLayer.graphics.clear(); 

	    loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff"); 

	    loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000"); 

	    //储存图片数据 

	    imglist[imgData[loadIndex].name] = loader.content; 

	    //读取下一张图片 

	    loadIndex++; 

	    loadImage(); 

	} 

	 

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

	 

	 

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

	 

	 

	function gameInit(event){ 

	    //游戏底层实例化 

	    backLayer = new LSprite(); 

	    addChild(backLayer); 

	    //添加游戏背景 

	    bitmapdata = new LBitmapData(imglist["back"]); 

	    bitmap = new LBitmap(bitmapdata); 

	    backLayer.addChild(bitmap);}   

	 

	效果如下