#34: starting implementing

melonjs-client/src/main/client/config.js

@@ -11,8 +11,8 @@ const CONFIG = {
 		//baseURL: "http://localhost:8080/",
 
 		// Use a real IP address if you want to do multiplayer testing
-		//baseURL: "http://192.168.2.198:8080/",
-		baseURL: "http://192.168.2.171:8080/",
+		baseURL: "http://192.168.2.198:8080/",
+		//baseURL: "http://192.168.2.171:8080/",
 	},
 
 	dev: {

melonjs-client/src/main/client/js/renderables/base-weapon.js

@@ -0,0 +1,80 @@
+import { NineSliceSprite, level, collision, Body, Rect } from "melonjs";
+import { my_collision_types } from "../util/constants";
+
+
+export class BaseWeapon extends NineSliceSprite {
+	constructor(x, y, options) {
+		super(x, y, options);
+
+		// set the bodx for collision etc.
+		this.body = new Body(this);
+		this.body.addShape(new Rect(0, 0, options.width, options.height));
+		this.body.ignoreGravity = true;
+        this.body.isStatic = true;
+		this.body.collisionType = collision.types.PROJECTILE_OBJECT;
+		this.body.setCollisionMask(collision.types.ENEMY_OBJECT | my_collision_types.REMOTE_PLAYER);
+		this.alwaysUpdate = true;
+
+		/**
+		 * To be set on multiplayer. Who was throwing this weapon?
+		 */
+		this.thrownByPlayer = null;
+
+		/**
+		 * Who is the owner of this?
+		 */
+		this.owner = options.owner || null;
+
+		/**
+		 * The borderlayer of the map. If there is a tile at x/y, don't get further
+		 */
+		this.borderLayer = null;
+
+		/**
+		 * Set to true as soon, as this weapon is active and could hurt anybody else
+		 */
+		this.isExploding = false;
+
+		/**
+		 * Width of the current map
+		 */
+		this.mapWidth = level.getCurrentLevel().cols;
+
+		/**
+		 * Height of the current map
+		 */
+		this.mapHeight = level.getCurrentLevel().rows;
+
+		// setup layer
+		let layers = level.getCurrentLevel().getLayers();
+		layers.forEach((l) => {
+			if (l.name === "Frame") this.borderLayer = l;
+		});
+	}
+
+    /**
+     * Checks to see if anything can go to the given point
+     * @param {number} x map coord
+     * @param {number} y map coord
+     * @returns 
+     */
+	isWalkable(x, y) {
+		if (x < 0 || x >= this.mapWidth || y < 0 || y >= this.mapHeight) {
+			return false;
+		}
+		let tile = this.borderLayer.cellAt(x, y);
+		if (tile !== null) return false;
+		else return true;
+	}
+
+
+	/**
+	 * colision handler
+	 * (called when colliding with other objects)
+	 */
+	onCollision(response, other) {
+		// Make all other objects solid
+
+		return false;
+	}
+}

melonjs-client/src/main/client/js/renderables/bomb.js

@@ -1,8 +1,7 @@
 import { collision, level, game, Sprite, Body, Rect } from "melonjs/dist/melonjs.module.js";
+import { BaseWeapon } from "./base-weapon";
 
-class BombEntity extends Sprite {
-	borderLayer;
-	isExploding = false;
+class BombEntity extends BaseWeapon {
 
 	/**
 	 * constructor
@@ -17,30 +16,15 @@ class BombEntity extends Sprite {
 			frameheight: 64,
 		});
 
-		let layers = level.getCurrentLevel().getLayers();
-		layers.forEach((l) => {
-			if (l.name === "Frame") this.borderLayer = l;
-		});
-
-		this.body = new Body(this);
-		this.body.addShape(new Rect(0, 0, 96, 96));
-		this.body.ignoreGravity = true;
-		this.body.collisionType = collision.types.PROJECTILE_OBJECT;
-		this.body.setCollisionMask(collision.types.ENEMY_OBJECT);
-
-		// add animations
-		this.alwaysUpdate = true;
-		this.thrownByPlayer = null;
-
 		this.addAnimation("bzzz", [0, 1, 2, 3, 4, 5, 6]);
 		this.addAnimation("boom", [7, 8, 9, 10, 11, 12, 13]);
-		this.setCurrentAnimation("bzzz", function () {
+		this.setCurrentAnimation("bzzz", () => {
 			game.viewport.shake(50, 400);
 			this.isExploding = true;
-			this.setCurrentAnimation("boom", function () {
+			this.setCurrentAnimation("boom", () => {
 				this.isExploding = false;
 				game.world.removeChild(this);
-				// remove all frames in a 3/3 radius
+				// remove all border tiles in a 3/3 radius
 				let rad = [
 					{ x: -1, y: -1 },
 					{ x: 0, y: -1 },
@@ -61,15 +45,6 @@ class BombEntity extends Sprite {
 		});
 	}
 
-	/**
-	 * colision handler
-	 * (called when colliding with other objects)
-	 */
-	onCollision(response, other) {
-		// Make all other objects solid
-
-		return false;
-	}
 }
 
 export default BombEntity;

melonjs-client/src/main/client/js/renderables/explosion.js

@@ -1,9 +1,8 @@
 import { collision, level, game, Sprite, Body, Rect } from "melonjs/dist/melonjs.module.js";
 import { BARRIER_TILE } from "../util/constants";
+import { BaseWeapon } from "./base-weapon";
 
-class ExplosionEntity extends Sprite {
-	borderLayer;
-	isExploding = false;
+class ExplosionEntity extends BaseWeapon {
 
 	/**
 	 * constructor
@@ -18,19 +17,6 @@ class ExplosionEntity extends Sprite {
 			frameheight: 256,
 		});
 
-		let layers = level.getCurrentLevel().getLayers();
-		layers.forEach((l) => {
-			if (l.name === "Frame") this.borderLayer = l;
-		});
-
-		this.body = new Body(this);
-		this.body.addShape(new Rect(0, 0, 96, 96));
-		this.body.ignoreGravity = true;
-		this.body.collisionType = collision.types.PROJECTILE_OBJECT;
-		this.body.setCollisionMask(collision.types.ENEMY_OBJECT);
-
-		// add animations
-		this.alwaysUpdate = true;
 		this.addAnimation("boom", [
             0,  1,  2 , 3 , 4 , 5 , 6 , 7 ,
             8,  9,  10, 11, 12, 13, 14, 15,
@@ -71,26 +57,6 @@ class ExplosionEntity extends Sprite {
 
         game.viewport.shake(50, 62*16);
 	}
-
-	/**
-	 * update the entity
-	 */
-	update(dt) {
-		// call the parent method
-
-		super.update(dt);
-		return true;
-	}
-
-	/**
-	 * colision handler
-	 * (called when colliding with other objects)
-	 */
-	onCollision(response, other) {
-		// Make all other objects solid
-
-		return false;
-	}
 }
 
 export default ExplosionEntity;

melonjs-client/src/main/client/js/renderables/magic-bolt.js

@@ -1,14 +1,14 @@
 import { Sprite, Body, Rect, collision, game, level, Vector2d } from "melonjs";
 import { my_collision_types } from "../util/constants";
+import { BaseWeapon } from "./base-weapon";
 import ExplosionEntity from "./explosion";
 
 /**
  * A fire bolt: Throwing a firebolt
  */
-export default class MagicBolt extends Sprite {
+export default class MagicBolt extends BaseWeapon {
 	VELOCITY = 0.5;
     isStopped = true;
-    isExploding = false;
 
 	constructor(owner, x, y, dx, dy) {
 		super(x*32+16, y*32+16, {
@@ -19,33 +19,15 @@ export default class MagicBolt extends Sprite {
 			frameheight: 100,
             anchorPoint: new Vector2d(0.5,0.5),
 		});
-
-        this.thrownByPlayer = null;
-
+
         this.owner = owner;
 		this.dx = dx;
 		this.dy = dy;
 
-		this.body = new Body(this);
-		this.body.addShape(new Rect(28, 32, 34, 30));
-		this.body.ignoreGravity = true;
-		this.body.collisionType = collision.types.PROJECTILE_OBJECT;
-		this.body.setCollisionMask(collision.types.ENEMY_OBJECT | my_collision_types.REMOTE_PLAYER);
-        this.body.isStatic = true;
-		this.alwaysUpdate = true;
-
 		this.addAnimation("start", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17], 6);
 		this.addAnimation("bruzzel", [18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53], 6);
 		this.addAnimation("boom", [54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80], 2);
 
-        let layers = level.getCurrentLevel().getLayers();
-        this.mapWidth = level.getCurrentLevel().cols;
-        this.mapHeight = level.getCurrentLevel().rows;
-
-        layers.forEach((l) => {
-            if (l.name === "Frame") this.borderLayer = l;
-        });
-
 		this.setCurrentAnimation("start", () => {
             this.isStopped = false;
             this.isExploding = true;
@@ -72,17 +54,8 @@ export default class MagicBolt extends Sprite {
 		return super.update(dt);
 	}
 
-	isWalkable(x, y) {
-		if (x < 0 || x >= this.mapWidth || y < 0 || y >= this.mapHeight) {
-			return false;
-		}
-		let tile = this.borderLayer.cellAt(x, y);
-		if (tile !== null) return false;
-		else return true;
-	}
-
     onCollision(response, other) {
-        if( other.body.collisionType === collision.types.ENEMY_OBJECT ) {
+        if( other.body.collisionType === collision.types.ENEMY_OBJECT) {
             this.isStopped = true;
             this.pos.x = other.pos.x;
             this.pos.y = other.pos.y;

melonjs-client/src/main/client/js/renderables/magic-firespin.js

@@ -1,15 +1,15 @@
 import { Sprite, Body, Rect, collision, game, level, Vector2d, timer } from "melonjs";
 import { my_collision_types } from "../util/constants";
+import { BaseWeapon } from "./base-weapon";
 import ExplosionEntity from "./explosion";
 
 /**
  * Magic FireSpin: A firespin around your player's body. Anybody who is coming
  * too close to you will get burned.
  */
-export default class MagicFirespin extends Sprite {
+export default class MagicFirespin extends BaseWeapon {
 	VELOCITY = 0.5;
 	isStopped = false;
-	isExploding = true;
 
 	constructor(owner, x, y) {
 		super(x * 32 + 16, y * 32 + 16, {
@@ -21,15 +21,9 @@ export default class MagicFirespin extends Sprite {
 			anchorPoint: new Vector2d(0.5, 0.5),
 		});
 
-		this.thrownByPlayer = null;
 		this.owner = owner;
 
-		this.body = new Body(this);
 		this.body.addShape(new Rect(28, 32, 34, 30));
-		this.body.ignoreGravity = true;
-		this.body.collisionType = collision.types.PROJECTILE_OBJECT;
-		this.body.setCollisionMask(collision.types.ENEMY_OBJECT | my_collision_types.REMOTE_PLAYER);
-		this.body.isStatic = true;
 		this.alwaysUpdate = true;
 
 		this.addAnimation(
@@ -41,14 +35,6 @@ export default class MagicFirespin extends Sprite {
 			24
 		);
 
-		let layers = level.getCurrentLevel().getLayers();
-		this.mapWidth = level.getCurrentLevel().cols;
-		this.mapHeight = level.getCurrentLevel().rows;
-
-		layers.forEach((l) => {
-			if (l.name === "Frame") this.borderLayer = l;
-		});
-
 		this.setCurrentAnimation("spin");
 		this.timerId = timer.setTimeout(
 			() => {
@@ -60,17 +46,18 @@ export default class MagicFirespin extends Sprite {
 			true
 		);
 
+		this.isExploding = true;
 		this.currentStep = 0;
 		this.maxSteps = 45;
 		this.radius = 48;
 		this.maxHits = 5;
-		this.scale(2, 2);
+		//this.scale(2, 2);
 	}
 
 	update(dt) {
 		if (!this.isStopped) {
-			let x = 0; //this.radius * Math.cos(2 * Math.PI * this.currentStep / this.maxSteps);
-			let y = 0; //this.radius * Math.sin(2 * Math.PI * this.currentStep / this.maxSteps);
+			let x = this.radius * Math.cos(2 * Math.PI * this.currentStep / this.maxSteps);
+			let y = this.radius * Math.sin(2 * Math.PI * this.currentStep / this.maxSteps);
 
 			this.pos.x = this.owner.pos.x + x;
 			this.pos.y = this.owner.pos.y + y;
@@ -80,15 +67,6 @@ export default class MagicFirespin extends Sprite {
 		return super.update(dt);
 	}
 
-	isWalkable(x, y) {
-		if (x < 0 || x >= this.mapWidth || y < 0 || y >= this.mapHeight) {
-			return false;
-		}
-		let tile = this.borderLayer.cellAt(x, y);
-		if (tile !== null) return false;
-		else return true;
-	}
-
 	onCollision(response, other) {
 		if (other.body.collisionType === collision.types.ENEMY_OBJECT && !other.isStunned && !other.isDead) {
 			this.maxHits--;