so://phie

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