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>?
?
?
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的用javascript实现简单的物质（密度）分布图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度网盘javascript加速视频播放
- 下一篇： 用javascript实现数字雨