so://phie

blob: c98e6871053e75c2dabfdb4beb9d56159b414bff (2031 bytes)[doc][blame][raw]

 1<!DOCTYPE html>
 2<html lang="en">
 3	<head>
 4		<meta charset="utf-8">
 5		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6		<title>Universe</title>
 7		<style type="text/css">
 8
 9			* {
10				margin: 0;
11				padding: 0;
12			}
13		
14			html,
15			body {
16				overflow: hidden;
17			}
18		
19		</style>
20	</head>
21	<body>
22		<script type="module">
23
24			import { Game, Surface, Shape, Group } from 'https://git.typable.dev/std/js/game.js';
25		
26			const width = window.innerWidth;
27			const height = window.innerHeight;
28		
29			class Particle extends Surface {
30				constructor(x, y) {
31					super(x, y, new Shape.Circle(0));
32					this.origin = {x, y};
33					this.init();
34				}
35				init() {
36					this.time = 0;
37					this.angle = Math.random() * 2 * Math.PI;
38					this.offset = Math.random() * width - width / 2;
39					this.x = this.origin.x + Math.cos(this.angle) * this.offset;
40					this.y = this.origin.y + Math.sin(this.angle) * this.offset;
41					this.shape.radius = this.time;
42				}
43				update() {
44					this.time += 0.01;
45					this.x += Math.cos(this.angle) * this.time / this.offset * 50;
46					this.y += Math.sin(this.angle) * this.time / this.offset * 50;
47					this.shape.radius = this.time / Math.abs(this.offset) * 50;
48					if(!(this.x > 0 && this.x < width && this.y > 0 && this.y < height)) {
49					this.init();
50					}
51				}
52				render(g) {
53					const {x, y, shape: {radius}} = this;
54					g.fillStyle = 'white';
55					g.beginPath();
56					g.arc(x, y, radius, 2 * Math.PI, 0);
57					g.fill();
58				}
59			}
60		
61			class Universe extends Game {
62				constructor() {
63					super(width, height);
64					this.group = new Group();
65					for(let i = 0; i < 500; i++) {
66					this.group.add(new Particle(width / 2, height / 2));
67					}
68				}
69				update() {
70					this.group.update();
71				}
72				render(g) {
73					super.render(g);
74					g.fillStyle = 'black';
75					g.fillRect(0, 0, this.width, this.height);
76					this.group.render(g);
77				}
78			}
79		
80			const game = new Universe();
81			document.body.append(game.canvas);
82			game.start();
83		
84		</script>
85	</body>