|
|
@@ -1,104 +1,184 @@
|
|
|
+var towerA = [],
|
|
|
+ towerB = [],
|
|
|
+ towerC = [];
|
|
|
+var diskQntity = 3,
|
|
|
+ nMoves, nCurrentMoves = 0,
|
|
|
+ minimumMoves = Math.pow(2, diskQntity) - 1;
|
|
|
+var textsFont = { fontFamily: 'Arial', fontSize: 50, color: '#000000' };
|
|
|
+var gameWonMsg, nMoves;
|
|
|
+var redoButton, undoButton, restartButton, diskSelectorButton;
|
|
|
+var scene, tween;
|
|
|
+var wrongMoveSprite;
|
|
|
+class sceneGame extends Phaser.Scene {
|
|
|
+ constructor() {
|
|
|
+ super({ key: 'sceneGame' });
|
|
|
+ }
|
|
|
|
|
|
- var config = {
|
|
|
- type: Phaser.AUTO,
|
|
|
- scale:{
|
|
|
- mode: Phaser.Scale.FIT,
|
|
|
- width: 1320,
|
|
|
- height: 600
|
|
|
- },
|
|
|
- scene: {
|
|
|
- preload: preload,
|
|
|
- create: create,
|
|
|
- update: update
|
|
|
+ preload() {
|
|
|
+ scene = this;
|
|
|
+ this.load.image('sky', 'assets/sky.png');
|
|
|
+ this.load.image('acoesBox', 'assets/acoes.png');
|
|
|
+ //this.load.image('base', 'assets/baseText.png');
|
|
|
+ this.load.image('torre', 'assets/torre.png');
|
|
|
+ this.load.image('selectionArea', 'assets/selectionArea.png');
|
|
|
+ //buttons
|
|
|
+ this.load.image('redo', 'assets/redo2.png');
|
|
|
+ this.load.image('redoDisabled', 'assets/redoDisabled2.png');
|
|
|
+
|
|
|
+
|
|
|
+ this.load.image('undo', 'assets/undo2.png');
|
|
|
+ this.load.image('undoDisabled', 'assets/undoDisabled2.png');
|
|
|
+
|
|
|
+ this.load.image('restart', 'assets/restart.png');
|
|
|
+
|
|
|
+ this.load.image('wrongMove', 'assets/wrongMove.png');
|
|
|
+
|
|
|
+ //Only loads disk selection if its the teacher using
|
|
|
+ try {
|
|
|
+ if (iLMparameters.iLM_PARAM_SendAnswer == 'true')
|
|
|
+ this.load.image('diskSelector', 'assets/diskSelector.png');
|
|
|
+ console.log("iAssign version");
|
|
|
+ } catch (e) {
|
|
|
+ this.load.image('diskSelector', 'assets/diskSelector.png');
|
|
|
+ console.log("web-version");
|
|
|
}
|
|
|
- };
|
|
|
+ //load all imgs needed for the exercise
|
|
|
+ for (var i = 0; i < 6; i++) {
|
|
|
|
|
|
- var game = new Phaser.Game(config);
|
|
|
- var towerA=[], towerB=[], towerC=[];
|
|
|
- var diskQntity=3, nMoves, nCurrentMoves=0;
|
|
|
- var textsFont = { fontFamily: 'Arial', fontSize: 64, color: '#000000' };
|
|
|
- var gameWonMsg;
|
|
|
- var redoButton, undoButton;
|
|
|
+ this.load.image('disk' + i, 'assets/disk' + i + '.png')
|
|
|
+ this.load.image('stroked' + i, 'assets/strokedDisks/stroked' + i + '.png')
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- function preload ()
|
|
|
- {
|
|
|
- this.load.image('sky', 'assets/sky.png');
|
|
|
- //this.load.image('base', 'assets/baseText.png');
|
|
|
- this.load.image('torre','assets/torre.png');
|
|
|
- this.load.image('selectionArea', 'assets/selectionArea.png');
|
|
|
- //buttons
|
|
|
- this.load.image('redo', 'assets/redo.png');
|
|
|
- this.load.image('redoDisabled', 'assets/redoDisabled.png');
|
|
|
+ create() {
|
|
|
+ //misc
|
|
|
+ this.add.image(0, 0, 'sky').setOrigin(0).setDisplaySize(1320, 600);
|
|
|
|
|
|
|
|
|
- this.load.image('undo', 'assets/undo.png');
|
|
|
- this.load.image('undoDisabled', 'assets/undoDisabled.png');
|
|
|
+ this.add.sprite(120, 90, 'acoesBox').setDisplaySize(80, 70);
|
|
|
+ nMoves = this.add.text(90, 70, 0, textsFont);
|
|
|
|
|
|
+ this.add.text(120, 520, 'Torre A', textsFont);
|
|
|
+ this.add.text(555, 520, 'Torre B', textsFont);
|
|
|
+ this.add.text(990, 520, 'Torre C', textsFont);
|
|
|
+ gameWonMsg = this.add.text(300, 150, '', { fontFamily: 'Arial', fontSize: 36, color: '#00ef00', align: 'center' });
|
|
|
|
|
|
- //load all imgs needed for the exercise
|
|
|
- for (var i = 0; i < diskQntity; i++) {
|
|
|
+ //buttons
|
|
|
+ redoButton = this.add.sprite(720, 90, 'redoDisabled').setDisplaySize(80, 70); //.setInteractive({useHandCursor: false});
|
|
|
+ redoButton.on('pointerdown', function(pointer) {
|
|
|
+ redoMove();
|
|
|
+ });
|
|
|
+ undoButton = this.add.sprite(600, 90, 'undoDisabled').setDisplaySize(80, 70); //.setInteractive({useHandCursor: false});
|
|
|
+ undoButton.on('pointerdown', function(pointer) {
|
|
|
+ undoMove();
|
|
|
+ });
|
|
|
|
|
|
- this.load.image('disk'+i, 'assets/disk'+i+'.png')
|
|
|
- this.load.image('stroked'+i, 'assets/strokedDisks/stroked'+i+'.png')
|
|
|
- }
|
|
|
- }
|
|
|
+ restartButton = this.add.sprite(990, 90, 'restart').setDisplaySize(80, 60).setInteractive({ useHandCursor: true });
|
|
|
+ restartButton.on('pointerdown', function(pointer) {
|
|
|
+ restart();
|
|
|
+ });
|
|
|
+
|
|
|
+ diskSelectorButton = this.add.sprite(1200, 90, 'diskSelector').setDisplaySize(80, 70).setInteractive({ useHandCursor: true });
|
|
|
+ diskSelectorButton.on('pointerdown', function(pointer) {
|
|
|
+ this.scene.start('sceneDiskSelection');
|
|
|
+ }, this);
|
|
|
+
|
|
|
+
|
|
|
+ //Towers
|
|
|
+ this.add.image(220, 320, 'torre').setScale(0.13);
|
|
|
+ this.add.image(655, 320, 'torre').setScale(0.13);
|
|
|
+ this.add.image(1090, 320, 'torre').setScale(0.13);
|
|
|
+
|
|
|
+ //Disks
|
|
|
+ var diskX = 220,
|
|
|
+ diskY = 430;
|
|
|
+ for (var i = diskQntity - 1; i >= 0; i--) {
|
|
|
+ towerA[diskQntity - 1 - i] = this.add.sprite(diskX, diskY, 'disk' + i).setScale(0.13); //.setDisplaySize(diskWidth, diskHeight);
|
|
|
+ diskY -= 28;
|
|
|
+ }
|
|
|
+
|
|
|
+ //towerA Selection Area
|
|
|
+ var towerASelectionArea = this.add.sprite(220, 375, 'selectionArea').setDisplaySize(400, 320).setInteractive({ useHandCursor: true });
|
|
|
+ towerASelectionArea.on('pointerdown', function(pointer) {
|
|
|
+ selectA();
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ //towerB selectionArea
|
|
|
+ var towerBSelectionArea = this.add.sprite(655, 375, 'selectionArea').setDisplaySize(400, 320).setInteractive({ useHandCursor: true });
|
|
|
+ towerBSelectionArea.on('pointerdown', function(pointer) {
|
|
|
+ selectB();
|
|
|
+ });
|
|
|
|
|
|
- function create ()
|
|
|
- {
|
|
|
- this.add.image(0,0,'sky').setOrigin(0).setDisplaySize(1320,600);
|
|
|
- //Texts
|
|
|
- this.add.text(20,20,'Movimentos:' ,textsFont);
|
|
|
- nMoves = this.add.text(390,20,0 ,textsFont);
|
|
|
- this.add.text(120,520,'Torre A' ,textsFont);
|
|
|
- this.add.text(555,520,'Torre B' ,textsFont);
|
|
|
- this.add.text(990,520,'Torre C' ,textsFont);
|
|
|
- gameWonMsg = this.add.text(20,150,'',{ fontFamily: 'Arial', fontSize: 64, color:'#00ef00' });
|
|
|
-
|
|
|
- //buttons
|
|
|
- redoButton = this.add.sprite(695, 100, 'redoDisabled').setDisplaySize(60,60)//.setInteractive({useHandCursor: false});
|
|
|
- redoButton.on('pointerdown', function(pointer){
|
|
|
- redoMove();
|
|
|
+ var towerCSelectionArea = this.add.sprite(1090, 375, 'selectionArea').setDisplaySize(400, 320).setInteractive({ useHandCursor: true });
|
|
|
+ towerCSelectionArea.on('pointerdown', function(pointer) {
|
|
|
+ selectC();
|
|
|
});
|
|
|
- undoButton = this.add.sprite(625, 100, 'undoDisabled').setDisplaySize(60,60)//.setInteractive({useHandCursor: false});
|
|
|
- undoButton.on('pointerdown', function(pointer){
|
|
|
- undoMove();
|
|
|
- });
|
|
|
- //Towers
|
|
|
- this.add.image(220,320,'torre').setScale(0.13);
|
|
|
- this.add.image(655,320,'torre').setScale(0.13);
|
|
|
- this.add.image(1090,320,'torre').setScale(0.13);
|
|
|
-
|
|
|
- //Disks
|
|
|
- var diskX=220, diskY=430;
|
|
|
- for (var i = diskQntity-1; i >=0; i--) {
|
|
|
- towerA[diskQntity-1-i]= this.add.sprite(diskX,diskY,'disk'+i).setScale(0.13);//.setDisplaySize(diskWidth, diskHeight);
|
|
|
- diskY -= 28;
|
|
|
- }
|
|
|
-
|
|
|
- //towerA Selection Area
|
|
|
- var towerASelectionArea = this.add.sprite(220, 375, 'selectionArea').setDisplaySize(400,320).setInteractive({useHandCursor: true});
|
|
|
- towerASelectionArea.on('pointerdown', function (pointer) {
|
|
|
- selectA();
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- //towerB selectionArea
|
|
|
- var towerBSelectionArea = this.add.sprite(655, 375, 'selectionArea').setDisplaySize(400,320).setInteractive({useHandCursor: true});
|
|
|
- towerBSelectionArea.on('pointerdown', function (pointer) {
|
|
|
- selectB();
|
|
|
- });
|
|
|
-
|
|
|
- var towerCSelectionArea = this.add.sprite(1090, 375, 'selectionArea').setDisplaySize(400,320).setInteractive({useHandCursor: true});
|
|
|
- towerCSelectionArea.on('pointerdown', function (pointer) {
|
|
|
- selectC();
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function update ()
|
|
|
- {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ wrongMoveSprite = this.add.sprite(220, 300, 'wrongMove').setDisplaySize(100, 100).setAlpha(0);
|
|
|
}
|
|
|
- function event() {
|
|
|
+
|
|
|
+ update() {}
|
|
|
+ event() {
|
|
|
console.log('over');
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class sceneDiskSelection extends Phaser.Scene {
|
|
|
+ constructor() {
|
|
|
+ super({ key: 'sceneDiskSelection' });
|
|
|
+ }
|
|
|
+
|
|
|
+ preload() {
|
|
|
+ this.load.image('sixDisks', 'assets/diskSelection/sixDisks.png');
|
|
|
+ this.load.image('fiveDisks', 'assets/diskSelection/fiveDisks.png');
|
|
|
+ this.load.image('fourDisks', 'assets/diskSelection/fourDisks.png');
|
|
|
+ this.load.image('threeDisks', 'assets/diskSelection/threeDisks.png');
|
|
|
+ this.load.image('twoDisks', 'assets/diskSelection/twoDisks.png');
|
|
|
+ }
|
|
|
+
|
|
|
+ create() {
|
|
|
+ this.add.image(0, 0, 'sky').setOrigin(0).setDisplaySize(1320, 600);
|
|
|
+
|
|
|
+ var sixDisksButton = this.add.sprite(850, 450, 'sixDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
|
|
|
+ sixDisksButton.on('pointerdown', function(pointer) {
|
|
|
+ selectDisks(6, this);
|
|
|
+ }, this);
|
|
|
+
|
|
|
+ var fiveDisksButton = this.add.sprite(450, 450, 'fiveDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
|
|
|
+ fiveDisksButton.on('pointerdown', function(pointer) {
|
|
|
+ selectDisks(5, this);
|
|
|
+ }, this);
|
|
|
+
|
|
|
+ var fourDisksButton = this.add.sprite(1050, 200, 'fourDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
|
|
|
+ fourDisksButton.on('pointerdown', function(pointer) {
|
|
|
+ selectDisks(4, this);
|
|
|
+ }, this);
|
|
|
+
|
|
|
+ var threeDisksButton = this.add.sprite(650, 200, 'threeDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
|
|
|
+ threeDisksButton.on('pointerdown', function(pointer) {
|
|
|
+ selectDisks(3, this);
|
|
|
+ }, this);
|
|
|
+
|
|
|
+ var twoDisksButton = this.add.sprite(250, 200, 'twoDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
|
|
|
+ twoDisksButton.on('pointerdown', function(pointer) {
|
|
|
+ selectDisks(2, this);
|
|
|
+ }, this);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+var config = {
|
|
|
+ type: Phaser.AUTO,
|
|
|
+ scale: {
|
|
|
+ mode: Phaser.Scale.FIT,
|
|
|
+ width: 1320,
|
|
|
+ height: 600
|
|
|
+ },
|
|
|
+ scene: [sceneGame, sceneDiskSelection]
|
|
|
+ // canvas: doocument.querySelector('mainDiv');
|
|
|
+};
|
|
|
+
|
|
|
+var game = new Phaser.Game(config);
|
Bernardo
