byreqz
/
matrix-bg
mirror of https://github.com/byReqz/matrix-bg.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add files via upload

This commit is contained in:
Nils 2019-08-13 02:35:41 +02:00 committed by GitHub
parent 249c8c1d8d
commit 03b42ae7b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 100 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css Normal file
View File

@ -0,0 +1,7 @@
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
}

32
index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>matrix runner</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script src="js/index.js"></script>
</body>
</html>

47
js/index.js Normal file
View File

@ -0,0 +1,47 @@
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded () {
canvasApp();
}
function canvasSupport (e) {
return !!e.getContext;
}
function canvasApp () {
var canvas = document.getElementById('myCanvas');
if (!canvasSupport(myCanvas)) {
return;
}
var ctx = canvas.getContext('2d');
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var yPositions = Array(300).join(0).split('');
function runMatrix() {
if (typeof Game_Interval != 'undefined') clearInterval(Game_interval);
Game_Interval = setInterval(drawScreen, 33);
}
function drawScreen () {
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = '#0f0';
ctx.font = '10px Nasalization';
yPositions.map(function(y, index){
text = String.fromCharCode(1e2 + Math.random() * 33);
x = (index * 10) + 10;
ctx.fillText(text, x, y);
if (y > 100 + Math.random() * 1e4) {
yPositions[index] = 0;
} else {
yPositions[index] = y + 10;
}
})
}
runMatrix();
}

14
scss/style.scss Normal file
View File

@ -0,0 +1,14 @@
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
}
// canvas {
// border: 1px solid rgba(0,0,0,.14);
// box-shadow: 0 0 3px rgba(0,0,0,.05);
// margin: 20px;
// border-radius: 5px;
// }