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

最新推荐文章于 2026-06-17 14:22:47 发布

最新推荐文章于 2026-06-17 14:22:47 发布 · 310 阅读

标签

#jQuery #游戏 #CSS #JavaScript #F#

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个基于jQuery的Webgame战斗系统制作过程，利用PHP和MySQL进行后台支持。作者通过定义CSS样式和JavaScript代码实现了地图渲染功能。

[b]先上个效果图：[/b]
[img]/upload/attachment/46092/048232e5-7cf2-332d-8337-f76822751a47.jpg[/img]

选型：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);
		});		
	}
};

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


  <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，再下去就荒废了。
个人技术水平一般 :D 肯盼高人指点一下，有指教才有提高。诚挚感谢

最后顺便附上一个简单的时间测试代码，使用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');

};