Les points de boucliers se régénèrent en fonction du temps (5 pas seconde) - Affichage d'un cercle pour afficher la distance de tir du cercle bleu - Création des différentes scène qui gereront par la suite la création propre à chaque action (attaquer, déplacement, condition). Pour le moment, il y a beaucoup de code en double entre ces scènes car elles ont le même principe de fonctionnement. Elles seront par la suite regroupé par un père.

Code/public/js/app.min.js

@@ -1 +1 @@
-const COLOR_ATTACK=16711680,COLOR_MOVE=255,COLOR_CONDITION=921102,WIDTH_WINDOW=$(document).width()-20,HEIGHT_WINDOW=$(document).height()-20,WIDTH_MAP=WIDTH_WINDOW<HEIGHT_WINDOW?.8*WIDTH_WINDOW:.8*HEIGHT_WINDOW,SPEED=2,LIFE=100,DAMAGE=40,SHIELD=100,RANGE=WIDTH_MAP/2;var config={type:Phaser.AUTO,width:WIDTH_WINDOW,height:HEIGHT_WINDOW,parent:"all",backgroundColor:"#35363A"},game=new Phaser.Game(config);game.scene.add("Boot",Boot),game.scene.add("Type",Type),game.scene.add("Game",new Game(game)),game.scene.start("Boot");
+const SHIELD_PER_SECOND=5,COLOR_ATTACK=16711680,COLOR_MOVE=255,COLOR_CONDITION=921102,WIDTH_WINDOW=$(document).width()-20,HEIGHT_WINDOW=$(document).height()-20,WIDTH_MAP=WIDTH_WINDOW<HEIGHT_WINDOW?.8*WIDTH_WINDOW:.8*HEIGHT_WINDOW,SPEED=2,LIFE=100,DAMAGE=40,SHIELD=100,RANGE=WIDTH_MAP/2;var config={type:Phaser.AUTO,width:WIDTH_WINDOW,height:HEIGHT_WINDOW,parent:"all",backgroundColor:"#35363A"},game=new Phaser.Game(config);game.scene.add("Boot",Boot),game.scene.add("Type",Type),game.scene.add("Game",new Game(game)),game.scene.start("Boot");

Code/src/js/Init.js

@@ -4,6 +4,7 @@ EnemyBots.push(new Robot(1, 1));
 console.log(myself.height);
 */
 
+const SHIELD_PER_SECOND = 5;
 const COLOR_ATTACK = 0xff0000;
 const COLOR_MOVE = 0x0000ff;
 const COLOR_CONDITION = 0x0e0e0e;

Code/src/js/classes/AddAttack.js

@@ -0,0 +1,29 @@
+class AddAttack extends Phaser.Scene {
+    constructor(game) {
+        super('addNode');
+        this.game = game;
+    }
+
+    create() {
+        this.add.rectangle(0, 0, WIDTH_WINDOW, HEIGHT_WINDOW, 0x000000).setOrigin(0, 0).setAlpha(0.5);
+        console.log("ATTACK");
+        this.createButton();
+    }
+
+
+
+    createButton() {
+        let x = WIDTH_WINDOW / 2;
+        let y = HEIGHT_WINDOW - 100;
+        this.cancelBtn = this.add.image(x, y, 'cancel').setOrigin(0.5, 0.5).setInteractive();
+        this.cancelBtn.on('pointerover', () => this.cancelBtn.setFrame(1));
+        this.cancelBtn.on('pointerout', () => this.cancelBtn.setFrame(0));
+        this.cancelBtn.on('pointerdown', () => this.cancel());
+    }
+
+    cancel() {
+        this.scene.resume('Game');
+        this.scene.stop('addNode');
+        this.game.scene.remove('addNode');
+    }
+}

Code/src/js/classes/AddCondition.js

@@ -0,0 +1,28 @@
+class AddCondition extends Phaser.Scene {
+    constructor(game) {
+        super('addNode');
+        this.game = game;
+    }
+
+    create() {
+        this.add.rectangle(0, 0, WIDTH_WINDOW, HEIGHT_WINDOW, 0x000000).setOrigin(0, 0).setAlpha(0.5);
+        console.log("CONDITION");
+        this.createButton();
+    }
+
+
+    createButton() {
+        let x = WIDTH_WINDOW / 2;
+        let y = HEIGHT_WINDOW - 100;
+        this.cancelBtn = this.add.image(x, y, 'cancel').setOrigin(0.5, 0.5).setInteractive();
+        this.cancelBtn.on('pointerover', () => this.cancelBtn.setFrame(1));
+        this.cancelBtn.on('pointerout', () => this.cancelBtn.setFrame(0));
+        this.cancelBtn.on('pointerdown', () => this.cancel());
+    }
+
+    cancel() {
+        this.scene.resume('Game');
+        this.scene.stop('addNode');
+        this.game.scene.remove('addNode');
+    }
+}

Code/src/js/classes/AddMove.js

@@ -0,0 +1,29 @@
+class AddMove extends Phaser.Scene {
+    constructor(game) {
+        super('addNode');
+        this.game = game;
+    }
+
+    create() {
+        this.add.rectangle(0, 0, WIDTH_WINDOW, HEIGHT_WINDOW, 0x000000).setOrigin(0, 0).setAlpha(0.5);
+        console.log("MOVE");
+        this.createButton();
+    }
+
+
+
+    createButton() {
+        let x = WIDTH_WINDOW / 2;
+        let y = HEIGHT_WINDOW - 100;
+        this.cancelBtn = this.add.image(x, y, 'cancel').setOrigin(0.5, 0.5).setInteractive();
+        this.cancelBtn.on('pointerover', () => this.cancelBtn.setFrame(1));
+        this.cancelBtn.on('pointerout', () => this.cancelBtn.setFrame(0));
+        this.cancelBtn.on('pointerdown', () => this.cancel());
+    }
+
+    cancel() {
+        this.scene.resume('Game');
+        this.scene.stop('addNode');
+        this.game.scene.remove('addNode');
+    }
+}

Code/src/js/classes/Game.js

@@ -8,7 +8,7 @@ class Game extends Phaser.Scene {
         this.gm = new GamingBoard();
         this.game.scene.add('GamingBoard', this.gm);
 
-        this.game.scene.add('PlusNode', new PlusNode());
+        this.game.scene.add('PlusNode', new PlusNode(this.game));
     }
 
     create() {

Code/src/js/classes/GamingBoard.js

@@ -15,7 +15,11 @@ class GamingBoard extends Phaser.Scene {
             this.chooseTarget(this.listRobot[i]);
         }
 
+        this.listRobot[0].drawRange();
+
         this.events.on('resume', () => this.resume());
+
+        this.time.addEvent({delay: 2000, callback: this.upShield, callbackScope: this});
     }
 
     update(time, delta) {
@@ -42,7 +46,7 @@ class GamingBoard extends Phaser.Scene {
     resume() {
     }
 
-    addRobot(robot){
+    addRobot(robot) {
         this.listRobot.push(robot);
     }
 
@@ -74,4 +78,9 @@ class GamingBoard extends Phaser.Scene {
     }
 
 
+    upShield() {
+        this.listRobot.forEach(robot => robot.addShield(SHIELD_PER_SECOND));
+        this.time.addEvent({delay: 1000, callback: this.upShield, callbackScope: this});
+    }
+
 }

Code/src/js/classes/HealthBar.js

@@ -29,6 +29,14 @@ class HealthBar {
         return diff;
     }
 
+    increase(amount) {
+        this.value += amount;
+        if (this.value > this.valueMax) {
+            this.value = this.valueMax;
+        }
+        this.draw();
+    }
+
     setX(x) {
         this.bar.setX(x - this.width / 2);
     }
@@ -51,7 +59,7 @@ class HealthBar {
 
         let percent = this.value / this.valueMax;
 
-        if (percent < 0.3) {
+        if (percent < 1 / 3) {
             this.bar.fillStyle(0xff0000);
         } else {
             this.bar.fillStyle(this.color);

Code/src/js/classes/PlusNode.js

@@ -1,6 +1,7 @@
 class PlusNode extends Phaser.Scene {
-    constructor() {
+    constructor(game) {
         super('PlusNode');
+        this.game = game;
     }
 
     create() {
@@ -36,16 +37,17 @@ class PlusNode extends Phaser.Scene {
     click(action) {
         switch (action.toString()) {
             case 'attack':
-
+                this.game.scene.add('addNode', new AddAttack(this.game))
                 break;
             case 'move':
-
+                this.game.scene.add('addNode', new AddMove(this.game))
                 break;
-
             case 'condition':
-
+                this.game.scene.add('addNode', new AddCondition(this.game))
                 break;
         }
+        this.scene.launch('addNode');
+        this.scene.stop('PlusNode');
         console.log(action.toString());
     }
 

Code/src/js/classes/Robot.js

@@ -10,6 +10,7 @@ class Robot {
         this.damage = DAMAGE;
         this.life = new HealthBar(scene, this.width * 2, this.width / 3, this.x, this.y - this.width, LIFE, 0x008000);
         this.shield = new HealthBar(scene, this.width * 2, this.width / 3, this.x, this.y - this.width * 1.5, SHIELD, 0x0000FF);
+        this.circleRange = null;
 
         this.canAttack = true;
         this.missile = new Missile(scene, 'bullet', this.width / 5, this.width / 4);
@@ -31,11 +32,16 @@ class Robot {
         this.circle = this.scene.add.circle(this.x, this.y, this.width / 2, this.color);
     }
 
+    addShield(shield) {
+        this.shield.increase(shield);
+    }
+
     setX(x) {
         this.x = x;
         this.circle.setX(this.x);
         this.life.setX(this.x);
         this.shield.setX(this.x);
+        this.drawCircleRange();
     }
 
     setY(y) {
@@ -43,6 +49,7 @@ class Robot {
         this.life.setY(this.y - this.width);
         this.shield.setY(this.y - this.width * 1.5);
         this.circle.setY(this.y);
+        this.drawCircleRange();
     }
 
     setTarget(target) {
@@ -200,6 +207,27 @@ class Robot {
         this.lNode.push(node);
     }
 
+    drawRange() {
+        this.circleRange = this.scene.add.graphics();
+
+        this.drawCircleRange();
+    }
+
+    drawCircleRange() {
+        if (this.circleRange !== null) {
+            this.circleRange.clear();
+            let color = 0xffff00;
+            let thickness = 4;
+            let alpha = 1;
+
+            this.circleRange.lineStyle(thickness, color, alpha);
+            let a = new Phaser.Geom.Point(this.x, this.y);
+            let radius = this.range;
+
+            this.circleRange.strokeCircle(a.x, a.y, radius);
+        }
+    }
+
     cleanNodes() {
         this.lNode = [];
     }