html
html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="start">Start</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
}
#start{
height:50px;width:200px;
font-size:35px;
background-color: #0f0;
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
display:flex;
text-align:center;
justify-content:center;
align-items:center;
}
Enter to Rename, Shift+Enter to Preview
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 = () => {
const start = document.getElementById("start");
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
var arr = [];
let isplaying = false;
start.onclick = () => {
start.style.visibility = "hidden";
if(!isplaying){
isplaying = true;
Animate()
}
var interval = setInterval(()=>{
arr.push({
xpos:Math.random()*canvas.width,
ypos:-50
})
},1000)
setTimeout(()=>{
clearInterval(interval);
start.style.visibility = "visible";
},5000);
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run