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>

上面的代码可以解决堆栈溢出问题。

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

我经过一番大量的搜索后设法动画了一个简单的png文件序列。然而，我一直在尝试广告启动停止按钮和数学随机功能（最好点击音乐将开始一切）。

我想在数组中添加一个随机函数，以便随机显示图像。但是我能做的最好的事情不是制动代码，也不是为了加速动画。有人可以修改我的代码来添加这些功能，或者请指出一些有用的地方。

随机数组非常有用。

Answer 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

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

示例...

随机数组html5 javascript

2 个答案: