Wie füge ich ein weiteres Matrix-Regen-code-animation auf meiner Leinwand animation?

Ich versuche zu simulieren, die das Matrix-code-Regen mit dem canvas-element und javascript. Ich bin in der Lage, um ein element Tropfen in einer Zeit, aber nicht mehrere. Wie kann ich die drop-mehrere matrix-Regen-Tropfen. Hier ist mein code:

   <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>
  • für mich funktioniert? Sie meinen, Sie wollen viele fallen in der gleichen Zeit?
  • Nein, ich will mehr als einen Drop zu einer Zeit. Mehrere löschen, wie auf der matrix.
  • Ich habe versucht, die Arbeit mit Simons Lösung, aber ich bin nicht gut genug, um es arbeiten. Ich aktualisierte mein code mit Simon Idee umgesetzt, aber ich hätte es auch nicht Recht.
InformationsquelleAutor zachdyer | 2012-02-13
  1. 3

    Einen Haufen von unabhängigen Objekten, die alle Ihre eigenen Wort und die position und die Geschwindigkeit.

    Dann drucken Sie alle und Voraus, die Ihnen durch Ihre Geschwindigkeit.

    Hier ist ein gutes Beispiel für Sie:

    http://jsfiddle.net/U5eFJ/

    Den wichtigen code:

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

    • Schön. Ist die Zeile, wo es heißt var a = {} bedeutet eine gleich neues Objekt?
    • Sorry, ich bin neu in javascript. Wenn ich Ihren code, es funktioniert Super aber wenn ich versuche, Ihre Ideen umzusetzen in meinem code funktioniert es nicht.
    • Ich war mit setTimeout in die falsche Richtung. Ich bin wohl mit setInterval und das machte es Arbeit. Würde jemand empfehlen die Verwendung von setTimeout oder gibt es einen Unterschied?
    • Ja, var a = {} erzeugt nur ein leeres Objekt. setInterval passiert alle X Millisekunden. setTimeout passiert nur einmal, nach X Millisekunden
    • Welche ist besser für animation setinterval oder settimeout?
    • normalerweise möchten Sie setInterval, weil Sie wollen, etwas zu tun über und über, nicht nur einmal

    InformationsquelleAutor Simon Sarris
  2. 1

    Wenn Sie mit einem windows-computer können Sie die java-script öffnen .bat-Datei, nur dieses sagt.
    `@echo off
    Modus 1000
    @Farbe ein
    :Ein
    echo %random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%
    goto Ein'

    Dies kann nicht sein, was Sie wollen, aber ich hoffe, es hilft =)
    `

    InformationsquelleAutor TylerTotally
Schreibe einen Kommentar