html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<!--
idk what to do with this. shooter game maybe ? idk.
finally! same game speed for different fps
-->
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sat/0.8.0/SAT.min.js"></script>
</head>
<body>
<canvas width=1000 height=1000>
not supported on your browser
</canvas>
<img src="https://spencer2124.files.wordpress.com/2014/06/asteroid.png" />
<h3 id='l'></h3>
</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
16
17
18
19
20
21
body {
margin: 0;
}
canvas{
width: 100vw;
height: auto;
background-image: url('http://thumbs.gograph.com/gg55940251.jpg');
background-size: cover;
}
img{
width: 0;
height: 0;
}
h3{
width: 100vw;
margin: 0;
text-align: 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
(()=>{
var asimg;
var parts=[];
var offset=10;
function setup(){
asimg = document.getElementsByTagName('img')[0];
}
function draw(skip){
if([35,23,74,35,92].indexOf(Date.now()%100)>=0&&parts.length<100){
let v=(Math.random()>.5)
let sc=Math.random()+.5;
let s=100*sc;
let x=v?((Math.random()>.5)?-s:cw+s):Math.random()*cw;
let y=!v?((Math.random()>.5)?-s:ch+s):Math.random()*ch;
let atr=new Sprite(x,y,Math.random(),100,rint(2,9),Math.random()*(2*Math.PI),{name:'circle'},asimg);
atr.scale(sc);
parts.push(atr);
}
collide(cw,ch,parts,(a,b)=>{
//parts.splice(parts.indexOf(a),1);
//parts.splice(parts.indexOf(b),1);
});
for(let a of parts){
a.draw(ctx,skip);
if(a.x<-a.w-offset||a.y<-a.h-offset||a.x>cw+a.w+offset||a.y>ch+a.h+offset){
parts.splice(parts.indexOf(a),1);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run