├── index.html
├── README.md
└── matrix.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | JavaScript_Matrix
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScriptPro
2 |
3 |
4 | Proyectos en JavaScript
5 |
6 |
7 |
8 |
9 |
10 |
17 | Les presento la wiki de este proyecto:
18 | https://github.com/ArielBetancud22/JavaScriptPro/wiki
19 |
20 | Aquí estala wiki del código js.
21 | https://github.com/ArielBetancud22/JavaScriptPro/wiki/C%C3%B3digo-JavaScript-Documentado-para-esta-Matrix
22 |
23 | Por último el código HTML:
24 | https://github.com/ArielBetancud22/JavaScriptPro/wiki/C%C3%B3digo-html
25 |
--------------------------------------------------------------------------------
/matrix.js:
--------------------------------------------------------------------------------
1 | //Este es un algoritmo para visualizar Matrix en fondo negro y la cascada de letras verdes
2 |
3 |
4 | const canvas = document.getElementById("canvas")
5 | const ctx = canvas.getContext('2d')
6 |
7 | let cw = window.innerWidth
8 | let ch = window.innerHeight
9 |
10 | canvas.width = cw
11 | canvas.height = ch
12 |
13 | let arregloNumero = [
14 | "a",
15 | "b",
16 | "c",
17 | "d",
18 | "e",
19 | "f",
20 | "g",
21 | "h",
22 | "i",
23 | "j",
24 | "k",
25 | "l",
26 | "m",
27 | "n",
28 | "ñ",
29 | "o",
30 | "p",
31 | "q",
32 | "r",
33 | "s",
34 | "t",
35 | "u",
36 | "v",
37 | "w",
38 | "x",
39 | "y",
40 | "z",
41 | "£",
42 | "¥",
43 | "§",
44 | "¤"
45 | ];
46 |
47 | let codigoArray = []
48 | let conteoCodigo = 200
49 | let fontSize = 15
50 | let numeroColumna = cw / fontSize
51 | let frame = 0
52 |
53 | class Matrix {
54 |
55 | constructor(x, y) {
56 | this.x = x
57 | this.y = y
58 | }
59 |
60 | draw(ctx) {
61 |
62 | this.valor = arregloNumero[Math.floor(Math.random() * (arregloNumero.length - 1))].toUpperCase()
63 | this.velocidad = Math.random() * fontSize * 3 / 4 + fontSize * 3 / 4
64 |
65 | ctx.fillStyle = "rgba(0,255,0)"
66 | ctx.font = fontSize + "px san-serif"
67 | ctx.fillText(this.valor, this.x, this.y)
68 |
69 | this.y += this.velocidad
70 |
71 | if (this.y > ch) {
72 | this.x = Math.floor((Math.random() * numeroColumna) * fontSize)
73 | this.y = 0
74 | this.velocidad = (-Math.random() * fontSize * 3) / 4 + (fontSize * 3) / 4
75 |
76 | }
77 | }
78 | }
79 |
80 |
81 | let update = () => {
82 | if (codigoArray.length < conteoCodigo) {
83 | let matrix = new Matrix(Math.floor(Math.random() * numeroColumna) * fontSize, 0)
84 | codigoArray.push(matrix)
85 | }
86 |
87 | ctx.fillStyle = "rgba(0,0,0,0.05)"
88 | ctx.fillRect(0,0,cw,ch)
89 |
90 |
91 | for (let i = 0; i < codigoArray.length && frame % 2 == 0; i++) {
92 | codigoArray[i].draw(ctx)
93 | }
94 |
95 | requestAnimationFrame(update)
96 | frame++
97 | }
98 |
99 | update()
--------------------------------------------------------------------------------