随机生成不重复的或重叠在画布对象 [英] Randomly generate objects in canvas without duplicate or overlap
问题描述
如何生成的对象在地图上，没有他们占据同一空间或重叠在HTML5画布？
X坐标是随机生成的，在一定程度上。我以为数组中检查，看看它是否已经出现，之后在接下来的20值（占宽），没有运气。
VAR nrOfPlatforms = 14，
平台= []，
platformWidth = 20，
platformHeight = 20;
VAR generatePlatforms =功能（）{
VAR positiony = 0，类型;
对于（VAR I = 0; I＆LT; nrOfPlatforms;我++）{
类型= ~~（的Math.random（）* 5）;
如果（类型== 0）类型= 1;
其他类型= 0;
VAR位X =（的Math.random（）* 4000）+ 500 - （点/ 100）;
VAR duplicatetest = 21;
对于（VAR D = 0; D＆LT; duplicatetest; d ++）{
VAR重复= $（jQuery.inArray（（位X + D），平台））;
如果（重复大于0）{
VAR duplicateconfirmed = TRUE;
}
}
如果（duplicateconfirmed）{
VAR位X =位X + 20;
}
VAR duplicateconfirmed = FALSE;
平台由[i] =新平台（位X，positiony，类型）;
}
}（）;
我原来做了一个作弊修复通过让他们在一个地区大约4000大产生，降低的可能性，但我想增加难度随着比赛的进行，使它们显得更加在一起，使其更难。但后来他们重叠。
在原油图片的形式，我想这
.... [] ... [] ..... []。[]。[] [] ...
这不是
...... [] ... [[]] ... [[]] ... [] ....
我希望是有道理的。
有关参考，在这里是数组检查和难度，只是廉价的距离破解前的code。
VAR nrOfPlatforms = 14，
平台= []，
platformWidth = 20，
platformHeight = 20;
VAR generatePlatforms =功能（）{
VAR位置= 0，类型;
对于（VAR I = 0; I＆LT; nrOfPlatforms;我++）{
类型= ~~（的Math.random（）* 5）;
如果（类型== 0）类型= 1;
其他类型= 0;
平台由[i] =新平台（（的Math.random（）* 4000）+ 500，位置，类型）;
}
}（）;
编辑1
一些调试完毕后，重复正在恢复为[对象对象]，而不是索引号，不知道为什么，虽然
编辑2
问题是opbjects都在阵列平台，x是数组对象，所以我怎么能再次里面搜索？ ，这就是为什么它被之前失败。
由于萤火虫和执行console.log（平台）;
平台= [对象{形象= IMG，X = 1128，Y = 260，更...}，{对象图像= IMG，X = 1640，Y = 260，更...}等
您可以实现一个while循环试图插入一个对象，并默默地如果碰撞失败。然后添加一个计数器和成功的对象的期望数量的已被置于后退出而循环。如果对象是接近这个循环可能运行的时间更长，所以你可能还需要给它一个最大寿命。或者你可以实现一个'是它甚至可以放置地图x和y的在z对象的，从运行下去prevent它。
下面是这方面的一个例子（演示）：
//在不发生重叠随机位置装满20×20点的数组
变种平台= []，
platformSize = 20，
platformWidth = 200，
platformHeight = 200;功能generatePlatforms（K）{
变种放置= 0，
maxAttempts = K * 10;
而（置于与所述; K＆放大器;＆放大器; maxAttempts大于0）{
VAR X = Math.floor（的Math.random（）* platformWidth）
Y = Math.floor（的Math.random（）* platformHeight）
可用= TRUE;
对（在平台VAR点）{
如果（Math.abs（point.x-X）LT; platformSize＆放大器;＆安培; Math.abs（point.y-Y）LT; platformSize）{
可用= FALSE;
打破;
}
}
如果可供使用的话） {
platforms.push（{
X：X，
Y：ÿ
}）;
放置+ = 1;
}
maxAttempts - = 1;
}
}generatePlatforms（14）;
的console.log（平台）;
How do I generate objects on a map, without them occupying the same space or overlapping on a HTML5 Canvas?
X coordinate is randomly generated, to an extent. I thought checking inside the array to see if it's there already, and the next 20 values after that (to account for the width), with no luck.
var nrOfPlatforms = 14,
platforms = [],
platformWidth = 20,
platformHeight = 20;
var generatePlatforms = function(){
var positiony = 0, type;
for (var i = 0; i < nrOfPlatforms; i++) {
type = ~~(Math.random()*5);
if (type == 0) type = 1;
else type = 0;
var positionx = (Math.random() * 4000) + 500 - (points/100);
var duplicatetest = 21;
for (var d = 0; d < duplicatetest; d++) {
var duplicate = $(jQuery.inArray((positionx + d), platforms));
if (duplicate > 0) {
var duplicateconfirmed = true;
}
}
if (duplicateconfirmed) {
var positionx = positionx + 20;
}
var duplicateconfirmed = false;
platforms[i] = new Platform(positionx,positiony,type);
}
}();
I originally made a cheat fix by having them generate in an area roughly 4000 big, decreasing the odds, but I want to increase the difficulty as the game progresses, by making them appear more together, to make it harder. But then they overlap.
In crude picture form, I want this
....[]....[].....[]..[]..[][]...
not this
......[]...[[]]...[[]]....[]....
I hope that makes sense.
For reference, here is the code before the array check and difficulty, just the cheap distance hack.
var nrOfPlatforms = 14,
platforms = [],
platformWidth = 20,
platformHeight = 20;
var generatePlatforms = function(){
var position = 0, type;
for (var i = 0; i < nrOfPlatforms; i++) {
type = ~~(Math.random()*5);
if (type == 0) type = 1;
else type = 0;
platforms[i] = new Platform((Math.random() * 4000) + 500,position,type);
}
}();
EDIT 1
after some debugging, duplicate is returning as [object Object] instead of the index number, not sure why though
EDIT 2
the problem is the opbjects are in the array platforms, and x is in the array object, so how can i search inside again ? , thats why it was failing before. Thanks to firebug and console.log(platforms);
platforms = [Object { image=img, x=1128, y=260, more...}, Object { image=img, x=1640, y=260, more...} etc
You could implement a while loop that tries to insert an object and silently fails if it collides. Then add a counter and exit the while loop after a desired number of successful objects have been placed. If the objects are close together this loop might run longer so you might also want to give it a maximum life span. Or you could implement a 'is it even possible to place z objects on a map of x and y' to prevent it from running forever.
Here is an example of this (demo):
//Fill an array with 20x20 points at random locations without overlap
var platforms = [],
platformSize = 20,
platformWidth = 200,
platformHeight = 200;
function generatePlatforms(k) {
var placed = 0,
maxAttempts = k*10;
while(placed < k && maxAttempts > 0) {
var x = Math.floor(Math.random()*platformWidth),
y = Math.floor(Math.random()*platformHeight),
available = true;
for(var point in platforms) {
if(Math.abs(point.x-x) < platformSize && Math.abs(point.y-y) < platformSize) {
available = false;
break;
}
}
if(available) {
platforms.push({
x: x,
y: y
});
placed += 1;
}
maxAttempts -= 1;
}
}
generatePlatforms(14);
console.log(platforms);
这篇关于随机生成不重复的或重叠在画布对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
