Initial Commit

Philipp-S · Sep 19, 2020 · f5f3a8a · f5f3a8a
commit f5f3a8a
Show file tree

Hide file tree

Showing 14 changed files with 304 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+
+*.js.map
+*.js
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,12 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "type": "firefox",
+        "request": "launch",
+        "name": "Launch Firefox against localhost",
+        "url": "file:///${workspaceFolder}/build/index.html",
+        "webRoot": "${workspaceFolder}"
+      }
+    ]
+  }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,17 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "typescript",
+			"tsconfig": "tsconfig.json",
+			"problemMatcher": [
+				"$tsc"
+			],
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"label": "tsc: build - tsconfig.json"
+		}
+	]
+}
diff --git a/build/img/balloon_red.png b/build/img/balloon_red.png
diff --git a/build/img/player.png b/build/img/player.png
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<head>
+    <script src = "js/init.js"></script>
+    <script src = "js/input.js"></script>
+    <script src = "js/player.js"></script>
+    <script src = "js/resources.js"></script>
+    <script src = "js/types.js"></script>
+    <script src = "js/state.js"></script>
+    <script src = "js/renderer.js"></script>
+</head>
+<body>
+
+    <canvas id="canvas_main" width="1024" height="768">
+
+    </canvas>
+
+</body>
diff --git a/init.ts b/init.ts
@@ -0,0 +1,36 @@
+class Game {
+
+    public state: State; 
+    public renderer: Renderer; 
+
+    private lastUpdate: number;
+
+    constructor() {
+        Input.init();
+        this.state = new State();
+        this.renderer = new Renderer(document.getElementById("canvas_main") as HTMLCanvasElement);
+        this.lastUpdate = NaN;
+    }
+
+    mainLoop(time: DOMHighResTimeStamp) {
+        let deltaTime = (time - this.lastUpdate) / 1000;
+        this.lastUpdate = time;
+
+        if (!isNaN(deltaTime)) {
+            this.state.update(deltaTime);
+            this.renderer.update(this.state);
+            Input.update();
+        }
+        window.requestAnimationFrame(this.mainLoop.bind(this));
+    }
+
+
+}
+
+window.onload = () => {
+
+    let game = new Game();
+
+    window.requestAnimationFrame(game.mainLoop.bind(game));
+}
+
diff --git a/input.ts b/input.ts
@@ -0,0 +1,68 @@
+let Input = {
+    downKeys: {},
+    pressedKeys: {},
+    releasedKeys: {},
+
+
+    // Mouse status
+    mouse: {
+        x:0,
+        y:0,
+        down: false,
+        click: false,
+        onscreen:false
+    },
+
+    setMouseState(event) {
+        this.mouse.x = event.clientX;
+        this.mouse.y = event.clientY;
+        this.mouse.down = (event.buttons & 1);
+        this.mouse.click = (event.buttons & 1);
+    },
+
+    // register the event listeners
+    init(){
+        let me = this;
+        document.addEventListener('keydown', function(event) {
+            if (!me.downKeys[event.code]) {
+                me.pressedKeys[event.code] = true;
+            }
+            me.downKeys[event.code] = true;
+            console.log("Keydown: " + event.code);
+        });
+        document.addEventListener('keyup', function(event) {
+            me.downKeys[event.code] = false;    
+            me.releasedKeys[event.code] = true;        
+        });
+
+
+        document.onmousemove = this.setMouseState.bind(this);
+        document.onmousedown = this.setMouseState.bind(this);
+        document.onmouseup = this.setMouseState.bind(this);
+        document.onmouseleave = function() { me.mouseOnScreen = false; };
+        document.onmouseenter = function() { me.mouseOnScreen = true; };
+    },
+
+    // returns true if the key is currently held down
+    keyDown(key: string) {
+        return this.downKeys[key] == true;
+    },
+
+    // returns true if the key was pressed this update
+    keyPressed(key: string) {
+        return this.pressedKeys[key] == true;
+    },
+
+    // returns true if the key was released this update
+    keyReleased(key: string) {
+        return this.releasedKeys[key] == true;
+    },
+
+    // called to signal that a new update tick begins
+    update() {
+        this.pressedKeys = {};
+        this.releasedKeys = {};
+        this.mouse.click = false;
+    }
+
+}
diff --git a/player.ts b/player.ts
@@ -0,0 +1,53 @@
+class Player implements Entity {
+    pos: Point;
+    sprite: CanvasImageSource;
+    renderPivot: Point = {x:32, y:64};
+
+    private isGrounded = false;
+
+    private velocity: Point = {x: 0, y:0};
+
+    constructor() {
+        this.pos = { x: 0, y: -500};
+        let image = new Image();
+        Resources.setImage(this, ImageResource.PLAYER);
+    }
+
+    update(deltaTime: number, state: State) : void {
+        // apply gravity
+        this.velocity.y += 1000 * deltaTime;
+
+        if(Input.mouse.click) {
+            this.explosion({x: 0, y: 10});
+        }
+
+        // apply velocity
+        this.pos.x += this.velocity.x * deltaTime;
+        this.pos.y += this.velocity.y * deltaTime;
+
+        // ground collision checking
+        if (this.pos.y > 0) {
+            this.pos.y = 0;
+            this.velocity = {x: 0, y: 0}
+            this.isGrounded = true;
+        }
+
+
+    }
+
+    explosion(point: Point) {
+        console.log("Explosion");
+        let distx = this.pos.x - point.x;
+        let disty = this.pos.y - point.y;
+        let dist = Math.sqrt(distx * distx + disty * disty);
+
+        let force = 10000 / ( dist * dist + 100 )
+        let normalized: Point = { x: distx / dist, y: disty / dist };
+
+        // it would be more physically correct to add the explosion force, but
+        // stopping the player actually feels more right
+        this.velocity.x = normalized.x * force;
+        this.velocity.y = normalized.y * force;
+
+    }
+}
diff --git a/renderer.ts b/renderer.ts
@@ -0,0 +1,34 @@
+// the rendering system
+class Renderer {
+
+    static readonly COLOR_SKY: string = "#66ddff";
+    static readonly COLOR_GROUND: string = "#88ddbb";
+
+    private canvas: HTMLCanvasElement;
+    private ctx: CanvasRenderingContext2D;
+
+
+    constructor(canvas: HTMLCanvasElement) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext("2d");
+    }
+
+
+    update(state: State) {
+        // background
+        this.ctx.fillStyle = Renderer.COLOR_SKY;
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
+        // ground
+        let offset: Point = { x: this.canvas.width / 2 - state.cameraFocus.x, y: this.canvas.height / 2 - state.cameraFocus.y };
+        this.ctx.fillStyle = Renderer.COLOR_GROUND;
+        this.ctx.fillRect(0, offset.y, this.canvas.width, this.canvas.height);
+
+        // objects
+        state.entities.forEach(r => {
+            if (r.sprite) {
+                this.ctx.drawImage(r.sprite, r.pos.x + offset.x - r.renderPivot.x, r.pos.y + offset.y - r.renderPivot.y );
+            }
+        })
+
+    }
+}
diff --git a/resources.ts b/resources.ts
@@ -0,0 +1,19 @@
+// handler for resources
+enum ImageResource {
+    PLAYER = "img/player.png"
+}
+
+class Resources {
+
+
+    public static setImage(entity: Entity, res: ImageResource) : void {
+        let image = new Image();
+        image.src = res;
+        image.onload = () => {
+            entity.sprite = image;
+        }
+        image.onerror = () => {
+            console.error("Could not load image " + res);
+        }
+    }
+}
diff --git a/state.ts b/state.ts
@@ -0,0 +1,23 @@
+// the main game-state class
+class State {
+
+    public cameraFocus: Point ;
+    public entities: Entity[];
+
+    private player: Player;
+
+
+    constructor() {
+        this.cameraFocus = {x:0, y: -200};
+        this.entities = Array();
+
+        this.player = new Player();
+        this.entities.push(this.player);
+
+    }
+
+    update(deltaTime: number) {
+        this.entities.forEach(e => e.update(deltaTime, this));
+    }
+
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "target": "es5",
+      "module": "CommonJS",
+      "sourceMap": true,
+      "outDir": "build/js",
+
+    }
+  }
diff --git a/types.ts b/types.ts
@@ -0,0 +1,13 @@
+// some general utility types
+
+interface Point {
+    x: number
+    y: number
+}
+
+interface Entity {
+    pos: Point;
+    sprite: CanvasImageSource;
+    renderPivot: Point;
+    update(deltaTime: number, state:State) : void;
+}