diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..39b0ed0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,7 @@ +body { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: flex-start; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..514e03b --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + matrix runner + + + + + + + + + + + + + + + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..fbd45de --- /dev/null +++ b/js/index.js @@ -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(); + +} \ No newline at end of file diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 0000000..d8efbe7 --- /dev/null +++ b/scss/style.scss @@ -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; +// } \ No newline at end of file