Skip to content

Instantly share code, notes, and snippets.

@AlfredJKwack

AlfredJKwack/index.html

Created September 29, 2019 07:35
Show Gist options
  • Save AlfredJKwack/1dfb80102cc197254faa5980bbbfe626 to your computer and use it in GitHub Desktop.
Save AlfredJKwack/1dfb80102cc197254faa5980bbbfe626 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic maze using old school commodore 64 font
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>10 PRINT CHR$(205.5+RND(1)); : GOTO 10</title>
<style>
@font-face {
font-family: "C64 Pro Mono";
src: url("http://assembler.org/skch/goto/C64_Pro_Mono_v1.0-STYLE.woff") format("woff");
}
body {
font: normal 32px/32px "C64 Pro Mono";
letter-spacing: 0px;
padding: 0;
margin: 0;
background: #005e8c;
color: #78abd0;
overflow: hidden;
}
div {
float: left;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
div.on {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</head>
<body>
<script>
var numDivs = 2000,
fragment = document.createDocumentFragment();
while(numDivs--){
var newDiv = document.createElement('div');
if (Math.round(Math.random())) {
newDiv.innerHTML = "&#x0ee4d;";
}
else {
newDiv.innerHTML = "&#x0ee4e;";
}
fragment.appendChild(newDiv);
}
document.body.appendChild(fragment);
var divs = document.getElementsByTagName('div');
var run = function () {
var r = Math.floor(Math.random() * divs.length);
if (divs[r].className) {
divs[r].className = "";
}
else {
divs[r].className = "on";
}
setTimeout(run, 50);
}
run();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment