Création d'un écran de chargement au lancement du jeu dans le but d'avoir un aperçu du temps d'attente(le temps que les images soient téléchargées) - Création des rectangles de mouvements (bleu) et d'attaque (rouge), modifier leur ordre modifie les actions du robot bleu, création des lignes qui les relient avec waria.

Code/public/js/app.min.js

@@ -1 +1 @@
-const WIDTH_WINDOW=$(document).width()-30,HEIGHT_WINDOW=$(document).height()-30,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 COLOR_ATTACK=16711680,COLOR_MOVE=255,WIDTH_WINDOW=$(document).width()-30,HEIGHT_WINDOW=$(document).height()-30,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,8 @@ EnemyBots.push(new Robot(1, 1));
 console.log(myself.height);
 */
 
+const COLOR_ATTACK = 0xff0000;
+const COLOR_MOVE = 0x0000ff;
 const WIDTH_WINDOW = $(document).width() - 30;
 const HEIGHT_WINDOW = $(document).height() - 30;
 const WIDTH_MAP = WIDTH_WINDOW < HEIGHT_WINDOW ? WIDTH_WINDOW * 0.8 : HEIGHT_WINDOW * 0.8;

Code/src/js/classes/AttackRectangle.js

@@ -0,0 +1,28 @@
+class AttackRectangle extends Attack {
+    constructor(x, y, width, height, scene) {
+        super();
+        this.color = COLOR_ATTACK;
+        this.rect = new Phaser.GameObjects.Rectangle(scene, x, y, width, height, this.color);
+        this.line = scene.add.graphics();
+    }
+
+    getX() {
+        return this.rect.x;
+    }
+
+    addLine(x, y) {
+        this.xOrigin = x;
+        this.yOrigin = y;
+        this.updateLine();
+    }
+
+    updateLine() {
+        if (this.xLine !== this.rect.x || this.yLine !== this.rect.y) {
+            this.xLine = this.rect.x;
+            this.yLine = this.rect.y;
+            this.line.clear();
+            this.line.lineStyle(10, 0xffffff, 1);
+            this.line.lineBetween(this.xOrigin, this.yOrigin, this.rect.x, this.rect.y);
+        }
+    }
+}

Code/src/js/classes/Boot.js

@@ -4,6 +4,26 @@ class Boot extends Phaser.Scene {
     }
 
     preload() {
+        let progressBar = this.add.graphics();
+        let progressBox = this.add.graphics();
+        let width = 320;
+        let height = 50;
+        let x = WIDTH_WINDOW / 2 - width / 2;
+        let y = HEIGHT_WINDOW / 2 - height / 2;
+
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(x, y, 320, height);
+        this.load.on('progress', function (value) {
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(x + 10, y + 10, (width - 20) * value, height - 20);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+        });
+
+
         this.load.spritesheet('btn_play', 'assets/btnPlay.png', {frameWidth: 650, frameHeight: 170});
         this.load.spritesheet('btn_duel', 'assets/btnDuel.png', {frameWidth: 269, frameHeight: 262});
         this.load.spritesheet('btn_last', 'assets/btnLast.png', {frameWidth: 269, frameHeight: 262});
@@ -11,7 +31,8 @@ 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');
+        this.load.image('bullet', 'assets/bullet.png');
+        this.load.image('logoWaria', 'assets/logoWaria.png');
     }
 
     create() {

Code/src/js/classes/Game.js

@@ -19,28 +19,34 @@ class Game extends Phaser.Scene {
         btn.on('pointerdown', () => this.clickPlay(btn));
         this.scene.launch('GamingBoard');
         this.scene.pause('GamingBoard');
-        let rect = this.add.rectangle(WIDTH_WINDOW / 2, 500, 100, 100, 0xffffff);
-        rect.setInteractive();
-        this.input.setDraggable(rect);
+        this.tree = new Tree(WIDTH_WINDOW / 1.5, 100, this);
+        this.tree.addNode(new MoveRectangle(true, WIDTH_WINDOW/1.2, 400, 100, 100, this))
+        this.tree.addNode(new AttackRectangle(WIDTH_WINDOW/1.5, 400, 100, 100, this));
         this.input.on('drag', this.doDrag);
     }
 
-    startDrag(pointer, targets) {
-        this.input.off('pointerdown', this.startDrag, this);
-        this.dragObj = targets[0];
-        this.input.on('pointermove', this.doDrag, this);
-        this.input.on('pointerup', this.stopDrag, this);
+    update(time, delta) {
+        super.update(time, delta);
+        this.tree.updateLines();
     }
 
     doDrag(pointer, target, dragX, dragY) {
-        target.x = dragX;
-        target.y = dragY;
+        target.setX(dragX);
+        target.setY(dragY);
     }
 
     clickPlay(btn) {
+        btn.setFrame(2);
         if (this.scene.isPaused('GamingBoard'))
-            this.scene.resume('GamingBoard');
+            this.resume();
         else
             this.scene.pause('GamingBoard');
     }
+
+    resume() {
+        const sortDesc = (a, b) => a.getX() - b.getX();
+        this.tree.lNode.sort(sortDesc);
+        this.gm.modifyNodes(this.tree.lNode);
+        this.scene.resume('GamingBoard');
+    }
 }

Code/src/js/classes/GamingBoard.js

@@ -44,7 +44,11 @@ class GamingBoard extends Phaser.Scene {
     }
 
     resume() {
-        //this.myself2.updateTarget();
+    }
+
+    modifyNodes(lNodes) {
+        this.listRobot[0].cleanNodes();
+        lNodes.forEach(element => this.listRobot[0].addNode(element));
     }
 
     chooseTarget(robot) {

Code/src/js/classes/MoveRectangle.js

@@ -0,0 +1,28 @@
+class MoveRectangle extends Move {
+    constructor(toward, x, y, width, height, scene) {
+        super(toward);
+        this.color = COLOR_MOVE;
+        this.rect = new Phaser.GameObjects.Rectangle(scene, x, y, width, height, this.color);
+        this.line = scene.add.graphics();
+    }
+
+    getX() {
+        return this.rect.x;
+    }
+
+    addLine(x, y) {
+        this.xOrigin = x;
+        this.yOrigin = y;
+        this.updateLine();
+    }
+
+    updateLine() {
+        if (this.xLine !== this.rect.x || this.yLine !== this.rect.y) {
+            this.xLine = this.rect.x;
+            this.yLine = this.rect.y;
+            this.line.clear();
+            this.line.lineStyle(10, 0xffffff, 1);
+            this.line.lineBetween(this.xOrigin, this.yOrigin, this.rect.x, this.rect.y);
+        }
+    }
+}

Code/src/js/classes/Robot.js

@@ -198,4 +198,8 @@ class Robot {
     addNode(node) {
         this.lNode.push(node);
     }
+
+    cleanNodes() {
+        this.lNode = [];
+    }
 }

Code/src/js/classes/Tree.js

@@ -0,0 +1,21 @@
+class Tree {
+    constructor(x, y, scene) {
+        this.lNode = [];
+        this.scene = scene;
+        this.head = this.scene.add.image(x, y, 'logoWaria').setOrigin(0.5, 0.5);
+        this.head.displayHeight = HEIGHT_WINDOW / 4;
+        this.head.scaleX = this.head.scaleY;
+    }
+
+    addNode(node) {
+        this.lNode.push(node);
+        node.addLine(this.head.x, this.head.y + this.head.displayHeight / 2.2);
+        let rect = this.scene.add.existing(node.rect);
+        rect.setInteractive();
+        this.scene.input.setDraggable(rect);
+    }
+
+    updateLines() {
+        this.lNode.forEach(node => node.updateLine());
+    }
+}