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

本文主要是介绍用javascript实现简单的物质（密度）分布图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

典型的场景，比如牧场物语这类农场养成类的农地上的杂草，在长度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>