玩玩webgame开发（2）：人物移动与战争迷雾实现

全栈程序员-用户IM • 2022年5月25日上午6:00 • 未分类

大家好，又见面了，我是你们的朋友全栈君。惯例，先上下效果图片：

[img]/upload/attachment/47613/3b8e0d31-b9cc-3272-abbb-0941300a68ef.png[/img]

在上一篇玩玩webgame开发（1）大概给出了jquery方式的地图实现，最近又做了一些改进，加进了更多元素。代码全部改成jquery插件的方式。有机会做专门的介绍。

这次的主题主要是地图上面人物的移动以及战争迷雾的实现。

人物的移动其实比较简单，就是监听键盘上下左右按键事件。

	
$(document).keydown(function(event){
  
  
			$.boboMove(event);
});

后台boboMove函数的写法：


	switch(event.keyCode){
  
  
		case 37: 
			if(bobo.pos.X > minX){ //判断地图边缘
				bobo.pos.X -= 1; //坐标变化
				$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);//将人物移动到这个位置上，实际做法就是将人物的图片放在这个div上面
			}
			break; 
		case 38:
			if(bobo.pos.Y < maxY){
  
  
				bobo.pos.Y += 1;
				$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);
			}
			break; 
		case 39: 
			if(bobo.pos.X < maxX){
  
  
				bobo.pos.X += 1;
				$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);
			}
		break; 
		case 40: 
			if(bobo.pos.Y > minY){
  
  
				bobo.pos.Y -= 1;
				$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);
			}
		break;
	}
	cleanBattleFog(); //清除战争迷雾

我写的这个webgame打算做个战争迷雾的效果，玩过魔兽争霸或者英雄无敌的人应该对这个概念很清楚，就是在没有探索之前，地图上面的区域都是迷雾覆盖无法看到的。

迷雾覆盖效果实现其实很简单，对于我所做的系统来说，迷雾就是所有的区域div都加上一个battleFog的css。

移除战争迷雾的算法是这样的：在人物的视野内的格子div移除battleFog这个css类。例如人物视野为1，人物坐标3，3。那么视野内的(2,3),(3,3),(3,4),(4,3),(3,2)。显示出来就是一个十字形，如果视野是2，那么显示出来就类似一个星形。

在正式给出代码之前，各位看客可以自己考虑一下这个算法的实现。可能大家都觉得这个很简单。。但是今天在写这个的时候才发觉这个看似简单的问题要写好不那么好想， :oops: :oops: 可能很久没动脑筋了吧，这里卖个小关子，大家动动脑筋想想，给出人物当前的坐标，以及人物的视野，得出当前人物所有可以看到的坐标。

=================思考十分钟分割线=================

:D

:D

:D

:D

:D

呵呵，最后给出我的战争迷雾移除算法：


function cleanBattleFog(){
  
  
	var fogToBeClean = []; //将被移除迷雾的区域数组，保存所有将被移除迷雾的div的id
//bobo.pos.X 人物X坐标，
//bobo.pos.Y 人物Y坐标
//bobo.eyeshot 人物视野
	for(var m =bobo.pos.X-bobo.eyeshot;m<=bobo.pos.X+bobo.eyeshot; m++ ){
  
  
		for(var n=bobo.pos.Y-bobo.eyeshot;n<=bobo.pos.Y+bobo.eyeshot;n++){
  
  
			var xdiff = m - bobo.pos.X;
			var ydiff = n - bobo.pos.Y;
			if(xdiff*xdiff + ydiff*ydiff <= bobo.eyeshot*bobo.eyeshot
				 && m>=1 && n>=1 && m <= map.maxY && n <= map.maxX
			){
  
  
				fogToBeClean.push('#X'+m+'Y'+n);
			}
		}
	}
	$(fogToBeClean.join(',')).removeClass('battleFog');
}