Initial commit

2024-03-01 22:25:12 +01:00 · 2024-03-01 22:25:12 +01:00 · d970236709
commit d970236709
5 changed files with 192 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+*.swp
+*~
+public/js/*
+
--- a/index.ts
+++ b/index.ts
@ -0,0 +1,140 @@
+
+type Vec2 = [number, number];
+type Rad = number;
+
+interface Graphics {
+	clear(): void;
+	drawCar(pos: Vec2, angle: Rad): void;
+}
+
+
+class CanvasGraphics implements Graphics {
+	private canvas = document.querySelector<HTMLCanvasElement>("#canvas")!;
+	private ctx = this.canvas.getContext("2d")!;
+	private alpha = 1;
+	private trans: Vec2 = [100, 350];
+
+	public setup() {
+		this.canvas.width = 500;
+		this.canvas.height = 500;
+	}
+
+	public clear() {
+		this.setFill(100, 170, 255);
+		this.fillRect([0, 0], [this.canvas.width, this.canvas.height]);
+
+		// Draw ground
+		this.setFill(50, 155, 50);
+		this.fillRect([0, 350], [this.canvas.width, 150]);
+	}
+
+	public drawCar(pos: Vec2, angle: Rad) {
+		const [x, y] = pos;
+		this.ctx.save();
+		this.ctx.translate(...this.trans);
+
+
+
+		this.ctx.save();
+		this.ctx.translate(60 + x, 0 + y);
+		this.ctx.rotate(angle);
+
+		// Draw car body
+		this.setFill(200, 0, 0);
+		this.fillRect([-20, -40], [80, 20]);
+		this.fillRect([-20, -20], [100, 20]);
+
+		// Draw rear wheel
+		this.setFill(0, 0, 0);
+		this.fillCircle([0, 0], 10);
+
+		// Draw front wheel
+		this.fillCircle([60, 0], 10);
+
+		this.ctx.restore();
+
+
+		this.ctx.restore();
+
+	}
+
+	private setFill(red: number, green: number, blue: number): void {
+		this.ctx.fillStyle = `rgba(${red}, ${green}, ${blue}, ${this.alpha})`;
+	}
+
+	private fillRect(pos: Vec2, size: Vec2): void {
+		const [x, y] = pos;
+		const [width, height] = size;
+		this.ctx.fillRect(x, y, width, height);
+	}
+
+	private fillCircle(pos: Vec2, radius: number) {
+		const [x, y] = pos;
+		this.ctx.beginPath();
+		this.ctx.arc(x, y, radius, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+}
+
+interface Entity {
+	render(graphics: Graphics): void;
+	update(delta: number): void;
+}
+
+class Car implements Entity {
+	private pos: Vec2 = [0, 0];
+	private angle: Rad = Math.PI / -4;
+	private speeder = 1.0;
+
+	public render(graphics: Graphics): void {
+		graphics.drawCar(this.pos, this.angle);
+	}
+	public update(delta: number): void {
+		this.pos[0] += this.speeder * delta * 100;
+	}
+}
+
+class Matrix { 
+	private entities: Entity[] = []
+	private graphics = new CanvasGraphics();
+
+	public setup() {
+		this.graphics.setup();
+	}
+
+	public start() {
+		const looped = (before: number) => {
+			const now = Date.now();
+			const delta = (now - before) / 1000;
+			for (const entity of this.entities) {
+				entity.update(delta);
+			}
+			this.graphics.clear();
+			for (const entity of this.entities) {
+				entity.render(this.graphics);
+			}
+			requestAnimationFrame(() => looped(now));
+		}
+		looped(Date.now());
+	}
+
+	public addEntity(entity: Entity) {
+		this.entities.push(entity);
+	}
+}
+
+
+
+
+function main() {
+	const matricen = new Matrix();
+	matricen.setup();
+
+	const car = new Car();
+	matricen.addEntity(car);
+	matricen.start();
+}
+
+
+main();
+
--- a/package.json
+++ b/package.json
@ -0,0 +1,12 @@
+{
+  "name": "canvas",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Canvas</title>
+		<script defer src="js/index.js"></script>
+		<style>
+			body {
+				text-align: center;
+				background-color: #333;
+			}
+
+			#canvas {
+				width: 500px;
+				height: 500px;
+			}
+		</style>
+	</head>
+	<body>
+		<canvas id="canvas"></canvas>	
+	</body>
+</html>
+
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "none",
+	"lib": ["esnext", "dom"],
+    "inlineSourceMap": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+	"outDir": "public/js"
+  },
+  "include": ["index.ts"]
+}