用javascript实现简单的物质（密度）分布图

最新推荐文章于 2023-10-25 16:18:24 发布

sinolzeng

最新推荐文章于 2023-10-25 16:18:24 发布

阅读量596

点赞数

分类专栏： HTML/HTML5 Javascript

本文链接：https://blog.csdn.net/sinolzeng/article/details/113788889

版权

Javascript 同时被 2 个专栏收录

95 篇文章 1 订阅

订阅专栏

HTML/HTML5

31 篇文章 3 订阅

订阅专栏

可能这个东西大部分人看名字都觉得云里雾里，先不废话，上张图：

在游戏开发的时候，经常生成各种各样的随机地图，在这些随机地图里面，往往需要随机的物质分布。

典型的场景，比如牧场物语这类农场养成类的农地上的杂草，在长度x和宽度为y的范围内生成杂草。

又或者，像泰拉瑞亚这样的游戏，需要在一定范围内生成随机的矿物质分布图。

那么，这种东西要怎么实现呢？实现方法其实很多，我在外网找到的很多教程都把简单问题复杂化了，用到了很多算法。不是说算法不好，而是对性能的要求比较高，如果是前端开发，自然是越简单越好。一些场景，比如生成随机的迷宫地图，这个就确实需要一些比较复杂的算法，但是，这种物质密度分布类的，其实是不需要那么麻烦的。（我找的这两张参考图其实不太好，它们这种场景比较复杂，但是意思到了就行。）

回到上面的问题，在一定范围一些杂草，假设长x宽y，我们可以用最简单的math.random()随便摇一些坐标，然后生成杂草即可。

但是杂草还行，如果是矿物质分布，这样的分布会非常非常稀疏和诡异，怎么办。

假设一个这样的地图，地图上有五个矿区，矿区内的物质是高度密实的，但是除了矿区，外面只有极其零散的小矿点，或者干脆连小矿点都没有，那怎么办？

很简单，我们把一个矿区看成是上面的一个杂草，先生成矿物位置，再在矿区位置内部进行一次高密度的“杂草生成”。

如果是超大地图，还可以进一步颗粒化。比如先在地图生成很多不同的区域，有森林沙漠矿区等等，其中矿区也不是每一点都有矿，在矿区内部再进行一次位置生成，最后再在各个位置生成不同密度的矿。

相当于递归的思想。

至于每个矿区内部怎么实现，矿物质的种类、密度，这些可以通过对最底层的物质生成函数进行修改和自定义即可。

需要注意的一点就是，在矿区内部使用生成矿物质，有允许叠加和不允许叠加的场景。如果允许叠加那么就什么都不用说了，如果不允许叠加的话则只需要在生成第n个的时候做一个碰撞检测，如果与其他区域或者物质有交叠则不生成，这样就可以了。

由于现在工作太忙，只能记录一下这个设计思路，但是我相信这个思路对付一些日常场景就很够用了，大部分的随机物质生成并不需要太过复杂。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden;">

</body>
<script type="text/javascript">
function id(x){return document.getElementById(x);}

function print(x){console.log(x);}

function random(lower,upper){return lower+Math.floor(Math.random()*(upper-lower+1));}

Array.prototype.foreach = function(func){
	for(var i=0;i<this.length;i++){
		func(i,this[i]);
	}
}

var w = window.innerWidth;
var h = window.innerHeight;
var Source = {};

function locatePosition(x,y,width,height,num){
	var tmp = [];
	for(var i=0;i<num;i++){
		tmp.push({"x":x+Math.random()*width,"y":y+Math.random()*height});
	}
	return tmp;
}

function generate(x,y,type,amount){
	var v = this;
	var amount = amount || 1; 
	v.avator = document.createElement('DIV');
	v.avator.style = 'position:absolute;border:1px solid black';
	v.type = type;
	if(type=='grass'){
		v.avator.style.backgroundColor = 'green';
	}
	if(!Source[type])Source[type] = [];
	v.radius = amount/2;
	v.avator.style.width  = amount + "px";
	v.avator.style.height = amount + "px";
	v.x = x;
	v.y = y;
	v.avator.style.left = (v.x-v.radius) + "px";
	v.avator.style.top =  (v.y-v.radius) + "px";
	document.body.appendChild(v.avator);
	Source[type].push(v);
}



function start(){
	var grassPosition = locatePosition(0,0,w,h,30);
	var grassPositionGroup = [];
	var grassRange = 100; //范围
	var density = 30;//密度
	grassPosition.foreach(function(i,c){
		grassPositionGroup = grassPositionGroup.concat(locatePosition(c.x-grassRange,c.y-grassRange,grassRange,grassRange,density));
	});
	print(grassPositionGroup);
	for(var i=0;i<grassPositionGroup.length;i++){
		generate(grassPositionGroup[i].x,grassPositionGroup[i].y,"grass",random(1,8));
	}

}

var lastTime = new Date();
var thisTime = lastTime;
var lerp = 0;
function update(){
	thisTime = new Date();
	lerp = thisTime - lastTime;
	
	requestAnimationFrame(update);
	lastTime = thisTime;
}

start();
//update();

</script>
</html>