肉包子的摇滚生活

先上个效果图：

jquery生成webgame的地图

选型：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中

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

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

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');

};