html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id='text'>St. Patrick's<br>Runner Game</div>
<img src='https://i.imgur.com/KPL4hCa.jpeg' id='logoImage'>
<div id="loader">
<div class="loaderComponent"></div>
<div class="loaderComponent"></div>
<div class="loaderComponent"></div>
<div class="loaderComponent"></div>
<div class="loaderComponent"></div>
<div class="loaderComponent"></div>
<div class="loaderComponent"></div>
</div>
<img id='homeBackgroundImage' src='https://i.imgur.com/A9AcxJw.jpeg'>
<div id='start' style="visibility:hidden;">Start</div>
<div id='help' style="visibility:hidden;">Help</div>
</body>
</html>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
margin: 0;
padding: 0;
display: flex;
overflow: hidden;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#canvas {
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
z-index:1;
}
#text {
font-size: 40px;
color: #0f0;
text-align: center;
margin-top: 0px;
font-family: "Courier New", Courier, monospace;
position: absolute;
top:calc(50% - 220px);
}
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = () => {
setTimeout(() => {
document.getElementById('text').style.display =
document.getElementById('logoImage').style.display =
document.getElementById('loader').style.display = 'none';
document.getElementById('start').style.visibility =
document.getElementById('help').style.visibility =
document.getElementById('homeBackgroundImage').style.visibility = 'visible';
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
if (window.innerWidth <= 500) canvas.width = window.innerWidth;
else canvas.width = 500;
if (window.innerHeight <= 800) canvas.height = window.innerHeight;
else canvas.height = 800;
let pointsArray = [];
for (let i = 0; i < 100; i++) {
let rad = Math.random() * 2.5;
let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height;
let sx = (Math.random() - 0.5) * 2;
let sy = (Math.random() - 0.5) * 2;
BROWSER
Console
Run