Correction de bugs

conquerirlemonde-front/src/app/games/games.component.css

@@ -1,35 +1,36 @@
-			#background {
-				z-index: -1;
-        background: transparent;
-			}
-			#main {
-        position: fixed;
-        top: 120px;
-        left: 0px;
-        background: transparent;
-				z-index: 0;
-			}
-			#ship {
-        position: fixed;
-        top: 120px;
-        left: 0px;
-        background: transparent;
-				z-index: 1;
-			}
-			.score {
-				position: absolute;
-        top: 120px;
-				left: 480px;
-				color: #FF7F00;
-				font-family: Helvetica, sans-serif;
-				cursor: default;
-			}
-			.game-over {
-				position: absolute;
-        top: 320px;
-				left: 210px;
-				color: #FF7F00;
-				font-family: Helvetica, sans-serif;
-				font-size: 30px;
-				cursor: default;
-			}
+#background {
+    position: absolute;
+    z-index: -1;
+    background: transparent;
+}
+
+#main {
+    position: absolute;
+    background: transparent;
+    z-index: 0;
+}
+
+#ship {
+    position: absolute;
+    background: transparent;
+    z-index: 1;
+}
+
+.score {
+    position: absolute;
+    top: 120px;
+    left: 480px;
+    color: #FF7F00;
+    font-family: Helvetica, sans-serif;
+    cursor: default;
+}
+
+.game-over {
+    position: absolute;
+    top: 320px;
+    left: 210px;
+    color: #FF7F00;
+    font-family: Helvetica, sans-serif;
+    font-size: 30px;
+    cursor: default;
+}

conquerirlemonde-front/src/app/games/games.component.ts

@@ -110,7 +110,7 @@ export class GamesComponent implements AfterViewInit {
 
       // Initialize the background object
       this.background = new Background(this.imageRepository, this.bgContext, this.bgCanvas.nativeElement);
-      this.ship = new Ship(525, 570, this.imageRepository.spaceship.width, this.imageRepository.spaceship.height, this.imageRepository, this.shipContext, this.shipCanvas.nativeElement, this.mainContext, this);
+      this.ship = new Ship(525, 570, this.imageRepository, this.shipContext, this.shipCanvas.nativeElement, this.mainContext, this);
 
 
       this.enemyBulletPool = new Pool(50, this.imageRepository, this.mainContext);

conquerirlemonde-front/src/app/games/invader/background.ts

@@ -1,32 +1,33 @@
-import {Drawable} from "./drawable";
-import {ImageRepository} from "./imageRepository";
+import { Drawable } from "./drawable";
+import { ImageRepository } from "./imageRepository";
 
 export class Background extends Drawable {
-  speed = 1; // Redefine speed of the background for panning
-  context: any;
-  imageRepository: ImageRepository;
+    speed = 1; // Redefine speed of the background for panning
+    context: any;
+    imageRepository: ImageRepository;
 
-  constructor(imageRepository: ImageRepository, bgContext: any, bgCanvas: any) {
-    super(0, 0, 0, 0);
-    this.imageRepository = imageRepository;
-    this.context = bgContext;
-    this.canvasWidth = bgCanvas.width;
-    this.canvasHeight = bgCanvas.height;
-  }
+    constructor(imageRepository: ImageRepository, bgContext: any, bgCanvas: any) {
+        super(0, 0, imageRepository.background);
+        this.imageRepository = imageRepository;
+        this.context = bgContext;
+    }
 
-  // Implement abstract function
-  draw() {
-    // Pan background
-    this.y += this.speed;
-    //this.context.clearRect(0,0, this.canvasWidth, this.canvasHeight);
-    this.context.drawImage(this.imageRepository.background, this.x, this.y);
+    // Implement abstract function
+    draw() {
+        // Pan background
+        this.y += this.speed;
+        // this.context.clearRect(0,0, this.imageRepository.background.width, this.imageRepository.background.height);
+        this.context.drawImage(this.image, this.x, this.y);
 
-    // Draw another image at the top edge of the first image
-    this.context.drawImage(this.imageRepository.background, this.x, this.y - this.canvasHeight);
+        // Draw another image at the top edge of the first image
+        this.context.drawImage(this.image, this.x, this.y - this.height);
 
-    // If the image scrolled off the screen, reset
-    if (this.y >= this.canvasHeight)
-      this.y = 0;
-  }
-  move() { }
+        // If the image scrolled off the screen, reset
+      if (this.y >= this.height) {
+        this.y = 0;
+      }
+    }
+
+    move() {
+    }
 }

conquerirlemonde-front/src/app/games/invader/bullet.ts

@@ -1,68 +1,72 @@
-import {Drawable} from "./drawable";
-import {ImageRepository} from "./imageRepository";
+import { Drawable } from "./drawable";
+import { ImageRepository } from "./imageRepository";
 
 export class Bullet extends Drawable {
-  alive = false; // Is true if the bullet is currently in use
-  self: any;
-  imageRepository: ImageRepository;
-  context: any;
+    alive = false; // Is true if the bullet is currently in use
+    self: any;
+    image: HTMLImageElement;
+    context: any;
 
-  constructor(object, mainContext, imageRepository: ImageRepository) {
-    super(0, 0, 0, 0);
-    this.self = object;
-    this.context = mainContext;
-    this.imageRepository = imageRepository;
-  }
-  /*
-   * Sets the bullet values
-   */
-  spawn(x, y, speed) {
-    this.x = x;
-    this.y = y;
-    this.speed = speed;
-    this.alive = true;
-  };
+    constructor(object, mainContext, imageRepository: ImageRepository) {
+        super(0, 0, null);
+        this.self = object;
+        this.context = mainContext;
 
-  /*
-   * Uses a "drity rectangle" to erase the bullet and moves it.
-   * Returns true if the bullet moved of the screen, indicating that
-   * the bullet is ready to be cleared by the pool, otherwise draws
-   * the bullet.
-   */
-  draw() {
-    this.context.clearRect(this.x - 1, this.y - 1, this.width + 2, this.height + 2);
-    this.y -= this.speed;
-
-    if (this.isColliding) {
-      return true;
-    }
-    else if (this.self === "bullet" && this.y <= 0 - this.height) {
-      return true;
+        if (this.self === "bullet") {
+            this.image = imageRepository.bullet;
+        }
+        else if (this.self === "enemyBullet") {
+            this.image = imageRepository.enemyBullet;
+        }
     }
-    else if (this.self === "enemyBullet" && this.y >= this.canvasHeight) {
-      return true;
-    }
-    else {
-      if (this.self === "bullet") {
-        this.context.drawImage(this.imageRepository.bullet, this.x, this.y);
-      }
-      else if (this.self === "enemyBullet") {
-        this.context.drawImage(this.imageRepository.enemyBullet, this.x, this.y);
-      }
 
-      return false;
+    /*
+     * Sets the bullet values
+     */
+    spawn(x, y, speed) {
+        this.x = x;
+        this.y = y;
+        this.speed = speed;
+        this.alive = true;
+    };
+
+    /*
+     * Uses a "drity rectangle" to erase the bullet and moves it.
+     * Returns true if the bullet moved of the screen, indicating that
+     * the bullet is ready to be cleared by the pool, otherwise draws
+     * the bullet.
+     */
+    draw() {
+        this.context.clearRect(this.x - 1, this.y - 1, this.width + 2, this.height + 2);
+
+        this.y -= this.speed;
+
+        if (this.isColliding) {
+            return true;
+        }
+        else if (this.self === "bullet" && this.y <= 0 - this.height) {
+            return true;
+        }
+        else if (this.self === "enemyBullet" && this.y >= this.canvasHeight) {
+            return true;
+        }
+        else {
+            this.context.drawImage(this.image, this.x, this.y);
+            return false;
+        }
+    };
+
+    move() {
     }
-  };
-  move() { }
 
-  /*
-   * Resets the bullet values
-   */
-  clear() {
-    this.x = 0;
-    this.y = 0;
-    this.speed = 0;
-    this.alive = false;
-    this.isColliding = false;
-  };
+    /*
+     * Resets the bullet values
+     */
+    clear() {
+        this.x = 0;
+        this.y = 0;
+        this.speed = 0;
+        this.alive = false;
+        this.isColliding = false;
+    };
 }

conquerirlemonde-front/src/app/games/invader/drawable.ts

@@ -1,27 +1,35 @@
 export abstract class Drawable {
-  y: number;
-  x: number;
-  width: number;
-  height: number;
-  speed: number = 0;
-  canvasWidth = 0;
-  canvasHeight = 0;
-  collidableWith = "";
-  isColliding = false;
-  type = "";
+    y: number;
+    x: number;
+    image: HTMLImageElement;
+    speed: number = 0;
+    canvasWidth = 0;
+    canvasHeight = 0;
+    collidableWith = "";
+    isColliding = false;
+    type = "";
 
-  constructor(x, y, width, height) {
-    // Defualt variables
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-  }
-  // Define abstract function to be implemented in child objects
-  abstract draw();
-  abstract move();
+    constructor(x, y, image: HTMLImageElement) {
+        // Defualt variables
+        this.x = x;
+        this.y = y;
+        this.image = image;
+    }
 
-  isCollidableWith(object) {
-    return (this.collidableWith === object.type);
-  }
+    get width(): number {
+        return this.image.width;
+    };
+
+    get height(): number {
+        return this.image.height;
+    };
+
+    // Define abstract function to be implemented in child objects
+    abstract draw();
+
+    abstract move();
+
+    isCollidableWith(object) {
+        return (this.collidableWith === object.type);
+    }
 }