Домой / Для сайта / Текстовый игровой автомат
Текстовый игровой автомат

Текстовый игровой автомат

Интересный скрипт для генерации заданного текста с эффектом анимации как в игровом автомате. Поочередно задаются буквы, которые за заданное в скрипте время складываются в слово.

Демо

HTML

<canvas></canvas>

CSS

canvas{
 position: absolute;
 background: #111;
 height: 100%;
 width: 100%;
 left: 0;
 top: 0;
}

JS

text = 'WORDPRESS-CLUB.COM'; // The message displayed
chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.-'; // All possible Charactrers
scale = 60; // Font size and overall scale
breaks = 0.003; // Speed loss per frame
endSpeed = 0.05; // Speed at which the letter stopps
firstLetter = 80; // Number of frames untill the first letter stopps (60 frames per second)
delay = 10; // Number of frames between letters stopping

canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');

text = text.split('');
chars = chars.split('');
charMap = [];
offset = [];
offsetV = [];

for(var i=0;i<chars.length;i++){
 charMap[chars[i]] = i;
}

for(var i=0;i<text.length;i++){
 var f = firstLetter+delay*i;
 offsetV[i] = endSpeed+breaks*f;
 offset[i] = -(1+f)*(breaks*f+2*endSpeed)/2;
}

(onresize = function(){
 canvas.width = canvas.clientWidth;
 canvas.height = canvas.clientHeight;
})();

requestAnimationFrame(loop = function(){
 ctx.setTransform(1,0,0,1,0,0);
 ctx.clearRect(0,0,canvas.width,canvas.height);
 ctx.globalAlpha = 1;
 ctx.fillStyle = '#622';
 ctx.fillRect(0,(canvas.height-scale)/2,canvas.width,scale);
 for(var i=0;i<text.length;i++){
 ctx.fillStyle = '#ccc';
 ctx.textBaseline = 'middle';
 ctx.textAlign = 'center';
 ctx.setTransform(1,0,0,1,Math.floor((canvas.width-scale*(text.length-1))/2),Math.floor(canvas.height/2));
 var o = offset[i];
 while(o<0)o++;
 o %= 1;
 var h = Math.ceil(canvas.height/2/scale)
 for(var j=-h;j<h;j++){
 var c = charMap]+j-Math.floor(offset[i]);
 while(c<0)c+=chars.length;
 c %= chars.length;
 var s = 1-Math.abs(j+o)/(canvas.height/2/scale+1)
 ctx.globalAlpha = s
 ctx.font = scale*s + 'px Helvetica'
 ctx.fillText(chars,scale*i,(j+o)*scale);
 }
 offset[i] += offsetV[i];
 offsetV[i] -= breaks;
 if(offsetV[i]<endSpeed){
 offset[i] = 0;
 offsetV[i] = 0;
 }
 }

 requestAnimationFrame(loop);
});

Интересный скрипт для генерации заданного текста с эффектом анимации как в игровом автомате. Поочередно задаются буквы, которые за заданное в скрипте время складываются в слово. HTML CSS JS text = 'WORDPRESS-CLUB.COM'; // The message displayed chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.-'; // All possible Charactrers scale = 60; // Font size and overall scale breaks = 0.003; // Speed loss per frame endSpeed = 0.05; // Speed at which the letter stopps firstLetter = 80; // Number of frames untill the first letter stopps (60&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.9 ( 1 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*