БлогNot. Падающие рисунки на Javascript

Падающие рисунки на Javascript

Этот небольшой скрипт выбирает картинку из массива с именами изображений imgArray, расположенного по адресу urlFall и анимирует с заданным в миллисекундах интервалом их "падение" поверх рисунка, также выбранного случайно из коллекции с именами 1.jpg ... 128.jpg, находящейся по адресу urlImg.

Размеры падающих картинок равны fwidth * fheight, а фоновые рисунки должны иметь размеры, соответствующие размерам канвы fallCanvas (можно, конечно, и задать вдвое большие размеры канвы, как сделано в примере). Пример получился традиционно шахматный, больше не нашлось под рукой подходящих коллекций :)

Для работы скрипта не нужна библиотека JQuery или другие внешние библиотеки.

Скрипт реализован в виде функции-замыкания fallImage, которая вызывается по загрузке страницы.

Изменив вложенную функцию setup, Вы без труда настроите код под свои нужды.

Также в коде могут оказаться полезными ответы на следующие вопросы:

  • как запускать из setInterval функцию с параметрами (вызов setInterval в коде);
  • как генерировать случайные целые из заданного интервала (функция randomInt, в очередной раз);
  • как дополнить целое число слева нулями до нужного размера (например, '1'->'001', функция pad)

Ниже приводится приложение в работе и полный листинг файла .html, который должен быть сохранён в кодировке Юникода UTF-8.

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Falling Chess Pieces</title>
</head>
<body>

<div align="center">
 <canvas id="fallCanvas" width="500" height="670"></canvas>
</div>
<script>
var fallImage = function (timeOut) {
 var ctx,
     imgBg,
     imgDrops,
     x = 0,
     y = 0,
     items = 32, //сколько рисунков падает
     width,
     height;
 var fallingElements = [];

 function draw (fwidth, fheight) {
  ctx.drawImage(imgBg, 0, 0, width, height);
  for (var i=0; i< items; i++) { //Отрисовка элементов
   ctx.drawImage (fallingElements[i].image, fallingElements[i].x, fallingElements[i].y);
   fallingElements[i].y += fallingElements[i].speed;
   if (fallingElements[i].y > height) {
    fallingElements[i].y = - fheight;
    fallingElements[i].x = randomInt (0, width - fwidth);
   }
  }
 }

 function pad(num, size) { //Лидирующие нули в числе num до size символов
  var s = ''+num; while (s.length < size) s = '0' + s; return s;
 }

 function randomInt (n1, n2) { //Случайное целое из интервала [n1,n2]
  return Math.floor(n1 + Math.random() * (n2 - n1 + 1));
 }

 function setup () {
  var urlFall = 'http://scripts.kislenko.net/RandomChess2/img'; 
   //общая часть URL всех падающих картинок, без "/" в конце, у них имена из imgArray 
   //и размеры fwidth x fheight
  var imgArray = [ //имена картинок
   'bB.png','bK.png','bN.png','bP.png','bQ.png','bR.png',
   'wB.png','wK.png','wN.png','wP.png','wQ.png','wR.png'
  ];
  var fwidth = 80, fheight = 80;
  var urlImg = 'http://blog.kislenko.net/archives/wc2019';
   //общая часть URL всех фоновых картинок, без "/" в конце, у них имена 1.jpg ... 128.jpg
  var canvas = document.getElementById ('fallCanvas');
  ctx = canvas.getContext('2d');
  width = canvas.width;
  height = canvas.height;
 
  var imgBgNum = pad (randomInt(1,128), 3); 
  imgBg = new Image();
  imgBg.src = urlImg + '/'+ imgBgNum + '.jpg';

  for (var i = 0; i < items; i++) {
   var fallingItem = new Object();
   fallingItem["image"] =  new Image(fwidth, fheight);
   var num = Math.floor( Math.random() * imgArray.length);
   var img = imgArray [num];
   fallingItem.image.src = urlFall+ '/'+img;
   fallingItem["x"] = randomInt (0, width-fwidth);
   fallingItem["y"] = randomInt (0, height-fheight);
   fallingItem["speed"] = randomInt (3,10); //скорость
   fallingElements.push(fallingItem);
  }
  setInterval ( function() { draw (fwidth,fheight); }, timeOut);
 }
 setup();
};

window.addEventListener('load', function (e) { 
 fallImage (40); //обновлять через 40 мс
});  

</script>
<noscript>Нужен включённый в браузере Javascript для работы приложения!</noscript>

</body>
</html>

теги: шахматы javascript random графика

05.10.2019, 14:09; рейтинг: 33