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

Я пытаюсь имитировать дождь с матричным кодом с элементом холста и 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>

источник

2012-02-13 zachdyer

работает для меня? вы имеете в виду, что вы хотите, чтобы партии падали в одно и то же время? – Alex

@Alex Нет, я хочу, чтобы за один раз выпало больше одного. Множественное падение, как на матрице. – zachdyer

Я пробовал работать с решением Simons, но я недостаточно хорош, чтобы заставить его работать. Я обновил свой код с помощью идеи Саймона, но я не сделал это правильно. – zachdyer

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

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

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

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);

источник

2012-02-14 02:32:24

Ницца. Является ли строка, в которой он говорит, что var a = {} означает равный новому объекту? – zachdyer

Извините, что я новичок в javascript. Когда я использую ваш код, он работает потрясающе, но когда я пытаюсь реализовать свои идеи в своем коде, он не работает. – zachdyer

Я использовал setTimeout неправильно. Я предполагаю использовать setInterval, и это заставило его работать. Кто-нибудь порекомендует использовать setTimeout или есть разница? – zachdyer

Если вы работаете с компьютером Windows вы можете сделать Java Script открыт .bat-файл, который просто говорит об этом. `@echo off mode 1000 @color a : A echo% random %% random %% random %% random %% random %% random %% random %% random %% random %% random %% random% % случайная %% случайной %% %% случайного случайная %% случайной %% случайной %% %% случайного случайный% Гото A»

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

источник

2015-05-29 10:51:38 TylerTotally

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

ответ

Смежные вопросы