Création des bars de vie et de bouclier. Ajout animation de tir. Les robots changent automatiquement de cible quand celle-ci meure. Les robots choisissent pour cible le robot le plus proche d'eux. Si deux robots sont à la meme distance, c'est aléatoire.

Code/src/js/classes/Boot.js

@@ -11,6 +11,7 @@ class Boot extends Phaser.Scene {
         this.load.spritesheet('btn_flag', 'assets/btnFlag.png', {frameWidth: 269, frameHeight: 262});
         this.load.spritesheet('btn_map', 'assets/btnMap.png', {frameWidth: 269, frameHeight: 262});
         this.load.image('background', 'assets/background.png');
+        this.load.image('bullet','assets/bullet.png');
     }
 
     create() {

Code/src/js/classes/GamingBoard.js

@@ -5,43 +5,73 @@ class GamingBoard extends Phaser.Scene {
 
     preload() {
         this.cameras.main.setViewport(WIDTH_WINDOW / 10, HEIGHT_WINDOW / 10, WIDTH_MAP, WIDTH_MAP);
-
     }
 
     create() {
         this.add.image(0, 0, 'background').alpha = 0.1;
 
-        this.enemy = new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, WIDTH_MAP * 0.9, 0x6666ff, this);
+        this.listRobot = [];
-        //this.myself = this.add.circle(this.width * 0.1, this.width * 0.1, this.width * 0.05, 0x6666ff);
+        this.listRobot.push(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, WIDTH_MAP * 0.9, 0x6666ff, this));
-        this.myself = new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, 0xff33cc, this);
+        this.listRobot.push(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, 0xff33cc, this));
-        this.myself2 = new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, 0xffffff, this);
+        this.listRobot.push(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, 0xffffff, this));
 
-        this.myself.setTarget(this.enemy);
+        for (let i = 0; i < this.listRobot.length; i++) {
-        this.myself2.setTarget(this.enemy);
+            this.chooseTarget(this.listRobot[i]);
+        }
 
         this.events.on('resume', () => this.resume());
     }
 
     update(time, delta) {
         super.update(time, delta);
-        if (this.myself.target != null && this.myself.target.isAlive()) {
+
-            if (!this.myself.isTargetInRange())
+        this.listRobot.forEach(function (robot) {
-                this.myself.advanceToTarget();
+            if (robot.haveTarget()) {
+                if (!robot.isTargetInRange())
+                    robot.advanceToTarget();
                 else
-                this.myself.attackTarget();
+                    robot.attackTarget();
             }
+        })
 
-        if (this.myself2.target != null && this.myself2.target.isAlive()) {
+        for (let i = 0; i < this.listRobot.length; i++) {
-            if (!this.myself2.isTargetInRange())
+            if (!this.listRobot[i].isAlive()) {
-                this.myself2.advanceToTarget();
+                this.listRobot.splice(i, 1);
-            else
+                i -= 1;
-                this.myself2.attackTarget();
+            } else {
-            console.log(this.enemy.life);
+                if (!this.listRobot[i].haveTarget()) {
+                    this.chooseTarget(this.listRobot[i]);
+                } else {
+                    this.listRobot[i].updateTarget();
+                }
+            }
         }
     }
 
     resume() {
-        this.myself2.updateTarget();
+        //this.myself2.updateTarget();
+    }
+
+    chooseTarget(robot) {
+        let minDist = WIDTH_MAP * 2;
+        let l = [];
+        this.listRobot.forEach(function (item) {
+            if (item !== robot && item.isAlive()) {
+                let hypot = Math.hypot(item.x - robot.x, item.y - robot.y);
+                if (minDist >= hypot) {
+                    if (minDist > hypot) {
+                        minDist = hypot;
+                        l = [];
+                    }
+                    l.push(item);
+                }
+            }
+        });
+        if (this.listRobot.length > 1) {
+            robot.setTarget(l[Math.floor(Math.random() * (l.length + 1))]);
+        } else {
+            robot.setTarget(l[0]);
+        }
     }
 
 

Code/src/js/classes/HealthBar.js

@@ -0,0 +1,68 @@
+class HealthBar {
+    constructor(scene, width, height, x, y, valueMax, color) {
+        this.bar = new Phaser.GameObjects.Graphics(scene);
+
+        this.width = width;
+        this.height = height;
+        this.valueMax = valueMax;
+        this.value = valueMax;
+        this.color = color;
+
+        this.draw();
+
+        this.setX(x);
+        this.setY(y);
+        scene.add.existing(this.bar);
+    }
+
+    decrease(amount) {
+        this.value -= amount;
+
+        let diff = 0;
+        if (this.value < 0) {
+            diff = -this.value;
+            this.value = 0;
+        }
+
+        this.draw();
+
+        return diff;
+    }
+
+    setX(x) {
+        this.bar.setX(x - this.width / 2);
+    }
+
+    setY(y) {
+        this.bar.setY(y);
+    }
+
+    draw() {
+        this.bar.clear();
+
+        //  BG
+        this.bar.fillStyle(0x000000);
+        this.bar.fillRect(0, 0, this.width, this.height);
+
+        //  Health
+
+        this.bar.fillStyle(0xffffff);
+        this.bar.fillRect(2, 2, this.width - 4, this.height - 4);
+
+        let percent = this.value / this.valueMax;
+
+        if (percent < 0.3) {
+            this.bar.fillStyle(0xff0000);
+        } else {
+            this.bar.fillStyle(this.color);
+        }
+
+        let d = Math.floor(percent * (this.width - 4));
+
+        this.bar.fillRect(2, 2, d, this.height - 4);
+    }
+
+    destroy() {
+        this.bar.destroy();
+    }
+}

Code/src/js/classes/Missile.js

@@ -0,0 +1,9 @@
+class Missile extends Phaser.GameObjects.Image {
+
+    constructor(scene, frame, width, height) {
+        super(scene, 0, 0, frame);
+        this.visible = false;
+        this.setOrigin(0.5, 0.5);
+        this.setScale(0.02);
+    }
+}

Code/src/js/classes/Robot.js

@@ -7,8 +7,13 @@ class Robot {
         this.color = color;
         this.range = WIDTH_MAP / 2;
         this.damage = DAMAGE;
-        this.life = LIFE;
+        this.life = new HealthBar(scene, this.width * 2, this.width / 3, this.x, this.y - this.width, LIFE, 0x008000);
-        this.shield = SHIELD;
+        this.shield = new HealthBar(scene, this.width * 2, this.width / 3, this.x, this.y - this.width * 1.5, SHIELD, 0x0000FF);
+
+        this.canAttack = true;
+        this.missile = new Missile(scene, 'bullet', this.width / 5, this.width / 4);
+        scene.add.existing(this.missile);
+
         this.addScene(scene);
     }
 
@@ -20,20 +25,24 @@ class Robot {
     setX(x) {
         this.x = x;
         this.circle.setX(this.x);
+        this.life.setX(this.x);
+        this.shield.setX(this.x);
     }
 
     setY(y) {
         this.y = y;
+        this.life.setY(this.y - this.width);
+        this.shield.setY(this.y - this.width * 1.5);
         this.circle.setY(this.y);
     }
 
     setTarget(target) {
         this.target = target;
-        if (this.target != null)
         this.updateTarget();
     }
 
     updateTarget() {
+        if (this.verifyTarget())
             this.setTargetPos(this.target.x, this.target.y);
     }
 
@@ -46,6 +55,7 @@ class Robot {
     }
 
     advanceToTarget() {
+        if (this.verifyTarget()) {
             if ((this.velocityX >= 0 && this.x >= this.target.x) || (this.velocityX <= 0 && this.x <= this.target.x))
                 this.setX(this.target.x);
             else
@@ -55,10 +65,11 @@ class Robot {
                 this.setY(this.target.y);
             else
                 this.setY(this.y + this.velocityY);
-
+        }
     }
 
     fleeFromTarget() {
+        if (this.verifyTarget()) {
             if (this.velocityX >= 0 && this.x - this.width / 2 <= 0)
                 this.setX(this.width / 2);
             else if (this.velocityX <= 0 && this.x + this.width / 2 >= WIDTH_MAP)
@@ -73,48 +84,91 @@ class Robot {
             else
                 this.setY(this.y - this.velocityY);
         }
+    }
 
 
     attackTarget() {
-        if (this.isTargetInRange()) {
+        if (this.verifyTarget() && this.canAttack && this.target.isAlive() && this.isTargetInRange()) {
             this.attack(this.target);
+            return true;
+        }
+        return false;
     }
+
+    verifyTarget() {
+        if (this.haveTarget()) {
+            if (!this.target.isAlive()) {
+                this.setTarget(null);
+                return false;
+            }
+            return true;
+        }
+
         return false;
     }
 
     attack(target) {
+        this.canAttack = false;
+
+        this.missile.setPosition(this.x, this.y).setVisible(true);
+
+        this.missile.setRotation(Math.atan2(this.y - this.target.y, this.x - this.target.x) - 3.14 / 2);
+
+        this.scene.tweens.add({
+            targets: this.missile,
+            x: target.x,
+            y: target.y,
+            ease: 'Linear',
+            duration: 200,
+            onComplete: () => this.finishAttack(target)
+        });
+
+        this.scene.time.addEvent({delay: Phaser.Math.Between(1000, 3000), callback: this.reload, callbackScope: this});
+    }
+
+    finishAttack(target) {
         if (target.beAttack(this.damage)) {
             this.setTarget(null);
         }
+        this.missile.setVisible(false);
     }
 
-    beAttack(damage) {
+    reload() {
-        this.shield = this.shield - damage;
+        this.canAttack = true;
-        if (this.shield < 0) {
-            this.life += this.shield;
-            this.shield = 0;
     }
-        if (this.life <= 0) {
+
-            this.life = 0;
+    beAttack(damage) {
+        let diff = this.shield.decrease(damage)
+        if (diff > 0) {
+            console.log("Shield Broken");
+            this.life.decrease(diff);
         }
         return this.die();
     }
 
     isTargetInRange() {
+        if (this.verifyTarget()) {
             let hypot = Math.hypot(this.target.x - this.x, this.target.y - this.y);
             return hypot < this.range;
-
+        }
+        return false;
     }
 
     isAlive() {
-        return this.life > 0;
+        return this.life.value > 0;
     }
 
     die() {
-        if (this.life === 0) {
+        if (this.life.value === 0) {
             this.circle.destroy();
+            this.shield.destroy();
+            this.life.destroy();
             return true;
         }
         return false;
     }
+
+    haveTarget() {
+        return this.target != null;
+    }
 }