Skip to content

Commit 387d405

Browse files
lostjaredlostjared
committed
updated seperate files
1 parent 392e09d commit 387d405

File tree

2 files changed

+96
-94
lines changed

2 files changed

+96
-94
lines changed

‎index.html

Lines changed: 2 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -21,99 +21,7 @@
2121
<div align="center" style="color:rgb(0,255,0);
2222
font-size: 24px;">CodeMatrix</div>
2323
<canvas id="matrixCanvas" width="1280" height="720"></canvas>
24-
<script>
25-
const LETTER_MAX = 21;
26-
const LETTER_NUM = 40;
27-
const LETTER_SIZE = 32;
28-
const TIMEOUT = 1;
29-
const COLOR = "rgb(0, 255, 0)";
30-
const FONT = "32px Arial";
24+
<script src="matrix.js"></script>
3125

32-
class Letter {
33-
constructor(ch, xpos, ypos) {
34-
this.ch = ch;
35-
this.xpos = xpos;
36-
this.ypos = ypos;
37-
}
38-
}
39-
40-
class LetterGen {
41-
constructor() {
42-
this.letters = [];
43-
this.letterRow = [];
44-
let x = 0;
45-
for (let i = 0; i < LETTER_NUM; i++) {
46-
let column = [];
47-
let y = -LETTER_SIZE;
48-
for (let j = 0; j < LETTER_MAX; j++) {
49-
column.push(new Letter(this.getRandomChar(), x, y));
50-
y += LETTER_SIZE + 4;
51-
}
52-
this.letters.push(column);
53-
this.letterRow.push(Math.floor(Math.random() * (32 - 24 + 1) + 24));
54-
x += LETTER_SIZE;
55-
}
56-
}
57-
58-
getRandomChar() {
59-
const chars = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん';
60-
return chars.charAt(Math.floor(Math.random() * chars.length));
61-
}
62-
}
63-
64-
const canvas = document.getElementById('matrixCanvas');
65-
const ctx = canvas.getContext('2d');
66-
67-
ctx.font = FONT;
68-
ctx.fillStyle = COLOR;
69-
70-
const letterGen = new LetterGen();
71-
let tickCount = 0;
72-
let dir = false;
73-
74-
document.addEventListener('keydown', (event) => {
75-
if (event.key === 'Escape') {
76-
cancelAnimationFrame(animationFrameId);
77-
} else if (event.key === 'ArrowUp') {
78-
dir = true;
79-
} else if (event.key === 'ArrowDown') {
80-
dir = false;
81-
}
82-
});
83-
84-
function draw() {
85-
ctx.clearRect(0, 0, canvas.width, canvas.height);
86-
for (let i = 0; i < letterGen.letters.length; i++) {
87-
for (let letter of letterGen.letters[i]) {
88-
ctx.fillText(letter.ch, letter.xpos, letter.ypos);
89-
const speed = letterGen.letterRow[i];
90-
if (tickCount > TIMEOUT) {
91-
if (dir) {
92-
letter.ypos -= speed;
93-
if (letter.ypos <= -LETTER_SIZE) {
94-
letter.ypos = canvas.height;
95-
letter.ch = letterGen.getRandomChar();
96-
}
97-
} else {
98-
letter.ypos += speed;
99-
if (letter.ypos >= canvas.height) {
100-
letter.ypos = -LETTER_SIZE;
101-
letter.ch = letterGen.getRandomChar();
102-
}
103-
}
104-
}
105-
}
106-
}
107-
108-
if (tickCount > TIMEOUT) {
109-
tickCount = 0;
110-
}
111-
tickCount++;
112-
113-
animationFrameId = requestAnimationFrame(draw);
114-
}
115-
116-
let animationFrameId = requestAnimationFrame(draw);
117-
</script>
11826
</body>
119-
</html>
27+
</html>

‎matrix.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
2+
3+
const LETTER_MAX = 21;
4+
const LETTER_NUM = 40;
5+
const LETTER_SIZE = 32;
6+
const TIMEOUT = 1;
7+
const COLOR = "rgb(0, 255, 0)";
8+
const FONT = "32px Arial";
9+
10+
class Letter {
11+
constructor(ch, xpos, ypos) {
12+
this.ch = ch;
13+
this.xpos = xpos;
14+
this.ypos = ypos;
15+
}
16+
}
17+
18+
class LetterGen {
19+
constructor() {
20+
this.letters = [];
21+
this.letterRow = [];
22+
let x = 0;
23+
for (let i = 0; i < LETTER_NUM; i++) {
24+
let column = [];
25+
let y = -LETTER_SIZE;
26+
for (let j = 0; j < LETTER_MAX; j++) {
27+
column.push(new Letter(this.getRandomChar(), x, y));
28+
y += LETTER_SIZE + 4;
29+
}
30+
this.letters.push(column);
31+
this.letterRow.push(Math.floor(Math.random() * (32 - 24 + 1) + 24));
32+
x += LETTER_SIZE;
33+
}
34+
}
35+
36+
getRandomChar() {
37+
const chars = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん';
38+
return chars.charAt(Math.floor(Math.random() * chars.length));
39+
}
40+
}
41+
42+
const canvas = document.getElementById('matrixCanvas');
43+
const ctx = canvas.getContext('2d');
44+
45+
ctx.font = FONT;
46+
ctx.fillStyle = COLOR;
47+
48+
const letterGen = new LetterGen();
49+
let tickCount = 0;
50+
let dir = false;
51+
52+
document.addEventListener('keydown', (event) => {
53+
if (event.key === 'Escape') {
54+
cancelAnimationFrame(animationFrameId);
55+
} else if (event.key === 'ArrowUp') {
56+
dir = true;
57+
} else if (event.key === 'ArrowDown') {
58+
dir = false;
59+
}
60+
});
61+
62+
function draw() {
63+
ctx.clearRect(0, 0, canvas.width, canvas.height);
64+
for (let i = 0; i < letterGen.letters.length; i++) {
65+
for (let letter of letterGen.letters[i]) {
66+
ctx.fillText(letter.ch, letter.xpos, letter.ypos);
67+
const speed = letterGen.letterRow[i];
68+
if (tickCount > TIMEOUT) {
69+
if (dir) {
70+
letter.ypos -= speed;
71+
if (letter.ypos <= -LETTER_SIZE) {
72+
letter.ypos = canvas.height;
73+
letter.ch = letterGen.getRandomChar();
74+
}
75+
} else {
76+
letter.ypos += speed;
77+
if (letter.ypos >= canvas.height) {
78+
letter.ypos = -LETTER_SIZE;
79+
letter.ch = letterGen.getRandomChar();
80+
}
81+
}
82+
}
83+
}
84+
}
85+
86+
if (tickCount > TIMEOUT) {
87+
tickCount = 0;
88+
}
89+
tickCount++;
90+
91+
animationFrameId = requestAnimationFrame(draw);
92+
}
93+
94+
let animationFrameId = requestAnimationFrame(draw);

0 commit comments

Comments
 (0)