简体   繁体   中英

Javascript Weighted Probability Array

I'm working on a very basic game which runs in the browser. When the document is ready, I have created some Javascript which displays a random couple of links from a larger link list (both lists are stored in Arrays). My question has two parts - one simple, one complex:

1) Is there a way to make this code more elegant - the function within the array within the array is very ugly...

2) Is there a way to allocate probabilities to the items so that some are more likely to appear than others? At the moment it is just random, with any "button" as likely to appear as any other.

Here is my code:

HTML

<body>

<h1 id="OTM_Test">Javascript Probability</h1>

<div id="stackoverflow">

<a href="nextpage.html" id="button1" class="button">Next Page 1</a>
<a href="nextpage.html" id="button2" class="button">Next Page 2</a>
<a href="nextpage.html" id="button3" class="button">Next Page 3</a>
<a href="nextpage.html" id="button4" class="button">Next Page 4</a>
<a href="nextpage.html" id="button5" class="button">Next Page 5</a>
<a href="nextpage.html" id="button6" class="button">Next Page 6</a>

</div>

</body>

CSS .button{ background:blue; color:white; display:none; margin:200px; padding:10px; display:none; border:2px solid red; } .button{ background:blue; color:white; display:none; margin:200px; padding:10px; display:none; border:2px solid red; }

Javascript/jQuery

$(document).ready(function(){

var button1 = $("#button1");
var button2 = $("#button2");
var button3 = $("#button3");
var button4 = $("#button4");
var button5 = $("#button5");
var button6 = $("#button6");

var totalArray = [button1,button2,button3,button4,button5,button6];



function randomChoice(){
    var randomNumber=Math.floor(Math.random()*6);
    return randomNumber;
    };



var selectedArray = [(totalArray[(randomChoice())]), (totalArray[(randomChoice())])];

function reduceArray(){
    for(i=0;i<selectedArray.length;i++){
        (selectedArray[i]).show();
        }
};

reduceArray();

});

Any ideas/thoughts would be gratefully received.

It is my first post on here...please be gentle!

this is a more neat version:

$(document).ready(function(){
 var totalArray = [];
    $('#stackoverflow').children().each(function(){
    totalArray.push($(this)):
    });

    function randomChoice(){
        var randomNumber=Math.floor(Math.random()*3)+Math.floor(Math.random()*3); //middle buttons have more chance of apearing
        return randomNumber;
    };

    var selectedArray = [totalArray[(randomChoice()], totalArray[randomChoice()]];
    $.each(selectedArray,function(index,object){
       $(object).show();
    }

});

even shorter code:

function randomChoice(){
    var randomNumber=Math.floor(Math.random()*3)+Math.floor(Math.random()*3); //middle buttons have more chance of apearing
    return randomNumber;
};

$('#button'+ randomChoice()).show():
$('#button'+ randomChoice()).show():

for probability you could set html data attribute:

<a href="nextpage.html" id="button1" class="button" data-change="20">Next Page 1</a>
.. means 20% change of apearing


var total = 0;
$('#stackoverflow').children().each(function(){
    totalArray.push($(this)):
    if($(this).data('change')>Math.random()*100){
      $(this).show();
    }
    });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM