随机化数组 html5 javascript答案

【问题标题】：randomise array html5 java script随机化数组 html5 javascript
【发布时间】：2015-01-24 07:28:38
【问题描述】：

<!-- 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>

由于堆栈溢出，上面的代码可以正常工作。

目前，该代码基本上以非随机顺序显示图像，它使用数组来获取它们并显示它们。然后代码调节图像显示的速度。还有一个声音播放器和一个带声音的按钮。

经过大量搜索后，我设法制作了一系列简单的 png 文件的动画。但是我一直在尝试添加开始停止按钮和数学随机函数（最好点击音乐会开始一切）。

我想在数组中添加一个随机函数，以便它随机显示图像。但是我能做的最好的事情是，不要停止代码，或者要加快动画速度。有人可以修改我的代码以添加这些功能吗，或者请指点我一些有帮助的地方。

随机数组真的很有用。

【问题讨论】：

干杯 JoriO :) 它看起来漂亮整洁。

标签： javascript html

【解决方案1】：

（有错误，已更新）

例如，

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

【讨论】：

我很喜欢阅读代码，console.log(array) //=> shuffled 是什么意思，是否像检查它是否被洗牌？我会尝试将其插入:)
没什么。它只是说数组在 for 块之后已经洗牌了。

【解决方案2】：

演示： http://jsfiddle.net/techsin/dtz0yj4y/

代码

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!

示例...

【讨论】：

我喜欢阅读代码，不错的演示，我会尝试将其插入:)
btw ~~ 几乎就像 Math.floor
嗯，试试这个，function shuffle (arr) { arr.forEach(function(e,i){ var rand = ~~(Math.random()*(arr.length-1)); arr[i] = arr[rand]; arr[rand] = e; }); } 变种精灵 = [0,1,2,3,];洗牌（精灵）；我需要打电话吗？
是的，请致电shuffle(sprite);