Home Explore Help
Sign In
bernardo
/
iHanoi
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Updated web version with phaser framework

bernardo 6 years ago
parent
925be907c6
commit
d964ab6100
27 changed files with 287 additions and 440 deletions
Unified View Show Diff Stats
  1. BIN
      assets/disk0.png
  2. BIN
      assets/disk1.png
  3. BIN
      assets/disk2.png
  4. BIN
      assets/disk3.png
  5. BIN
      assets/disk4.png
  6. BIN
      assets/disk5.png
  7. BIN
      assets/redo.png
  8. BIN
      assets/redoDisabled.png
  9. BIN
      assets/selectionArea.png
  10. BIN
      assets/sky.png
  11. BIN
      assets/strokedDisks/stroked0.png
  12. BIN
      assets/strokedDisks/stroked1.png
  13. BIN
      assets/strokedDisks/stroked2.png
  14. BIN
      assets/strokedDisks/stroked3.png
  15. BIN
      assets/strokedDisks/stroked4.png
  16. BIN
      assets/strokedDisks/stroked5.png
  17. BIN
      assets/torre.png
  18. BIN
      assets/undo.png
  19. BIN
      assets/undoDisabled.png
  20. 0 104
      iHanoi.html
  21. BIN
      imgs/wood1.jpeg
  22. 19 0
      index.html
  23. 164 195
      js/iHanoiFunctions.js
  24. 0 117
      js/integration-functions.js
  25. 0 2
      js/jquery-3.3.1.min.js
  26. 104 0
      js/phaserConfig.js
  27. 0 22
      js/start.js

BIN
assets/disk0.png
View File


BIN
assets/disk1.png
View File


BIN
assets/disk2.png
View File


BIN
assets/disk3.png
View File


BIN
assets/disk4.png
View File


BIN
assets/disk5.png
View File


BIN
assets/redo.png
View File


BIN
assets/redoDisabled.png
View File


BIN
assets/selectionArea.png
View File


BIN
assets/sky.png
View File


BIN
assets/strokedDisks/stroked0.png
View File


BIN
assets/strokedDisks/stroked1.png
View File


BIN
assets/strokedDisks/stroked2.png
View File


BIN
assets/strokedDisks/stroked3.png
View File


BIN
assets/strokedDisks/stroked4.png
View File


BIN
assets/strokedDisks/stroked5.png
View File


BIN
assets/torre.png
View File


BIN
assets/undo.png
View File


BIN
assets/undoDisabled.png
View File


+ 0 - 104
iHanoi.html
View File 

@@ -1,104 +0,0 @@
 
-<!DOCTYPE html>
 
-<meta charset="UTF-8">
 
-<html>
 
-	<head>
 
-		<title> Torre de Hanoi </title>
 
-		<Style>
 
-			#planoDeFundo {
 
-				background :transparent;
 
-				width: 90%; 
-				height: 75%;
 
-				position: absolute;
 
-			}
 
-			#restart_button{
 
-				position:absolute;
 
-				border:1px solid gray;
 
-				border-radius: 7%;
 
-				font-size: 0.875;
 
-				word-wrap: break-word;
 
-				max-width: 7%;
 
-				left: 21%;
 
-				top: 5%;
 
-			}
 
-			#A_button{
 
-				position:absolute;
 
-				border:1px solid gray;
 
-				border-radius: 7%;
 
-				font-size: 1;
 
-				height: 4.5%;
 
-				width: 20%;
 
-				left: 5.4%;
 
-				top: 77%;
 
-			}
 
-			#B_button{
 
-				position:absolute;
 
-				border:1px solid gray;
 
-				border-radius: 7%;
 
-				font-size: 1;
 
-				height: 5%;
 
-				word-wrap: break-word;
 
-				width: 20%;
 
-				left: 35.5%;
 
-				top: 77%;
 
-			}
 
-			#C_button{
 
-				position:absolute;
 
-				border:1px solid gray;
 
-				border-radius: 7%;
 
-				font-size: 1;
 
-				height: 5%;
 
-				width: 20%;
 
-				left: 66%;
 
-				top: 77%;
 
-			}
 
-
 
-			#Undo_button{
 
-				position:absolute;
 
-				border:1px solid gray;
 
-				border-radius: 7%;
 
-				font-size: 1;
 
-				height:5%;
 
-				width: 20%;
 
-				left: 20%;
 
-				top: 83%;
 
-			}
 
-			#Redo_button{
 
-				position:absolute;
 
-				border:1px solid gray;
 
-				border-radius: 7%;
 
-				font-size: 1;
 
-				height: 5%;
 
-				word-wrap: break-word;
 
-				width: 20%;
 
-				left: 51%;
 
-				top: 83%;
 
-			}
 
-		</Style>
 
-		<script src="js/jquery-3.3.1.min.js"></script>
 
-		<script src="js/integration-functions.js"></script>
 
-	</head>
 
-	<body>
 
-	<div class="task"  style="display:none">
 
-		<button id="A_button" onclick="buttonClick(0)">A</button>
 
-		<button id="B_button" onclick="buttonClick(1)">B</button>
 
-		<button id="C_button" onclick="buttonClick(2)">C</button>
 
-		<button id="Undo_button" onclick="undo()">Undo</button>
 
-		<button id="Redo_button" onclick="redo()">Redo</button>
 
-		<canvas id="planoDeFundo"  width="1024" height="615">
 
-		Seu navegador não suporta o recurso Canvas. Atualize-o para utilizar esse recurso
 
-		</canvas>
 
-		<script src= "js/start.js"></script>
 
-		<script src="js/iHanoiFunctions.js"></script>
 
-	</div>
 
-	<div class="creation" style="display:none">
 
-		Quantidade de discos no desafio: 
-		<select name="Discos" class="cDiscos">
 
-			<option>2</option>
 
-			<option>3</option>
 
-			<option>4</option>
 
-			<option>5</option>
 
-			<option>6</option>
 
-		</select>
 
-	</div>
 
-  </body>
 
-</html>

BIN
imgs/wood1.jpeg
View File


+ 19 - 0
index.html
View File 

@@ -0,0 +1,19 @@
 
+<!doctype html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8" />
 
+    <title>iHanoi</title>
 
+    <script src="http://cdn.jsdelivr.net/npm/phaser@3.16.2/dist/phaser.js"></script>
 
+    <style type="text/css">
 
+        body {
 
+            margin: 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+  <script src="js/iHanoiFunctions.js"></script>
 
+  <script src="js/phaserConfig.js"></script>
 
+
 
+</body>
 
+</html>

+ 164 - 195
js/iHanoiFunctions.js
View File 

@@ -1,104 +1,22 @@
 
-function inicio (QntityDisks){
 
-	nDisks=QntityDisks;
 
-	optimalSolution= Math.pow(2,QntityDisks)-1;
 
-	var x = 0;
 
-	var y = 549.5;
 
-	var w = 330;
 
-	startOfMove=Date.now();
 
-	for (var i = 0; i < QntityDisks; i++) {
 
-		var disk = new Disk(x,y,w,40,colors[i]);
 
-		towerA.push(disk);
 
-		x+=20;  //moves to the right
 
-		y-=41; //moves up, +1 to separate disks
 
-		w-=40; //reduces disk width
 
-	}
 
-	drawScene();
 
-
 
-}
 
-
 
-class Disk{
 
-	constructor(x,y,w,h,fill){
 
-		this.x=x;
 
-		this.y=y;
 
-		this.w=w;
 
-		this.h=h;
 
-		this.fill=fill;
 
-	}
 
-	draw(){//(ctx, x, y, width, height, radius, fill, stroke)
 
-		context.fillStyle = this.fill;
 
-		context.strokeStyle = "black";
 
-		roundRect(context, this.x, this.y, this.w, this.h, 20, 20, true);
 
-	}
 
-	clear(){
 
-		context.clearRect(this.x, this.y, this.w, this.h);
 
-	}
 
-}
 
-function reinicio (){
 
-	towerA.splice(0,towerA.length);
 
-	towerB.splice(0,towerB.length);
 
-	towerC.splice(0,towerC.length);
 
-	moves.splice(0,moves.length);
 
-	nMovements=0;
 
-	idF = " ";
 
-	idT=" ";
 
-	toMove=null;
 
-	inicio(nDisks);
 
-}
 
-function drawTowers (){
 
-	context.beginPath();
 
-	context.fillStyle = pat;
 
-	<!-- torre 1 -->
 
-    roundRect(context, 160, 260, 20, 340, 5, pat, false);//ctx, x, y, largura, altura, radius, fill, stroke(T/F)
 
-
 
-    <!--Base t1-->
 
-	roundRect(context, 0, 590, 330, 20, 5, pat, false);
 
-
 
-	<!-- torre 2 -->
 
-	roundRect(context, 505, 260, 20, 340, 5, pat, false);
 
-
 
-    <!--Base t2-->
 
-	roundRect(context, 345, 590, 330, 20, 5, pat, false);
 
-
 
-	<!-- torre 3 -->
 
-	roundRect(context, 850, 260, 20, 340, 5, pat, false);
 
-
 
-    <!--Base t3-->
 
-	roundRect(context, 690, 590, 330, 20, 5, pat, false);
 
-}
 
-
 
-function drawDisks (){
 
-	for(i=0; i<towerA.length; i++){
 
-		towerA[i].draw();
 
-	}
 
-	for(i=0; i<towerB.length; i++){
 
-		towerB[i].draw();
 
-	}
 
-	for(i=0; i<towerC.length; i++){
 
-		towerC[i].draw();
 
-	}
 
-}
 
-
 
-function drawScene (){
 
-	context.clearRect(0, 0, canvas.width, canvas.height);
 
-	drawTowers();
 
-	drawDisks();
 
-	drawFromTo();
 
-}
 
-
 
-function buttonClick (id){
 
-	if(toMove == null && getTower(id).length>0){
 
-		toMove = id;
 
-		idF= String.fromCharCode(65+id);
 
-		idT= " ";
 
-		drawScene();
 
-
 
-	} else if(toMove != null && toMove != id){
 
-		idT = String.fromCharCode(65+id);
 
-		moveDisk(toMove, id);
 
-		toMove=null;
 
-	}
 
-}
 
-
 
+var isMoving = false, diskOrigin, diskDestiny, movements;
 
+var nWrongMoves = 0;
 
+var moves = [], totalMoves = []; //vector to save movements
 
+var acertou=0;
 
+var optimalSolution;
 
+var redo = false, undo = false;
 
+var textDict = {disk0: "stroked0",
 
+								disk1: "stroked1",
 
+								disk2: "stroked2",
 
+								disk3: "stroked3",
 
+								disk4: "stroked4",
 
+								disk5: "stroked5",
 
+								stroked0: "disk0",
 
+								stroked1: "disk1",
 
+								stroked2: "disk2",
 
+								stroked3: "disk3",
 
+								stroked4: "disk4",
 
+								stroked5: "disk5"}
 
+//To know which tower was selected
 
 function getTower (id){
 
 function getTower (id){
 
 	switch(id){
 
 	switch(id){
 
 		case 0:
 
 		case 0:
 
@@ -110,112 +28,163 @@ function getTower (id){
 
 	}
 
 	}
 
 }
 
 }
 
 
 
-function drawFromTo (){
 
-	context.font = "50px Arial";
 
-	context.fillStyle = "black";
 
-	context.fillText("Move from "+idF+" to "+idT, 50, 50);
 
-	context.fillText("Movements: "+nTotalMovements, 50, 100);
 
+function selectA (){
 
+  if (!isMoving){
 
+    if(towerA.length>0){
 
+      diskOrigin = 0;
 
+      isMoving = true;
 
+      towerA[towerA.length-1].setTexture(textDict[towerA[towerA.length-1].texture.key]);
 
+    }
 
+  } else{
 
+    if(diskOrigin!=0){
 
+      moveFromTo(diskOrigin, 0);
 
+    } else{
 
+      towerA[towerA.length-1].setTexture(textDict[towerA[towerA.length-1].texture.key]);
 
+      isMoving=false;
 
+			nMoves.text++;
 
+    }
 
+  }
 
 }
 
 }
 
 
 
-
 
-function moveDisk (origin, destiny){
 
-	var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
 
-	moveTime = Math.floor( (Date.now()- startOfMove) /1000);
 
-	startOfMove = Date.now();//update start of movement
 
-	if(nMovements< moves.length){
 
-		moves.splice(nMovements, moves.length- nMovements);
 
-	}
 
-	moves.push(origin+"  "+destiny);
 
-	
-	//console.log(moves);
 
-	nMovements++;
 
-	finishMove(origin, destiny);
 
-	if(towerC.length == nDisks && nDisks!=0){
 
-		acertou=1;
 
-		totalTime= Date.now() - start;
 
-		if(nTotalMovements==optimalSolution){
 
-			alert("You Won in the least amount of movements!!!\nCongratulations!!!");
 
-		}else{
 
-			alert("You Won!!!\nCongratulations!!");
 
-		}
 
-	}
 
+function selectB (){
 
+  if (!isMoving){
 
+    if(towerB.length>0){
 
+      diskOrigin = 1;
 
+      isMoving = true;
 
+      towerB[towerB.length-1].setTexture(textDict[towerB[towerB.length-1].texture.key]);
 
+    }
 
+  } else{
 
+    if(diskOrigin!=1){
 
+      moveFromTo(diskOrigin, 1);
 
+    } else{
 
+      towerB[towerB.length-1].setTexture(textDict[towerB[towerB.length-1].texture.key]);
 
+      isMoving=false;
 
+			nMoves.text++;
 
+    }
 
+  }
 
 }
 
 }
 
 
 
-function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
 
-  if (typeof stroke == "undefined" ) {
 
-    stroke = true;
 
-  }
 
-  if (typeof radius === "undefined") {
 
-    radius = 5;
 
+function selectC (){
 
+  if (!isMoving){
 
+    if(towerC.length>0){
 
+      diskOrigin = 2;
 
+      isMoving = true;
 
+      towerC[towerC.length-1].setTexture(textDict[towerC[towerC.length-1].texture.key]); //levantar o disco
 
+    }
 
+  } else{
 
+    if(diskOrigin!=2){
 
+      moveFromTo(diskOrigin, 2);
 
+    } else{
 
+      towerC[towerC.length-1].setTexture(textDict[towerC[towerC.length-1].texture.key]);
 
+      isMoving=false;
 
+			nMoves.text++;
 
+    }
 
   }
 
   }
 
-  ctx.beginPath();
 
-  ctx.moveTo(x + radius, y);
 
-  ctx.lineTo(x + width - radius, y);
 
-  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
 
-  ctx.lineTo(x + width, y + height - radius);
 
-  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
 
-  ctx.lineTo(x + radius, y + height);
 
-  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
 
-  ctx.lineTo(x, y + radius);
 
-  ctx.quadraticCurveTo(x, y, x + radius, y);
 
-  ctx.closePath();
 
-  if (stroke) {
 
-    ctx.stroke();
 
-  }
 
-  if (fill) {
 
-    ctx.fill();
 
-  }        
 }
 
 }
 
 
 
-function undo(){
 
-	if(nMovements>0){
 
-		var res = moves[nMovements-1].split("  ");
 
-		nMovements--;
 
-		if (nMovements>1){
 
-			var res2 = moves[nMovements-2].split("  ");
 
-			idf = res2[0];
 
-			idt = res2[1];
 
-		} else{
 
-			idf = "";
 
-			idt = "";
 
+
 
+function  moveFromTo (origin, destiny){
 
+  var originTower = getTower(origin), destinyTower = getTower(destiny);
 
+  var topDiskOrigin = originTower[originTower.length-1], topDiskDestiny;
 
+	if (!undo && !redo)	{
 
+		topDiskOrigin.setTexture(textDict[topDiskOrigin.texture.key]);
 
+	}
 
+  if (destinyTower.length>0){
 
+		//movement to a tower with a disk in it
 
+    topDiskDestiny = destinyTower[destinyTower.length-1];
 
+    if(topDiskOrigin.displayWidth<=topDiskDestiny.displayWidth){
 
+			topDiskOrigin.x += 435*(destiny-origin);
 
+			topDiskOrigin.y += 28*(originTower.length-destinyTower.length-1);
 
+			originTower.pop();
 
+			destinyTower.push(topDiskOrigin);
 
+			//control variables
 
+			nMoves.text++;
 
+			totalMoves.push(origin+"  "+destiny);
 
+			if (!undo){
 
+				//if it is either a redo or a new move we must add new moves to the current sequence for possible 'undos'
 
+				if(!redo){
 
+					//if it is a new move, we clean all possible "redos"
 
+					moves.splice(nCurrentMoves, moves.length- nCurrentMoves);
 
+					moves.push(origin+"  "+destiny);
 
+				}
 
+				nCurrentMoves++;
 
+				undoButton.setInteractive({useHandCursor: true});
 
+				undoButton.setTexture('undo');
 
+				if(nCurrentMoves==moves.length){
 
+					redoButton.disableInteractive();
 
+					redoButton.setTexture('redoDisabled');
 
+				}
 
+				redo=false;
 
+			}else{
 
+				nCurrentMoves--;
 
+				undo=false;
 
+				redoButton.setInteractive({useHandCursor: true});
 
+				redoButton.setTexture('redo');
 
+				if(nCurrentMoves==0){
 
+					undoButton.disableInteractive();
 
+					undoButton.setTexture('undoDisabled');
 
+				}
 
+			}
 
+    }
 
+  }else{
 
+		//move to a tower without a disk in it
 
+    topDiskOrigin.x += 435*(destiny-origin);
 
+		topDiskOrigin.y += 28*(originTower.length-destinyTower.length-1);
 
+		originTower.pop();
 
+		destinyTower.push(topDiskOrigin);
 
+		//control variables
 
+		nMoves.text++;
 
+		totalMoves.push(origin+"  "+destiny);
 
+		if (!undo){
 
+			//if it is either a redo or a new move we must add new moves to the current sequence for possible 'undos'
 
+			if(!redo){
 
+				//if it is a new move, we clean all possible "redos" and add the new move to the list
 
+				moves.splice(nCurrentMoves, moves.length- nCurrentMoves);
 
+				moves.push(origin+"  "+destiny);
 
+			}
 
+			nCurrentMoves++;
 
+			if(nCurrentMoves==moves.length){
 
+				redoButton.disableInteractive();
 
+				redoButton.setTexture('redoDisabled');
 
+			}
 
+			undoButton.setInteractive({useHandCursor: true});
 
+			undoButton.setTexture('undo');
 
+			redo=false;
 
+		}else{
 
+			nCurrentMoves--;
 
+			undo=false;
 
+			redoButton.setInteractive({useHandCursor: true});
 
+			redoButton.setTexture('redo');
 
+			if(nCurrentMoves==0){
 
+				undoButton.disableInteractive();
 
+				undoButton.setTexture('undoDisabled');
 
+			}
 
 		}
 
 		}
 
-		finishMove(parseInt(res[1]), parseInt(res[0]));
 
+  }
 
+	movements+=origin+" "+destiny+"\n"
 
+  isMoving=false;
 
+	if (towerC.length == diskQntity){
 
+		gameWonMsg.text = "Você terminou de mover a torre!!! Parabéns!!"
 
+	}else{
 
+		gameWonMsg.text ='';
 
 	}
 
 	}
 
 }
 
 }
 
 
 
-function redo(){
 
-	if (nMovements < moves.length){
 
-		var res = moves[nMovements].split("  ");
 
-		nMovements++;
 
-		finishMove(parseInt(res[0]), parseInt(res[1]));
 
+function redoMove(){
 
+	if (nCurrentMoves < moves.length){
 
+		var res = moves[nCurrentMoves].split("  ");
 
+		redo=true;
 
+		moveFromTo(parseInt(res[0]), parseInt(res[1]));
 
+		if(nCurrentMoves==moves.length) redoButton.setInteractive({useHandCursor: false});
 
 	}
 
 	}
 
 }
 
 }
 
 
 
-function finishMove(origin, destiny){
 
-	nTotalMovements++;
 
-	var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
 
-	topDiskOrigin = originTower[originTower.length-1];
 
-	totalMoves.push(origin+"  "+destiny+"  "+moveTime);
 
-	if(destinyTower.length>0){
 
-		topDiskDestiny = destinyTower[destinyTower.length-1];
 
-		if(topDiskOrigin.w<topDiskDestiny.w){
 
-			topDiskOrigin.x += 345*(destiny-origin);
 
-			topDiskOrigin.y += 42*(originTower.length-destinyTower.length-1);
 
-			originTower.pop();
 
-			destinyTower.push(topDiskOrigin);
 
-			drawScene();
 
-		} else{
 
-			nWrongMoves++;
 
-			alert("Movimento Inválido");
 
-			idF =" ";
 
-			idT =" ";
 
-			drawScene();						
-		}
 
-	}else{	
-		topDiskOrigin.x += 345*(destiny-origin);
 
-		topDiskOrigin.y += 42*(originTower.length-destinyTower.length-1);
 
-		originTower.pop();
 
-		destinyTower.push(topDiskOrigin);
 
-		drawScene();
 
+function undoMove(){
 
+	if(nCurrentMoves>0){
 
+		var res = moves[nCurrentMoves-1].split("  ");
 
+		undo=true;
 
+		moveFromTo(parseInt(res[1]), parseInt(res[0]));
 
+		if(nCurrentMoves==0) undoButton.setInteractive({useHandCursor: false});
 
+		redoButton.setInteractive({useHandCursor: true});
 
 	}
 
 	}
 
-}
 
+}

+ 0 - 117
js/integration-functions.js
View File 

@@ -1,117 +0,0 @@
 
-// Função para ler parâmetros informados pelo iTarefa via URL
 
-// Apesar de não ser obrigatório, será muito útil para capturar os parâmetros
 
-function getParameterByName(name) {
 
-    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
 
-    return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : null;
 
-}
 
-
 
-// Criando um array com os parâmetros informados pelo iTarefa
 
-// Observe que para cada parâmetro, é realizada a chamada do método getParameterByName, implementado acima
 
-var iLMparameters = {
 
-    iLM_PARAM_ServerToGetAnswerURL: getParameterByName("iLM_PARAM_ServerToGetAnswerURL"),
 
-    iLM_PARAM_SendAnswer: getParameterByName("iLM_PARAM_SendAnswer"),
 
-    iLM_PARAM_AssignmentURL: getParameterByName("iLM_PARAM_AssignmentURL"),
 
-    iLM_PARAM_Assignment: getParameterByName("iLM_PARAM_Assignment"),
 
-    lang: getParameterByName("lang")
 
-};
 
-
 
-// Função chamada pelo iTarefa quando o professor finaliza a criação da atividade
 
-// ou quando o aluno finaliza a resolução do exercício
 
-// O retorno é um JSON com os dados do exercício ou da resolução
 
-// Esse retorno será armazenado no banco de dados do Moodle, pelo iTarefa
 
-function getAnswer() {
 
-    // Se o parâmetro "iLM_PARAM_SendAnswer" for false,
 
-    // então trata-se de resolução de atividade
 
-    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
 
-        // Montar o retorno da resposta do aluno
 
-        var teacherReturn ="Numero de discos: "+nDisks+"  Quantidade de Movimentos: "+nTotalMovements+
 
-                            "\nQuantidade de erros: "+nWrongMoves+"  Tempo Total: "+totalTime+
 
-                            "\n --De Para";
 
-        for(var i=0; i<totalMoves.length; i++){
 
-            teacherReturn+="\n"+totalMoves[i];
 
-        }
 
-        return teacherReturn;
 
-    } else {//se for o professor acessando, mostra a pagina de elaboração
 
-        return "Número de Discos: "+$('.cDiscos').val();
 
-    }
 
-}
 
-
 
-// Função chamada pelo iTarefa para receber a nota do aluno na atividade
 
-// O retorno é um valor entre 0.0 e 1.0
 
-function getEvaluation() {
 
-    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
 
-        // Calcula a nota do aluno:
 
-
 
-
 
-        // Agora, verificamos se o aluno acertou
 
-       // var acertos = 0;
 
-        
-        // Cálculo da nota: resposta correta =1, errada =0
 
-        var nota = acertou;
 
-
 
-        // A chamada do método abaixo é obrigatória!
 
-        // Observe que a chamada parte do iLM para o iTarefa
 
-        parent.getEvaluationCallback(nota);
 
-    }
 
-}
 
-
 
-
 
-// Função para que o iMA leia os dados da atividade fornecidos pelo iTarefa
 
-function getiLMContent() {
 
-
 
-    // O parâmetro "iLM_PARAM_Assignment" fornece o URL do endereço que deve ser
 
-    // requisitado via AJAX para a captura dos dados da atividade
 
-    $.get(iLMparameters.iLM_PARAM_Assignment, function (d) {
 
-        // Uma vez que os dados foram recebidos, o método "organizaAtividade" é chamado.
 
-        // Observe que esse método faz parte do arquivo js/iarithmetic-functions.js
 
-        console.log(d);
 
-        res = d.split(" ");
 
-        loadIMGS(parseInt(res[3]));
 
-        if (res.indexOf("Quantidade")!=-1){
 
-            document.getElementById("A_button").disabled = true;
 
-            document.getElementById("B_button").disabled = true;
 
-            document.getElementById("C_button").disabled = true;
 
-            res = d.split("\n");
 
-            var j = 0
 
-            while(res[j].indexOf("--")==-1){
 
-                j++;
 
-            }
 
-            j++;
 
-            while(j<res.length){
 
-                res2 = res[j].split("  ");
 
-                nTotalMovements--;
 
-                console.log(res2);
 
-                idF= res2[0];
 
-                idT= res2[1];
 
-                finishMove(parseInt(res2[0]),parseInt(res2[1]));
 
-                j++;
 
-            }
 
-        }
 
-    });
 
-}
 
-
 
-// Adicionamos a diretiva .ready(), para que quando a página HTML estiver carregada,
 
-// seja verificado qual a visualização deve ser apresentada: se a área de construção
 
-// de atividade ou de resolução. E no caso de ser resolução, os dados da atividade
 
-// precisam ser consultados, pelo método implementado acima, o getiLMContent()
 
-$(document).ready(function() {
 
-    // Se iLM_PARAM_SendAnswer for false, então trata-se de resolução de atividade,
 
-    // portanto, a "DIV" de resolução é liberada
 
-    if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
 
-        $('.task').css("display","block");
 
-        getiLMContent();
 
-    } else {
 
-        // Caso não esteja em modo de resolução de atividade, a visualização no momento
 
-        // é para a elaboração de atividade:
 
-        $('.creation').css("display","block");
 
-    }
 
-});
 
-
 
-function sleep(milliseconds) {
 
-  var startSleep = new Date().getTime();
 
-  for (var i = 0; i < 1e7; i++) {
 
-    if ((new Date().getTime() - startSleep) > milliseconds){
 
-      break;
 
-    }
 
-  }
 
-}

File diff suppressed because it is too large
+ 0 - 2
js/jquery-3.3.1.min.js


+ 104 - 0
js/phaserConfig.js
View File 

@@ -0,0 +1,104 @@
 
+
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        scale:{
 
+          mode: Phaser.Scale.FIT,
 
+          width: 1320,
 
+          height: 600
 
+        },
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            update: update
 
+        }
 
+    };
 
+
 
+    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;
 
+
 
+    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');
 
+
 
+
 
+      this.load.image('undo', 'assets/undo.png');
 
+      this.load.image('undoDisabled', 'assets/undoDisabled.png');
 
+
 
+
 
+      //load all imgs needed for the exercise
 
+      for (var i = 0; i < diskQntity; i++) {
 
+
 
+        this.load.image('disk'+i, 'assets/disk'+i+'.png')
 
+        this.load.image('stroked'+i, 'assets/strokedDisks/stroked'+i+'.png')
 
+      }
 
+    }
 
+
 
+    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();
 
+        });
 
+      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 ()
 
+    {
 
+    }
 
+    function event() {
 
+        console.log('over');
 
+    }

+ 0 - 22
js/start.js
View File 

@@ -1,22 +0,0 @@
 
-var canvas = document.getElementById('planoDeFundo');
 
-var context = canvas.getContext('2d');
 
-var towerA = [], towerB = [], towerC = [];
 
-var toMove = null;
 
-var idF=" ", idT= " ";
 
-var nMovements = 0, nTotalMovements = 0, nWrongMoves = 0, nDisks;
 
-var moves = [], totalMoves = []; //vector to save movements
 
-var acertou=0;
 
-var optimalSolution;
 
-		 	//NavyBlue  Lime     Fuchsia   yellow   Orange   LightSteelBlue  red
 
-var colors = ["#000080","#00FF00", "#FF00FF", "yellow", "#FFA500", "#B0C4DE","red"];
 
-var start = Date.now(), startOfMove, totalTime, moveTime; //timing vars
 
-var pat;
 
-
 
-function loadIMGS(n){
 
-	var img = new Image();
 
-	img.onload = function(){
 
-		pat = context.createPattern(img, "repeat");
 
-		inicio(n);
 
-	};
 
-	img.src = 'imgs/wood1.jpeg';
 
-}