randomise array html5 java script

Question

<!-- with thanks to http://stackoverflow.com/questions/25407926/spawn-random-images-
in-canvas-in-javascript-->
<!--http://www.freesfx.co.uk/download/?type=mp3&id=11028 
--audio loader--
http://stackoverflow.com/questions/18826147/javascript-audio-play-on-
click-->
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <title>Street</title>
    <script type="text/javascript">
        var can, ctx;
        var sprite = new Array();
        var counter = 0;
        var rot = 0;
        var centerX = -320;
        var centerY = -170;
        var sprite = new Array(id); // Array to hold the filenames

        function init() {
            can = document.getElementById("can");
            ctx = can.getContext("2d");
            // get images into array
            sprite[0] = document.getElementById("b1");
            sprite[1] = document.getElementById("b2");
            sprite[2] = document.getElementById("b3");
            sprite[3] = document.getElementById("b4");

            // draw lights out 
            draw();
            // wait 3 sec, then begin animation
            var t = setTimeout(light, 30);
        }

        function light() {
            var wait = 600;
            counter++;
            if (counter == 4) {
                counter = 0;
                wait += (Math.random() * 1500);
                rot += .01;
            }
            draw();
            setTimeout(light, wait);
        }

        function draw() {
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.save();
            ctx.translate(can.width / 2, can.height / 2);

            ctx.drawImage(sprite[counter], centerX, centerY);
            ctx.restore();
        }

        function choseRandom(range) {
            if (Math.random)
                return Math.round(Math.random() * (range-1));
            else {
                var now = new Date();
                return (now.getTime() / 1000) % range;
            }
        }
        var choice = choseRandom(id);
    </script>
</head>

<body onload="init()">

    <audio id="Mp3Me" autoplay autobuffer controls>
        <source src="au1.mp3">
        <source src="au1.ogg">
    </audio>

    <img id="b1" style="display:none" src="1.png" >
    <img id="b2" style="display:none" src="2.png" >
    <img id="b3" style="display:none" src="3.png" >
    <img id="b4" style="display:none" src="4.png" >

    <canvas class="canvas" id="can" width="640" height="350" style=" border:1px solid #6F2E0D; ">
    </canvas>

    <script>
        function play(){
            var audio = document.getElementById("audio");
            audio.play();
        }
   </script>

    <input type="button" value="PLAY"  onclick="play()">
    <audio id="audio" src="door.mp3" ></audio>

    <div id="container"></div>
    <script language="JavaScript">
        document.writeln('<td' + '><img src="'
            + ranimage[choice] + '" height="180" width="160" border="0" ><' +
            '/td>');
    </script>

    <div id='container'>
        <img id = "image2" src='door.png'  />

</body>
</html>

The above code works with thanks to stack overflow.

Basically at the moment this code displays images in sequence non randomly, it uses the array to fetch them, and show them. The code then regulates the speed of the image display. There is also a sound player, and a button with a sound.

I managed after some considerable searching to animate a simple sequence of png files. However I have been trying to ad start stop button and a math random function (preferably the music on-click would start everything going).

I want to add a random function to the array,so that it displays images randomly. however the best I could do was, not to brake the code, or to get is to speed up the animation. Can some one please modify my code to add these functions or please point me to some place that would help.

The randomized array would be really useful.

Cheers JoriO :) It looks nice and neat. – Rick Ursive Nov 26 '14 at 07:00 — Rick Ursive, Nov 26 '14 at 07:00

Ryo · Answer 1 · 2014-11-26T05:58:50.603

0

(there was a mistake, updated)

For example,

var array = [1,2,3,4,5]
for(i=0; i<array.length;i++){
    var dist = Math.floor( Math.random() * array.length )
    var swp = array[i]
    array[i] = array[dist]
    array[dist] = swp
}
console.log(array) //=> shuffled

edited Nov 26 '14 at 05:58

answered Nov 26 '14 at 05:08

Ryo

2,003
4
27
42

I am enjoying reading the code, console.log(array) //=> shuffled is what does this mean, is it like check if it was shuffled ? I will try to plug it in :) – Rick Ursive Nov 26 '14 at 05:36
nothing much. it's just saying array is already shuffled after the for block. – Ryo Nov 26 '14 at 05:57

Muhammad Umer · Accepted Answer · 2014-11-26T14:24:51.550

0

Demo: http://jsfiddle.net/techsin/dtz0yj4y/

Code

function shuffle (arr) {
   arr.forEach(function(e,i){
       var rand = ~~(Math.random()*(arr.length-1));
       arr[i] = arr[rand];
       arr[rand] = e;
   });
}

var myArr = [1,2,3,4,5];
shuffle(myArr); //myArr is now shuffled!

Example...

enter image description here

edited Nov 26 '14 at 14:24

answered Nov 26 '14 at 05:29

Muhammad Umer

17,263
19
97
168

1

I am enjoying reading the code, nice demo, I will try plugging it in :) – Rick Ursive Nov 26 '14 at 05:38
btw `~~` is almost like Math.floor – Muhammad Umer Nov 26 '14 at 05:41
Hmm trying this, function shuffle (arr) { arr.forEach(function(e,i){ var rand = ~~(Math.random()*(arr.length-1)); arr[i] = arr[rand]; arr[rand] = e; }); } var sprite = [0,1,2,3,]; shuffle(sprite); I need to call it ? – Rick Ursive Nov 26 '14 at 05:52
yea call `shuffle(sprite);` – Muhammad Umer Nov 26 '14 at 14:12

randomise array html5 java script

2 Answers2