Added player entity and added some gfx for testing

res/main.css

@@ -0,0 +1,17 @@
+body {
+	background-color: rgba(42, 42, 46, 1);
+	text-align: center;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+#board {
+	position: relative;
+	background-color: #111;
+	width: max-content;
+	height: auto;
+	margin: auto;
+	border: 5px solid whitesmoke;
+}

src/entities/player.js

@@ -0,0 +1,78 @@
+var asdf = require("asdf-games");
+const { math, KeyControls, Texture, Sprite, TileSprite } = asdf;
+
+var texture = new Texture('./res/player.png');
+
+class Player extends TileSprite {
+    constructor(keys) {
+        super(texture, 24, 24);
+        this.scale = { x: 3, y: 3 };
+
+        // Rate walking = 0.4
+        // Rate running = 0.08
+
+        this.rate = 1;
+        this.direction = 1;
+        this.frames = [
+            { x: 0, y: 1 },
+            { x: 1, y: 1 },
+            { x: 2, y: 1 },
+            { x: 3, y: 1 }
+        ];
+        this.curTime = 0;
+        this.curFrame = 0;
+        this.frame = this.frames[this.curFrame];
+
+        this.pos.x = (640 / 2) - (24 * this.scale.x / 2);
+        this.pos.y = (320 / 2) - (24 * this.scale.y / 2);
+
+        this.keys = keys;
+    }
+    update(dt, t) {
+        const { rate, frames } = this;
+        this.curTime += dt;
+
+        // Change speed
+        if (this.keys.x || this.keys.y) {
+            // Walking
+            this.rate = 0.35;
+        } else {
+            // Standstill
+            this.curFrame = 0;
+        }
+        if (this.keys.action && (this.keys.x || this.keys.y)) {
+            // Running
+            this.rate = 0.08;
+        }
+
+        // Change walking direction
+        if (this.keys.x == -1) {
+            // Left
+            this.direction = 3;
+        }         
+        if (this.keys.x == 1) {
+            // Right
+            this.direction = 2;
+        } 
+        if (this.keys.y == -1) {
+            // Down
+            this.direction = 0;
+        } 
+        if (this.keys.y == 1) {
+            // Up
+            this.direction = 1;
+        } 
+
+        this.frames.forEach(element => {
+            element.y = this.direction;
+        });
+
+        // Animate
+        if (this.curTime > rate) {
+            this.frame = frames[this.curFrame++ % frames.length];
+            this.curTime -= rate;
+        }
+    }
+}
+
+module.exports = Player;

src/index.js

@@ -1,5 +1,19 @@
-var asdf = require("asdf-games");
+var asdf = require('asdf-games');
-const { Game, Container, CanvasRenderer, math, SpriteSheetXML, KeyControls, MouseControls, Text, Texture, Sprite, TileMapXML, TileSprite, TileSpriteXML } = asdf;
+const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf;
 
-const game = new Game(720, 480, false);
+const game = new Game(640, 320, true);
-const { scene, w, h } = game;
+const { scene, w, h } = game;
+
+const mouseAim = new MouseControls();
+const keys = new KeyControls();
+
+var Player = require("./src/entities/player.js")
+var player = new Player(keys);
+
+scene.add(player);
+
+game.run((dt ,t) => {
+    if (mouseAim.isDown) {
+        console.log('cliccccccccccc');
+    }
+});