游戏地图绘制

game.js

@@ -75,6 +75,12 @@ function Game(id,options){
 			this[i] = options[i]||settings[i];
 		}
 	};
+	Map.prototype.get = function(j,i){
+		if(this.data[j]&&typeof this.data[j][i]!='undefined'){
+			return this.data[j][i];
+		}
+		return -1;
+	};
 	//布景对象构造器
 	var Stage = function(options){
 		options = options||{};
@@ -134,6 +140,7 @@ function Game(id,options){
 	//添加地图
 	Stage.prototype.createMap = function(options){
 		var map = new Map(options);
+		this.map = map;
 		map.stage = this;
 		return map;
 	};

index.js

@@ -63,6 +63,39 @@
 		});
 	})();
 	//游戏主程序
+	var map_data = [
+	[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],
+	[1,0,1,0,0,1,0,1,0,0,0,1,0,1,1,0,1,0,0,0,1,0,1,0,0,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,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,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,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],
+	[1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1],
+	[0,0,0,0,0,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,0,0,0,0,0],
+	[0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
+	[0,0,0,0,0,1,0,1,1,0,1,1,1,0,0,1,1,1,0,1,1,0,1,0,0,0,0,0],
+	[1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1],
+	[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0],
+	[1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1],
+	[0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0],
+	[0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
+	[0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0],
+	[1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,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],
+	[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,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,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,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,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1],
+	[1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,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,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]
+];		//地图数据
 	(function(){
 		var stage = game.createStage();
 		stage.bind('keydown',function(e){
@@ -73,29 +106,56 @@
 				break;
 			}
 		});
-		//logo
+		//绘制地图
-		stage.createItem({
+		stage.createMap({
-			x:game.width/2,
+			x:60,
-			y:game.height*.45,
+			y:15,
-			width:100,
+			data:map_data,
-			height:100,
-			speed:10,
 			draw:function(context){
-				context.fillStyle = '#FC3';
+				var x_length = this.data[0].length;
-				context.beginPath();
+				var y_length = this.data.length;
-				if(this.frames%2){
+				for(var i=0; i<x_length; i++){
-					context.arc(this.x,this.y,this.width/2,.20*Math.PI,1.80*Math.PI,false);
+					for(var j=0; j<y_length; j++){
-				}else{
+						context.lineWidth = 2;
-					context.arc(this.x,this.y,this.width/2,.01*Math.PI,1.99*Math.PI,false);
+						context.strokeStyle="#09c";
+						if(this.get(j,i)){
+							var x = this.x+i*this.size;
+							var y = this.y+j*this.size;
+							if(this.get(j,i-1)&&!(this.get(j-1,i-1)&&this.get(j+1,i-1)&&this.get(j-1,i)&&this.get(j+1,i))){
+								if(i){
+									context.beginPath();
+									context.moveTo(x,y);
+									context.lineTo(x-this.size/2,y);
+									context.stroke();
+								}
+							}
+							if(this.get(j,i+1)&&!(this.get(j-1,i+1)&&this.get(j+1,i+1)&&this.get(j-1,i)&&this.get(j+1,i))){
+								if(i<x_length-1){
+									context.beginPath();
+									context.moveTo(x,y);
+									context.lineTo(x+this.size/2,y);
+									context.stroke();
+								}
+							}
+							if(this.get(j-1,i)&&!(this.get(j-1,i-1)&&this.get(j-1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){
+								if(j){
+									context.beginPath();
+									context.moveTo(x,y);
+									context.lineTo(x,y-this.size/2);
+									context.stroke();
+								}
+							}
+							if(this.get(j+1,i)&&!(this.get(j+1,i-1)&&this.get(j+1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){
+								if(j<y_length-1){
+									context.beginPath();
+									context.moveTo(x,y);
+									context.lineTo(x,y+this.size/2);
+									context.stroke();
+								}
+							}
+						}
+					}
 				}
-				context.lineTo(this.x,this.y);
-				context.closePath();
-				context.fill();
-				context.fillStyle = '#000';
-				context.beginPath();
-				context.arc(this.x+5,this.y-27,7,0,2*Math.PI,false);
-				context.closePath();
-				context.fill();
 			}
 		});
 	})();