Как добавить еще одну анимацию кода дождя Matrix в мою анимацию холста? - PullRequest
Новая
       0

Как добавить еще одну анимацию кода дождя Matrix в мою анимацию холста?

4 голосов
/ 13 февраля 2012

Я пытаюсь смоделировать дождь кода Матрицы с помощью элемента canvas и javascript.Я могу сделать один элемент за раз, но не несколько.Как мне бросить несколько матричных капель дождя.Вот мой код: 

   <html>
    <head>
        <title>Matrix Code Rain</title>
        <style>
            *{margin:0; padding:0; }
            body{background:black;}
        </style>
    </head>
    <body>
        <canvas id="c"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("c");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            canvas.style.background = "black";
            var c = canvas.getContext("2d");
            var code = ["<html>","<p>","<b>","<strong>","<head>","<body>","<a>","<i>","<div>","<form>","<ol>","<li>","<ul>","<pre>","<nav>","<footer>","<header>","<article>","<section>","<em>","<style>","<title>","<meta>","<br>","<table>"];
            var rain = [ ];
            var max = 10;
            for(var i = 0; i < max; i++){
                var drop =  {};
                drop.code = Math.round(Math.random() * code.length);
                drop.x = Math.random() * canvas.width;
                drop.y = 0;
                drop.size = Math.random() * 40;
                drop.speed = drop.size/4;
                rain.push(drop);
            }
            var y = 0;
            c.fillStyle="lime";
            setTimeout(function(){
                 c.clearRect(0,0,canvas.width,canvas.height);
                 for(var i = 0; i < max; i++){
                    var drop = rain[i];
                    c.font = drop.size+"pt arial";
                    c.fillText(drop.code,drop.x,drop.y);
                    drop.y += drop.speed;
                    if(drop.y > canvas.height + drop.size)
                        drop.y = 0;
                 }
            },1000/60);
        </script>
    </body>
</html>

Ответы [ 2 ]

3 голосов
/ 14 февраля 2012

Создайте кучу независимых объектов, каждый из которых получит свое слово, положение и скорость.

Затем напечатайте их все и продвиньте их по скорости.

Вот вам чистый пример:

http://jsfiddle.net/U5eFJ/

Важный код: 

var code = ["<html>", "<p>", "<b>", "<strong>", "<head>", "<body>", "<a>", "<i>", "<div>", "<form>", "<ol>", "<li>", "<ul>", "<pre>", "<nav>", "<footer>", "<header>", "<article>", "<section>", "<em>", "<style>", "<title>", "<meta>", "<br>", "<table>"];

// make 90 things to fall with a random code element and random starting location
var things = [];
var THINGCOUNT = 90;
for (var i = 0; i < THINGCOUNT; i++) {
    var a = {};
    //randomly pick one tag
    a.code = code[Math.round(Math.random() * code.length)];
    a.x = Math.random()*500; //random X
    a.y = Math.random()*500 -500; // random Y that is above the screen
    a.speed = Math.random()*10;
    things.push(a);
}

setInterval(function() {
    ctx.clearRect(0,0,500,500);
    for (var i = 0; i < THINGCOUNT; i++) {
        var a = things[i];
        ctx.fillText(a.code, a.x, a.y);
        a.y += a.speed; // fall downwards by the speed amount
        if (a.y > 600) a.y = -50; // if off the screen at bottom put back to top
    }
}, 90);
​

1 голос
/ 29 мая 2015

Если вы работаете на компьютере с Windows, вы можете заставить java-скрипт открывать .bat-файл, который просто говорит об этом.`@echo off mode 1000 @color a: эхо% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random%% random %% random %% random %% random %% random %% random% goto A '

Возможно, это не то, что вы хотите, но я надеюсь, что это поможет =) `

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...