Эффект матрицы на HTML5 и jQuery

Разместил: Apocalypse
5 декабря 2015

Давно всем знакомый эффект из фильма "Матрица" теперь реализован и на HTML5 Canvas Для начала посмотрите ДЕМО Моё тестирование в фидле: КЛИК Установка: 1#: После /head на нужных страницах вставьте:

<script>
$(document).ready(function() {
var s = window.screen;
var width = 500;
var height = 400;
var yPositions = Array(300).join(0).split('');
var ctx = q.getContext('2d');
var draw = function() {
ctx.fillStyle = 'rgba(0,0,0,.1)';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = '#0F0';
ctx.font = '10pt Georgia';
yPositions.map(function(y, index) {
text = String.fromCharCode(1e2 + Math.random() *
33);
x = (index * 10) + 10;
q.getContext('2d').fillText(text, x, y);
if (y > 100 + Math.random() * 1e4) {
yPositions[index] = 0;
} else {
yPositions[index] = y + 10;
}
});
};
RunMatrix();

function RunMatrix() {
if (typeof Game_Interval != "undefined") clearInterval(
Game_Interval);
Game_Interval = setInterval(draw, 33);
}

function StopMatrix() {
clearInterval(Game_Interval);
}
//setInterval(draw, 33);
});
</script>

$(document).ready(function() {

var s = window.screen;

var width = 500;

var height = 400;

var yPositions = Array(300).join(0).split('');

var ctx = q.getContext('2d');

var draw = function() {

ctx.fillStyle = 'rgba(0,0,0,.1)';

ctx.fillRect(0, 0, width, height);

ctx.fillStyle = '#0F0';

ctx.font = '10pt Georgia';

yPositions.map(function(y, index) {

text = String.fromCharCode(1e2 + Math.random() *

33);

x = (index * 10) + 10;

q.getContext('2d').fillText(text, x, y);

if (y > 100 + Math.random() * 1e4) {

yPositions[index] = 0;

} else {

yPositions[index] = y + 10;

}

});

};

RunMatrix();

function RunMatrix() {

if (typeof Game_Interval != "undefined") clearInterval(

Game_Interval);

Game_Interval = setInterval(draw, 33);

}

function StopMatrix() {

clearInterval(Game_Interval);

}

//setInterval(draw, 33);

});

</script>

2#: Следующий код туда, где должен быть блок с эффектом:

<canvas id="q" width="500" height="400">Sorry Browser Won't Support</canvas>

1	<canvas id="q" width="500" height="400">Sorry Browser Won't Support</canvas>

Автор публикации

не в сети 1 неделя

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: jQuery Matrix MTML5 Матрица Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

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

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться