updated 添加4个NPC角色，实现多NPC包抄玩家功能

game.js

@@ -29,6 +29,7 @@ function Game(id,options){
 			width:20,				//宽
 			height:20,				//高
 			type:0,					//对象类型,0表示普通对象(不与地图绑定),1表示玩家控制对象,2表示程序控制对象
+			color:'#F00',			//标识颜色
 			status:1,				//对象状态,1表示正常,0表示隐藏,2表示暂停
 			orientation:0,			//当前定位方向,0表示上,1表示右,2表示下,3表示左
 			vector:{},				//目标坐标
@@ -110,7 +111,7 @@ function Game(id,options){
 	//寻址算法
 	Map.prototype.finder = function(param){
 		var defaults = {
-			map:this.data,
+			map:null,//this.data,
 			start:{},
 			end:{}
 		};
@@ -125,7 +126,6 @@ function Game(id,options){
 			return [];
 		}
 		var finded = false;
-		var _self = this;
 		var y_length  = options.map.length;
 		var x_length = options.map[0].length;
 		var steps = []; 	//步骤的映射
@@ -139,7 +139,7 @@ function Game(id,options){
 			var new_list = [];
 			var next = function(from,to){
 				if(!finded){
-					var value = _self.get(to.x,to.y);
+					var value = typeof options.map[to.y][to.x] !='undefined'?options.map[to.y][to.x]:-1;
 					if(value!=1){	//当前点是否可以走
 						if(value==-1){
 							to.x = (to.x+x_length)%x_length;
@@ -190,7 +190,7 @@ function Game(id,options){
 		for(var i in settings){
 			this[i] = options[i]||settings[i];
 		}
-	}
+	};
 	//动画开始
 	Stage.prototype.start = function() {
 		var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame;
@@ -233,9 +233,21 @@ function Game(id,options){
 		//动态属性
 		item.stage = this;
 		item.index = this.items.length;
+		if(this.map&&item.type){
+			item.coord = this.map.position2coord(item.x,item.y);
+		}
 		this.items.push(item);
 		return item;
 	};
+	//获取对象列表
+	Stage.prototype.getItemsByType = function(type){
+		var items = this.items.filter(function(item){
+			if(item.type==type){
+				return item;
+			}
+		});
+		return items;
+	};
 	//添加地图
 	Stage.prototype.createMap = function(options){
 		var map = new Map(options);

index.js

@@ -339,120 +339,140 @@
 				context.fill();
 			}
 		});
-		var pos = map.coord2position(12,14);
+		var NPC_COLOR = ['#96F','#6C6','#C30','#3C9'];
-		stage.createItem({
+		for(var i=0;i<4;i++){
-			x:pos.x,
+			var pos = map.coord2position(12+i,14);
-			y:pos.y,
+			stage.createItem({
-			width:30,
+				x:pos.x,
-			height:30,
+				y:pos.y,
-			type:2,
+				width:30,
-			frames:10,
+				height:30,
-			speed:1,
+				color:NPC_COLOR[i],
-			update:function(){
+				type:2,
-				if(!this.coord.offset){
+				frames:10,
-					this.path = map.finder({
+				speed:1,
-						start:this.coord,
+				update:function(){
-						end:player.coord
+					if(!this.coord.offset){
-					});
+						var new_map = [];
-					if(this.path.length){
+						for(var j=0;j<map.data.length;j++){
-						this.vector = this.path[0];
+							new_map[j]=[];
-						if(this.vector.change){ //是否转变方向
+							for(var k=0;k<map.data[0].length;k++){
-							this.coord.x = this.vector.x;
+								new_map[j][k]=map.data[j][k];
-							this.coord.y = this.vector.y;
+							}
-							var pos = map.coord2position(this.coord.x,this.coord.y);
+						}
-							this.x = pos.x;
+						var items = stage.getItemsByType(2);
-							this.y = pos.y;
+						var index = this.index;
+						items.forEach(function(item){
+							if(item.coord.y&&item.index!=index){
+								new_map[item.coord.y][item.coord.x]=1;
+							}
+						});
+						this.path = map.finder({
+							map:new_map,
+							start:this.coord,
+							end:player.coord
+						});
+						if(this.path.length){
+							this.vector = this.path[0];
+							if(this.vector.change){ //是否转变方向
+								this.coord.x = this.vector.x;
+								this.coord.y = this.vector.y;
+								var pos = map.coord2position(this.coord.x,this.coord.y);
+								this.x = pos.x;
+								this.y = pos.y;
+							}
+						}
+						if(this.vector.x>this.coord.x){
+							this.orientation = 1;
+						}else if(this.vector.x<this.coord.x){
+							this.orientation = 3;
+						}else if(this.vector.y>this.coord.y){
+							this.orientation = 2;
+						}else if(this.vector.y<this.coord.y){
+							this.orientation = 0;
 						}
 					}
-					if(this.vector.x>this.coord.x){
+					switch(this.orientation){
-						this.orientation = 1;
+						case 0:
-					}else if(this.vector.x<this.coord.x){
+								this.y-=this.speed;
-						this.orientation = 3;
+							break;
-					}else if(this.vector.y>this.coord.y){
+						case 1:
-						this.orientation = 2;
+								this.x+=this.speed;
-					}else if(this.vector.y<this.coord.y){
+							break;
-						this.orientation = 0;
+						case 2:
+								this.y+=this.speed;
+							break;
+						case 3:
+								this.x-=this.speed;
+							break;
 					}
+				},
+				draw:function(context){
+					context.fillStyle = this.color;
+					context.beginPath();              
+	            	context.arc(this.x,this.y,this.width*.5,0,Math.PI,true);
+	            	switch(this.times%2){
+	            		case 0:
+	            			context.lineTo(this.x-this.width*.5,this.y+this.height*.4);
+	            			context.quadraticCurveTo(this.x-this.width*.4,this.y+this.height*.5,this.x-this.width*.2,this.y+this.height*.3);
+			            	context.quadraticCurveTo(this.x,this.y+this.height*.5,this.x+this.width*.2,this.y+this.height*.3);
+			            	context.quadraticCurveTo(this.x+this.width*.4,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.4);
+			            	break;
+			            case 1:
+			            	context.lineTo(this.x-this.width*.5,this.y+this.height*.3);
+			            	context.quadraticCurveTo(this.x-this.width*.25,this.y+this.height*.5,this.x,this.y+this.height*.3);
+			            	context.quadraticCurveTo(this.x+this.width*.25,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.3);
+			            	break;
+	            	}
+	            	context.fill();
+	            	context.closePath();
+	            	context.fillStyle = '#FFF';
+	            	context.beginPath();
+	            	context.arc(this.x-this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
+	            	context.fill();
+	            	context.closePath();
+	            	context.beginPath();
+	            	context.arc(this.x+this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
+	            	context.fill();
+	            	context.closePath();
+	            	context.fillStyle = '#000';
+	            	switch(this.times%4){
+	            		case 2:
+	            		case 0:
+			            	context.beginPath();
+			            	context.arc(this.x-this.width*.15,this.y-this.height*.27,this.width*.07,0,2*Math.PI,false);
+			            	context.fill();
+			            	context.closePath();
+			            	context.beginPath();
+			            	context.arc(this.x+this.width*.15,this.y-this.height*.27,this.width*.07,0,2*Math.PI,false);
+			            	context.fill();
+			            	context.closePath();
+	            			break;
+	            		case 1:
+	            			context.beginPath();
+			            	context.arc(this.x-this.width*.17,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
+			            	context.fill();
+			            	context.closePath();
+			            	context.beginPath();
+			            	context.arc(this.x+this.width*.13,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
+			            	context.fill();
+			            	context.closePath();
+	            			break;
+	            		case 3:
+	            			context.beginPath();
+			            	context.arc(this.x-this.width*.13,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
+			            	context.fill();
+			            	context.closePath();
+			            	context.beginPath();
+			            	context.arc(this.x+this.width*.17,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
+			            	context.fill();
+			            	context.closePath();
+			            	break;
+	            	}
 				}
-				switch(this.orientation){
+			});
-					case 0:
+		}
-							this.y-=this.speed;
+
-						break;
-					case 1:
-							this.x+=this.speed;
-						break;
-					case 2:
-							this.y+=this.speed;
-						break;
-					case 3:
-							this.x-=this.speed;
-						break;
-				}
-			},
-			draw:function(context){
-				context.fillStyle = '#F00';
-				context.beginPath();              
-            	context.arc(this.x,this.y,this.width*.5,0,Math.PI,true);
-            	switch(this.times%2){
-            		case 0:
-            			context.lineTo(this.x-this.width*.5,this.y+this.height*.4);
-            			context.quadraticCurveTo(this.x-this.width*.4,this.y+this.height*.5,this.x-this.width*.2,this.y+this.height*.3);
-		            	context.quadraticCurveTo(this.x,this.y+this.height*.5,this.x+this.width*.2,this.y+this.height*.3);
-		            	context.quadraticCurveTo(this.x+this.width*.4,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.4);
-		            	break;
-		            case 1:
-		            	context.lineTo(this.x-this.width*.5,this.y+this.height*.3);
-		            	context.quadraticCurveTo(this.x-this.width*.25,this.y+this.height*.5,this.x,this.y+this.height*.3);
-		            	context.quadraticCurveTo(this.x+this.width*.25,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.3);
-		            	break;
-            	}
-            	context.fill();
-            	context.closePath();
-            	context.fillStyle = '#FFF';
-            	context.beginPath();
-            	context.arc(this.x-this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
-            	context.fill();
-            	context.closePath();
-            	context.beginPath();
-            	context.arc(this.x+this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
-            	context.fill();
-            	context.closePath();
-            	context.fillStyle = '#00F';
-            	switch(this.times%4){
-            		case 2:
-            		case 0:
-		            	context.beginPath();
-		            	context.arc(this.x-this.width*.15,this.y-this.height*.27,this.width*.07,0,2*Math.PI,false);
-		            	context.fill();
-		            	context.closePath();
-		            	context.beginPath();
-		            	context.arc(this.x+this.width*.15,this.y-this.height*.27,this.width*.07,0,2*Math.PI,false);
-		            	context.fill();
-		            	context.closePath();
-            			break;
-            		case 1:
-            			context.beginPath();
-		            	context.arc(this.x-this.width*.17,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
-		            	context.fill();
-		            	context.closePath();
-		            	context.beginPath();
-		            	context.arc(this.x+this.width*.13,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
-		            	context.fill();
-		            	context.closePath();
-            			break;
-            		case 3:
-            			context.beginPath();
-		            	context.arc(this.x-this.width*.13,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
-		            	context.fill();
-		            	context.closePath();
-		            	context.beginPath();
-		            	context.arc(this.x+this.width*.17,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
-		            	context.fill();
-		            	context.closePath();
-		            	break;
-            	}
-			}
-		});
 		stage.bind('keydown',function(e){
 			player.control = {orientation:MAP_ORIENTATION[e.keyCode]};
 		});