updated 添加多关卡支持（4关）

README.md

@@ -12,5 +12,5 @@
 - [x] NPC根据玩家坐标实时自动寻径
 - [x] 吃豆积分系统
 - [x] 能量豆功能
+- [x] 多关卡
 - [ ] 特殊物品记分
-- [ ] 多关卡

game.js

@@ -237,7 +237,7 @@ function Game(id,params){
         this._params = params||{};
         this._settings = {
             index:0,                        //布景索引
-            status:0,						//布景状态,0表示未激活/结束,1表示正常,2表示暂停,3表示临时,4表示异常
+            status:0,						//布景状态,0表示未激活/结束,1表示正常,2表示暂停,3表示临时状态
             maps:[],						//地图队列
             audio:[],						//音频资源
             images:[],						//图片资源
@@ -412,6 +412,10 @@ function Game(id,params){
             throw new Error('unfound new stage.');
         }
     };
+    //获取布景列表
+    this.getStages = function(){
+        return _stages;
+    };
     //初始化游戏引擎
     this.init = function(){
         _index = 0;

index.js

@@ -1,6 +1,8 @@
 //主程序,业务逻辑
 (function(){
-	var _DATA = [		//地图数据
+	var _COIGIG = [		//关卡
+		{				//第1关
+			'map':[		//地图数据
 				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
 				[1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
 				[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
@@ -33,17 +35,146 @@
 				[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
 				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
 			],
-	_GOODS = {			//能量豆
+			'wall_color':'#09f',
+			'goods':{		//能量豆
 				'1,3':1,
 				'26,3':1,
 				'1,23':1,
 				'26,23':1
+			}
 		},
+		{				//第2关
+			'map':[		//地图数据
+				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+				[1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+				[1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1],
+				[0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0],
+				[1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,1],
+				[1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,1],
+				[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1],
+				[1,1,1,0,1,1,1,1,1,0,1,1,1,2,2,1,1,1,0,1,1,1,1,1,0,1,1,1],
+				[1,1,1,0,1,1,1,1,1,0,1,2,2,2,2,2,2,1,0,1,1,1,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,0,0,0,1,2,2,2,2,2,2,1,0,0,0,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,0,1,2,2,2,2,2,2,1,0,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],
+				[0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0],
+				[1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1],
+				[1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1],
+				[1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
+				[1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,1],
+				[1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,1],
+				[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+				[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+			],
+			'wall_color':'#FF5983',
+			'goods':{		//能量豆
+				'1,2':1,
+				'26,2':1,
+				'1,27':1,
+				'26,27':1
+			}
+		},
+		{				//第3关
+			'map':[		//地图数据
+				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+				[1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1],
+				[1,0,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,0,1],
+				[1,0,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,0,1],
+				[1,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,1],
+				[1,0,1,1,0,1,1,0,1,1,1,1,0,1,1,0,1,1,1,1,0,1,1,0,1,1,0,1],
+				[1,0,0,0,0,1,1,0,1,1,1,1,0,1,1,0,1,1,1,1,0,1,1,0,0,0,0,1],
+				[1,1,1,1,0,1,1,0,1,1,1,1,0,1,1,0,1,1,1,1,0,1,1,0,1,1,1,1],
+				[1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1],
+				[0,0,0,0,0,1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1,1,0,0,0,0,0],
+				[1,0,1,1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1,1,0,1,1,0,1],
+				[1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,2,2,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,2,2,2,2,2,2,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,0,0,0,1,1,0,1,2,2,2,2,2,2,1,0,1,1,0,0,0,0,0,0,1],
+				[1,0,1,1,0,1,1,1,1,0,1,2,2,2,2,2,2,1,0,1,1,1,1,0,1,1,0,1],
+				[1,0,1,1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1,1,1,0,1,1,0,1],
+				[1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0],
+				[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],
+				[1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],
+				[1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1],
+				[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1],
+				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+			],
+			'wall_color':'#E08031',
+			'goods':{		//能量豆
+				'1,2':1,
+				'26,2':1,
+				'1,23':1,
+				'26,23':1
+			}
+		},
+		{				//第4关
+			'map':[		//地图数据
+				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+				[1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1],
+				[1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1],
+				[0,0,0,0,0,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,0,0,0,0,0,0],
+				[1,1,1,0,1,1,0,1,1,0,1,1,0,0,0,0,1,1,0,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],
+				[1,0,0,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,0,0,1],
+				[1,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,2,2,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,0,0,0,1,1,0,1,2,2,2,2,2,2,1,0,1,1,0,0,0,0,0,0,1],
+				[1,1,1,0,1,1,1,1,1,0,1,2,2,2,2,2,2,1,0,1,1,1,1,1,0,1,1,1],
+				[1,1,1,0,1,1,1,1,1,0,1,2,2,2,2,2,2,1,0,1,1,1,1,1,0,1,1,1],
+				[1,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,1],
+				[1,0,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,0,0,1],
+				[1,1,1,0,1,1,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1],
+				[0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0],
+				[1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1],
+				[1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1],
+				[1,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
+				[1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1],
+				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+			],
+			'wall_color':'#37C6C0',
+			'goods':{		//能量豆
+				'1,3':1,
+				'26,3':1,
+				'1,28':1,
+				'26,28':1
+			}
+		},
+	];
+	_COLOR = ['#F00','#F93','#0CF','#F9C'],	//NPC颜色
 	_COS = [1,0,-1,0],
 	_SIN = [0,1,0,-1],
-	_COLOR = ['#F00','#F93','#0CF','#F9C'],//红,橙,
+	_LIFE = 5,				//玩家生命值
-	_LIFE = 3,
+	_SCORE = 0;				//玩家得分
-	_SCORE = 0;		//得分
 
 	var game = new Game('canvas');
 	//启动页
@@ -107,7 +238,8 @@
 	})();
 	//游戏主程序
 	(function(){
-		var stage,map,beans,player,times;
+		_COIGIG.forEach(function(config,index){
+			var stage,map,beans,items,player,times;
 			stage = game.createStage({
 				update:function(){
 					var stage = this;
@@ -127,8 +259,10 @@
 								}
 							}
 						});
-					if(JSON.stringify(beans.data).indexOf(0)<0){	//当没有物品的时候，进入结束画面
+						if(JSON.stringify(beans.data).indexOf(0)<0){	//当没有物品的时候，进入下一关
+							setTimeout(function(){
 								game.nextStage();
+							},1500);
 						}
 					}else if(stage.status==3){		//场景临时状态
 						if(!stage.timeout){
@@ -136,7 +270,8 @@
 							if(_LIFE){
 								stage.resetItems();
 							}else{
-							game.nextStage();
+								var stages = game.getStages();
+								game.setStage(stages.length-1);
 								return false;
 							}
 						}
@@ -147,7 +282,7 @@
 			map = stage.createMap({
 				x:60,
 				y:10,
-			data:_DATA,
+				data:config['map'],
 				cache:true,
 				draw:function(context){
 					context.lineWidth = 2;
@@ -169,7 +304,7 @@
 									code[3]=1;
 								}
 								if(code.indexOf(1)>-1){
-								context.strokeStyle=value==2?"#FFF":"#09C";
+									context.strokeStyle=value==2?"#FFF":config['wall_color'];
 									var pos = this.coord2position(i,j);
 									switch(code.join('')){
 										case '1100':
@@ -218,7 +353,7 @@
 			beans = stage.createMap({
 				x:60,
 				y:10,
-			data:_DATA,
+				data:config['map'],
 				frames:8,
 				draw:function(context){
 					for(var j=0; j<this.y_length; j++){
@@ -226,7 +361,7 @@
 							if(!this.get(i,j)){
 								var pos = this.coord2position(i,j);
 								context.fillStyle = "#F5F5DC";
-							if(_GOODS[i+','+j]){
+								if(config['goods'][i+','+j]){
 									context.beginPath();
 									context.arc(pos.x,pos.y,3+this.times%2,0,2*Math.PI,true);
 									context.fill();
@@ -239,34 +374,44 @@
 					}
 				}
 			});
-		//得分
+			//关卡得分
 			stage.createItem({
 				x:690,
-			y:100,
+				y:80,
 				draw:function(context){
-				context.font = 'bold 28px Helvetica';
+					context.font = 'bold 26px Helvetica';
 					context.textAlign = 'left';
 					context.textBaseline = 'bottom';
 					context.fillStyle = '#C33';
 					context.fillText('SCORE',this.x,this.y);
-				context.font = '28px Helvetica';
+					context.font = '26px Helvetica';
 					context.textAlign = 'left';
 					context.textBaseline = 'top';
 					context.fillStyle = '#FFF';
 					context.fillText(_SCORE,this.x+12,this.y);
+					context.font = 'bold 26px Helvetica';
+					context.textAlign = 'left';
+					context.textBaseline = 'bottom';
+					context.fillStyle = '#C33';
+					context.fillText('LEVEL',this.x,this.y+72);
+					context.font = '26px Helvetica';
+					context.textAlign = 'left';
+					context.textBaseline = 'top';
+					context.fillStyle = '#FFF';
+					context.fillText(index+1,this.x+12,this.y+72);
 				}
 			});
 			//状态文字
 			stage.createItem({
 				x:690,
-			y:320,
+				y:285,
 				frames:25,
 				draw:function(context){
 					if(stage.status==2&&this.times%2){
 						context.font = '24px Helvetica';
 						context.textAlign = 'left';
 						context.textBaseline = 'center';
-					context.fillStyle = '#09F';
+						context.fillStyle = '#FFF';
 						context.fillText('PAUSE',this.x,this.y);
 					}
 				}
@@ -274,11 +419,12 @@
 			//生命值
 			stage.createItem({
 				x:705,
-			y:540,
+				y:510,
 				width:30,
 				height:30,
 				draw:function(context){
-				for(var i=0;i<_LIFE-1;i++){
+					var max = Math.min(_LIFE-1,5);
+					for(var i=0;i<max;i++){
 						var x=this.x+40*i,y=this.y;
 						context.fillStyle = '#FFE600';
 						context.beginPath();
@@ -287,6 +433,11 @@
 						context.closePath();
 						context.fill();
 					}
+					context.font = '26px Helvetica';
+					context.textAlign = 'left';
+					context.textBaseline = 'center';
+					context.fillStyle = '#FFF';
+					context.fillText('X '+(_LIFE-1),this.x-15,this.y+30);
 				}
 			});
 			//NPC
@@ -459,7 +610,7 @@
 						if(!beans.get(this.coord.x,this.coord.y)){	//吃豆
 							_SCORE++;
 							beans.set(this.coord.x,this.coord.y,1);
-						if(_GOODS[this.coord.x+','+this.coord.y]){	//吃到能量豆
+							if(config['goods'][this.coord.x+','+this.coord.y]){	//吃到能量豆
 								items.forEach(function(item){
 									if(item.status==1||item.status==3){	//如果NPC为正常状态，则置为临时状态
 										item.timeout = 450;
@@ -512,6 +663,7 @@
 					break;
 				}
 			});
+		});
 	})();
 	//结束画面
 	(function(){
@@ -525,7 +677,7 @@
 				context.font = 'bold 48px Helvetica';
 				context.textAlign = 'center';
 				context.textBaseline = 'middle';
-				context.fillText('GAME OVER',this.x,this.y);
+				context.fillText(_LIFE?'YOU WIN!':'GAME OVER',this.x,this.y);
 			}
 		});
 		//记分
@@ -546,7 +698,7 @@
 				case 13: //回车
 				case 32: //空格
 				_SCORE = 0;
-				_LIFE = 3;
+				_LIFE = 5;
 				var st = game.setStage(1);
 				st.reset();
 				break;