Question

我希望制作一个随机图像生成器（工作正常），然而，我想知道有没有办法增加某些图像的重量，这些图像看起来不会像其他图像那么多？

我附上了以下代码：

<script language="JavaScript">

function random_imglink(){
var myimages=new Array()

myimages[1]="Blue_Car.png"
myimages[2]="Red_Car.png"
myimages[3]="White_Car.png"
myimages[4]="Black_Car.png"


var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()


function confirmRefresh() {
var okToRefresh = confirm("Do you really want to refresh the page?");
if (okToRefresh)
    {
            setTimeout("location.reload(true);",10);
    }
}

</script>
<input type="button" value="Generate a new player" onClick="document.location.reload(true)">


</script>
</a></p>

我对JavaScript有很多知识，但是，我不是专业人士。

Answer 1

var myimages=new Array();
myimages[0]="Blue_Car.png";
myimages[1]="Red_Car.png";
myimages[2]="White_Car.png";
myimages[3]="Black_Car.png";
// myimages[4] = ...

// All values summed up must equal 1
var probabilities=new Array();
probabilities[0]=0.1;  // 10%
probabilities[1]=0.1;  // 10%
probabilities[2]=0.25; // 25%
probabilities[3]=0.55; // 55%
// probabilities[4] = ... (also need to change the other probability values)

function getImage() {
    var rand = Math.random();
    var probabilitiy_sum = 0;
    for(var i=0; i < probabilities.length; i++) {
        probabilitiy_sum += probabilities[i];
        if(rand <= probabilitiy_sum ) {
            return myimages[i];
        }
    }
    return myimages[myimages.length];
}

// Just for testing:
for(var i=0; i < 10; i++) {
    document.getElementById("textbox").innerHTML += getImage() + "<br />";
}

<div id="textbox"></div>

Answer 2

为了扩展@ ByteHamster的响应（接受他的，而不是我的），你可以用一组对象做同样的事情，以便更容易地跟踪可能性。

＆＃13;

var myimages = [{
  image: "Blue_Car.png",
  probability: 0.1
}, {
  image: "Red_Car.png",
  probability: 0.1
}, {
  image: "White_Car.png",
  probability: 0.25
}, {
  image: "Black_Car.png",
  probability: 0.55
}];

function getImage() {
  var rand = Math.random();
  var probabilitiy_sum = 0;
  for (var i = 0; i < myimages.length; i++) {
    probabilitiy_sum += myimages[i].probability;
    if (rand <= probabilitiy_sum) {
      return myimages[i].image;
    }
  }
  return myimages[myimages.length].image;
}

// Just for testing:
for (var i = 0; i < 10; i++) {
  document.getElementById("textbox").innerHTML += getImage() + "<br />";
}

＆＃13;

<div id="textbox"></div>

＆＃13;

Answer 3

简单的方法就是增加数组的长度，然后以更高的概率添加图像以达到更多次，并且概率更少的图像更少。您可以为每个使用for循环。

for (i=0;i<15;i++) {
    myimages[i] = "Blue_Car.png";
}
for (i=15;i<40;i++) {
    myimages[i] = "Red_Car.png";
}
for (i=40;i<80;i++) {
    myimages[i] = "White_Car.png";
}
for (i=80;i<100;i++) {
    myimages[i] = "Black_Car.png";
}

Answer 4

你已经有了答案，但无论如何我都会发帖。

<script language="JavaScript">
var counter = 0;  // this is just to show that something happens when you randomly get the same car as the previous car.  
function random_imglink() {
  var myimages = [
    {weight: 3,  url: "http://insideevs.com/wp-content/uploads/2012/07/bollare-bluecar.jpg"}, // blue
    {weight: 10, url: "http://4.bp.blogspot.com/-UKeEILt_8nw/UZOCIEMrMVI/AAAAAAAAAvI/X5i-HaJRnTc/s400/red+car10.jpg"},  // red
    {weight: 5,  url: "http://i.telegraph.co.uk/multimedia/archive/02661/Audi-A5-Sportback_2661284b.jpg"}, // white
    {weight: 2,  url: "http://1.bp.blogspot.com/-mojnxHJlWVA/UZ1KShiKMeI/AAAAAAAAHMo/oO7qMo7PJq4/s400/Best-Black-Car-2009_j2bq.gif"} // black
  ];
  // calculate total weigt
  // this example: totalWeight = 20
  // Then we search a random number from 0 to 19.  0,1,2 belongs to blue; 3 to 12 is red; 13 to 17 is white; 18 to 19 is black
  // we add min and max range to the image object, so we can easily return the good one.
  var totalWeight = 0;
  for (var i=0; i<myimages.length; i++) {
    myimages[i].min = totalWeight;
    myimages[i].max = totalWeight + myimages[i].weight - 1;  // example: if the first weight is 3; the max is 3-1 = 2
    totalWeight += myimages[i].weight;
  }
  var ry = Math.floor(Math.random() * totalWeight);
  for (var i=0; i<myimages.length; i++) {
    if (ry >=  myimages[i].min && ry <=  myimages[i].max) {
      var index = i;  // we've got a winner
      break;
    }
  }
  document.getElementById('image').innerHTML = '<img src="' + myimages[index].url + '">';
  document.getElementById('counter').innerHTML = counter++;
}
window.onload = function() {
  random_imglink();
}
</script>

<input type="button" value="New random car" onClick="random_imglink()">
<div id="counter"></div>
<div id="image"></div>

是否可以为发电机中的图像增加重量？

4 个答案: