Added colission detection but the game is 2 small

package-lock.json

@@ -151,9 +151,9 @@
       }
     },
     "asdf-games": {
-      "version": "1.0.5",
+      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.0.8.tgz",
-      "integrity": "sha512-dRjnLUvjd7umMShBOmitgJhyo9LA2pKgDa1if5Zshd9y6Exj0LcfY0f8WJpA8cxXYlMq3duiT3lE1bFrgtifow=="
+      "integrity": "sha512-l6wE9BpbjzoJ9EetUWuglfw60UcbgA1JEC968+SnRCZlNGG92LzV+kPSbiAyLuz6+4pkuBgWJnSI/gbWZ3bzLA=="
     },
     "astral-regex": {
       "version": "1.0.0",

package.json

@@ -10,7 +10,7 @@
   "author": "McArn",
   "license": "ISC",
   "dependencies": {
-    "asdf-games": "^1.0.5"
+    "asdf-games": "^1.0.8"
   },
   "devDependencies": {
     "electron": "^8.0.2",

src/entities/player.js

@@ -1,12 +1,12 @@
 var asdf = require("asdf-games");
-const { Texture, TileSprite, AnimManager } = asdf;
+const { Texture, TileSprite, AnimManager, wallslide } = asdf;
 
 var texture = new Texture("./res/player.png");
 
 class Player extends TileSprite {
   constructor(keys, window, level) {
     super(texture, 24, 24);
-    this.scale = { x: 2, y: 2 };
+    this.scale = { x: 1, y: 1 };
 
     this.window = window;
 
@@ -34,7 +34,16 @@ class Player extends TileSprite {
     this.pos.x = (level.w / 2) - (24 * this.scale.x / 2);
     this.pos.y = (level.h / 2) - (24 * this.scale.y / 2);
 
+    this.level = level;
+
     this.keys = keys;
+
+    this.hitBox = {
+      x: 4,
+      y: 0,
+      w: 15,
+      h: 24
+    };
   }
     
   update(dt) {
@@ -62,27 +71,16 @@ class Player extends TileSprite {
       this.anims.stop();
     }
 
+    // Speed
+    const xo = this.keys.x * dt * (600 * (1 - (this.keys.action) ?
+      this.rate.running : this.rate.walking ));
+    const yo = this.keys.y * dt * (600 * (1 - (this.keys.action) ?
+      this.rate.running : this.rate.walking ));
+
     // Move
-    if (this.keys.x == -1) {
+    const r = wallslide.wallslide(this, this.level, xo, yo);
-      // Left
+    this.pos.x += r.x;
-      this.pos.x += this.keys.x * dt * (600 * (1 - (this.keys.action) ?
+    this.pos.y += r.y;
-        this.rate.running : this.rate.walking ));
-    }
-    if (this.keys.x == 1) {
-      // Right
-      this.pos.x += this.keys.x * dt * (600 * (1 - (this.keys.action) ?
-        this.rate.running : this.rate.walking ));
-    }
-    if (this.keys.y == -1) {
-      // Up
-      this.pos.y += this.keys.y * dt * (600 * (1 - (this.keys.action) ?
-        this.rate.running : this.rate.walking ));
-    }
-    if (this.keys.y == 1) {
-      // Down
-      this.pos.y += this.keys.y * dt * (600 * (1 - (this.keys.action) ?
-        this.rate.running : this.rate.walking ));
-    }
   }
 }
 

src/game.js

@@ -18,17 +18,17 @@ const keys = new KeyControls();
 
 var level = new Level();
 var player = new Player(keys, window, level);
-const camera = new Camera(player, window, { w: level.w * level.scale.x, h: level.h * level.scale.y });
+const camera = new Camera(player, window, { w: level.w * 2, h: level.h * 2 });
 
 scene.add(camera);
 camera.add(level);
 camera.add(player);
 
+
 game.run(() => {
   if (mouseAim.isDown) {
     console.log("cliccccccccccc");
   }
-
   // Check gamestate
   // TODO
 });

src/levels/level.js

@@ -10,7 +10,7 @@ var levelData = [
   3, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 6,
   3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
   3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
-  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 20, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
   3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
   3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
   3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
@@ -24,18 +24,16 @@ var levelData = [
 ];
 
 var levelTiles = levelData.map(function(e) {
-  return { x: (tiles[e].x / 16), y: (tiles[e].y / 16), walkable: tiles[e].walkeable };
+  return { x: (tiles[e].x / 16), y: (tiles[e].y / 16), walkable: tiles[e].walkable };
 });
-console.log(levelTiles);
 
 class Level extends TileMap {
   constructor () {       
     super(levelTiles, levelSize.w / 16, levelSize.h / 16, 16, 16, texture);
     this.pos = { x: 0, y: 0 };
+    this.scale = { x: 1, y: 1 };
     this.w = levelSize.w;
     this.h = levelSize.h;
-    this.scale = { x: 2, y: 2 };
-
   }
 }