如何添加另一个矩阵雨代码动画到我的画布动画中？

我试图模拟矩阵代码雨与画布元素和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 2012-02-13 10:00:48

@Alex不，我希望每次都有一个以上的人下降。在矩阵上多次下降。 – zachdyer 2012-02-13 19:45:38

我尝试过使用Simons解决方案，但我不够好，无法使其工作。我更新了我的代码与西蒙的想法实施，但我没有做对。 – zachdyer 2012-02-14 08:57:01

做一堆独立的对象，所有的对象都得到自己的单词，位置和速度。

然后将它们全部打印出来，并通过它们的速度提前。

这里有一个清晰的例子给你：

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 2012-02-14 08:12:28

对不起，我是javascript新手。当我使用你的代码时，它的效果很棒，但是当我尝试在我的代码中实现你的想法时，它不起作用。 – zachdyer 2012-02-14 08:54:36

我以错误的方式使用setTimeout。我想使用setInterval并使其工作。有人会推荐使用setTimeout还是有区别？ – zachdyer 2012-02-14 09:12:27

如果您运行的是Windows电脑就可以使Java脚本开放只是说这个.bat文件。 '@回响模式1000 @color一个：甲回声％的无规%%随机%%随机%%随机%%随机%%随机%%随机%%随机%%随机%%随机%%随机％％随机%%随机%%随机%%随机%%随机%%随机%%随机%%随机％转到A”

这可能不是你想要什么，但我希望它有助于=） `

来源

2015-05-29 10:51:38 TylerTotally

如何添加另一个矩阵雨代码动画到我的画布动画中？

回答

相关问题