用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

相关文章

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注