Падающие рисунки на 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>
05.10.2019, 14:09 [1933 просмотра]