randomise array html5 java script

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

Приведенный выше код работает благодаря переполнению стека.randomise array html5 java script

В настоящий момент этот код отображает изображения в последовательности не случайным образом, он использует массив для их извлечения и показывает их. Затем код регулирует скорость отображения изображения. Также есть звуковой проигрыватель и кнопка со звуком.

Мне удалось после значительного поиска анимации простой последовательности png-файлов. Тем не менее, я пытаюсь запустить кнопку остановки запуска и математическую случайную функцию (желательно, что музыка нажимает на все, что происходит).

Я хочу добавить случайную функцию в массив, чтобы он отображал изображения случайным образом. однако лучшее, что я мог сделать, это не тормозить код, а получить - ускорить анимацию. Может кто-то, пожалуйста, измените мой код, чтобы добавить эти функции, или, пожалуйста, укажите мне место, которое поможет.

Рандомизированный массив был бы действительно полезен.

источник

2014-11-26 Rick Ursive

Приветствия Jorio :) Это выглядит красиво и аккуратно. –

Демо: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!

Пример ...

enter image description here

источник

2014-11-26 05:29:34

Мне нравится читать код, хорошая демонстрация, я попробую подключить его :) :) –

btw '~~' почти как Math.floor –

Хмм, попробовал это, Функция shuffle (arr) { arr.forEach (функция (e, i) { var rand = ~~ (Math.random() * (arr.length-1)); arr [i] = arr [rand]; arr [rand] = e; }); } var sprite = [0,1,2,3,]; shuffle (спрайт); Мне нужно позвонить? –

(там была ошибка, обновлена)

Например,

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

источник

2014-11-26 05:08:19 Ryo

Мне нравится читать код, console.log (array) // => shuffled - что это значит, это похоже на проверку, если он был перетасован? Я попробую подключить его :) –

ничего особенного. это просто говорит, что массив уже перетасован после блока. – Ryo

Хорошо спасибо :) –

randomise array html5 java script

ответ

Смежные вопросы