用javascript实现简单的物质(密度)分布图

2024-01-02 02:38

本文主要是介绍用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>

 

 

 

这篇关于用javascript实现简单的物质(密度)分布图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/561118

相关文章

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》:本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok?二、@SneakyThrows

Java中字符串转时间与时间转字符串的操作详解

《Java中字符串转时间与时间转字符串的操作详解》Java的java.time包提供了强大的日期和时间处理功能,通过DateTimeFormatter可以轻松地在日期时间对象和字符串之间进行转换,下面... 目录一、字符串转时间(一)使用预定义格式(二)自定义格式二、时间转字符串(一)使用预定义格式(二)自

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren

Java Response返回值的最佳处理方案

《JavaResponse返回值的最佳处理方案》在开发Web应用程序时,我们经常需要通过HTTP请求从服务器获取响应数据,这些数据可以是JSON、XML、甚至是文件,本篇文章将详细解析Java中处理... 目录摘要概述核心问题:关键技术点:源码解析示例 1:使用HttpURLConnection获取Resp

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.