玩玩webgame开发（1）：用jquery生成地图

先上个效果图：


选型：jquery,php,mysql。我喜欢jquery，灵活，强大的选择器，还算够用的ajax功能，还有丰富的plugin，以及effects，这些对于做webgame都是很有用的。php打算用框架来做，不过我php也是半吊子，现在在cakephp跟国产的fleaphp中犹豫不决。mysql，无条件选用

=正文=

由于我很想做一个战斗系统来玩，类似war3里面迷雾探索的，所以不管3721，js直接从战斗系统开始写。晚上写了一会，大概整出这样的代码。

var battle = {
	//can accect a random map
	createMap:function(map){	     
		var defaultMap = [       //定义默认地图，字母分别对应css的类名
			['g','r','f','f','f','r','f','w'],			
			['w','g','f','f','f','r','g','f'],			
			['w','r','g','f','f','g','f','r'],			
			['f','r','f','f','f','r','f','f'],
		];				
//函数传递进来的参数判断
		if(boboUtil.isUndefined(map) || map.length == 0){
			map = defaultMap;
		}
//将2维数组转化为1维数组		
		var mapSequence =  new Array();		
		for(var i=0;i<map.length;i++){
			mapSequence = mapSequence.concat(map[i]);
		}
//计算地图的宽，即横向总共几个格子
		var fieldWidth = map[0].length;
//设置地图的总宽度
		$("#battleField").width(fieldWidth*50);
//为每个格子设置对应的css类，即渲染地图	
		$("#battleField div").each(function(i){			
			//create map
			if(i > mapSequence.length )	
				return false;
			$(this).addClass(mapSequence[i]);
//设置格子的坐标			
			//set x,y index
			var x = i % fieldWidth +1;
			var y = Math.floor(i / fieldWidth +1);
			$(this).attr("id",""+x+y);
		});		
	}
};	

实现原理：

• 页面上先添加适当数目的空div，我觉得用js添加div可能存在性能问题，所以直接html里面放置一些空的div，作为地图元素。
• 定义一系列的css，为不同格子地图设置好宽高与背景色，实际运用时候这些背景可以换成图片什么的。
• 定义一个map的数组，这个数组保存地图的信息，即地图每个格子的css类名，通过js，将这些css类名添加到每个div中

  <div id="battleField">
      <div></div><div></div><div></div><div></div><div></div><div></div>
	  <div></div><div></div><div></div><div></div><div></div><div></div>
	  <div></div><div></div><div></div><div></div><div></div><div></div>
	  <div></div><div></div><div></div><div></div><div></div><div></div>
	  <div></div><div></div><div></div><div></div><div></div><div></div>
	  <div></div><div></div><div></div><div></div><div></div><div></div>
  </div>

    div.f{
		background:#666;
		height:50px;
		width:50px;
	}
	div.r{
		background:#000;
		height:50px;
		width:50px;
	}
	div.w{
		background:#FFF;
		height:50px;
		width:50px;
	}
	div.g{
		background: #DDD;;
		height:50px;
		width:50px;
	}
	div#battleField{
		width:700px;
		border: 1px solid #999;
		float: left;
	}
	div#battleField div{
		float: left;
	}

最近业余时间想找点事情做，看我家MM似乎回家都比较无聊，就一个劲看片，就想给她写个webgame玩吧，至于为什么不做其他的游戏啥的，好吧，我承认我只会web。也想练练自己的JavaScript，提高下js水平，虽然对js很有兴致，但是工作方面都是做java，再下去就荒废了。
个人技术水平一般 肯盼高人指点一下，有指教才有提高。诚挚感谢

最后顺便附上一个简单的时间测试代码，使用console.log，请在firefox用firebug查看，当然，如果是IE，可以把这句换成alert。用法简单，在页面上写：

executeTimeTest(yourFunction())

var executeTimeTest=function(func){
	var start = 0;
	var end = 0;	
	start = new Date().getTime()	
	for(i = 0; i < 10000000; i++) {
		func;
	}
	end = new Date().getTime();
	console.log((end - start) / 1000+'s');

};

评论

2 楼 playfish 2009-03-24  

ithero 写道

楼主不错呀,思路很准,以前学过游戏开发么?

没,喜欢玩游戏倒是真的.最近也有在帮人做webgame的地图.

1 楼 ithero 2009-03-24  

楼主不错呀,思路很准,以前学过游戏开发么?