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

Init

Bernardo 6 years ago
commit
7a874cc866
17 changed files with 982 additions and 0 deletions
Split View Show Diff Stats
  1. 5 0
      geary-html5gamedev-article-one-code/COPYING
  2. 5 0
      geary-html5gamedev-article-one-code/NOTICE
  3. 79 0
      geary-html5gamedev-article-one-code/game.css
  4. 67 0
      geary-html5gamedev-article-one-code/game.html
  5. 168 0
      geary-html5gamedev-article-one-code/game.js
  6. BIN
      geary-html5gamedev-article-one-code/images/background.jpg
  7. BIN
      geary-html5gamedev-article-one-code/images/background.png
  8. BIN
      geary-html5gamedev-article-one-code/images/background_level_one_dark_red.png
  9. BIN
      geary-html5gamedev-article-one-code/images/runner.png
  10. 267 0
      iHanoi.html
  11. BIN
      imgs/pf.png
  12. 122 0
      imgs/pf.svg
  13. BIN
      j-html5-game1.zip
  14. 26 0
      js/Global.js
  15. 232 0
      old/index.html
  16. BIN
      pf.png
  17. 11 0
      teste.ihn~

+ 5 - 0
geary-html5gamedev-article-one-code/COPYING
View File 

@@ -0,0 +1,5 @@
 
+This software contains open-source graphics from Replica Island, licensed under the Apache 2 license. See COPYING for more information. David Geary made some minor modifications to those graphics.
 
+
 
+This software also contains open-source graphics from MJKRZAK of People's Sprites. The website from which MJKRZAK's graphics were obtained -- peoplessprites.org -- is no longer available. Those graphics were modified by David Geary.
 
+
 
+All of the code in this software is distributed under the Apache 2 Software License and is copyrighted to David Geary, 2013.

+ 5 - 0
geary-html5gamedev-article-one-code/NOTICE
View File 

@@ -0,0 +1,5 @@
 
+This software contains open-source graphics from Replica Island, licensed under the Apache 2 license. See COPYING for more information. David Geary made some minor modifications to those graphics.
 
+
 
+This software also contains open-source graphics from MJKRZAK of People's Sprites. The website from which MJKRZAK's graphics were obtained -- peoplessprites.org -- is no longer available. Those graphics were modified by David Geary.
 
+
 
+All of the code in this software is distributed under the Apache 2 Software License and is copyrighted to David Geary, 2013.

+ 79 - 0
geary-html5gamedev-article-one-code/game.css
View File 

@@ -0,0 +1,79 @@
 
+/*
 
+ * Copyright (C) 2012 David Geary. This code is from the book
 
+ * Core HTML5 Canvas, published by Prentice-Hall in 2012.
 
+ *
 
+ * License:
 
+ *
 
+ * Permission is hereby granted, free of charge, to any person 
+ * obtaining a copy of this software and associated documentation files
 
+ * (the "Software"), to deal in the Software without restriction,
 
+ * including without limitation the rights to use, copy, modify, merge,
 
+ * publish, distribute, sublicense, and/or sell copies of the Software,
 
+ * and to permit persons to whom the Software is furnished to do so,
 
+ * subject to the following conditions:
 
+ *
 
+ * The above copyright notice and this permission notice shall be
 
+ * included in all copies or substantial portions of the Software.
 
+ *
 
+ * The Software may not be used to create training material of any sort,
 
+ * including courses, books, instructional videos, presentations, etc.
 
+ * without the express written consent of David Geary.
 
+ *
 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 
+ * OTHER DEALINGS IN THE SOFTWARE.
 
+*/
 
+body {
 
+   background: teal;
 
+   background: url('images/background.jpg');
 
+   margin: 0;
 
+   padding: 0;
 
+}
 
+
 
+#arena {
 
+   text-align: center;
 
+   padding: 5px;
 
+   width: 805px;
 
+   height: 445px;
 
+}
 
+
 
+#wrapper {
 
+   margin: 0 auto;
 
+   margin-top: 10px;
 
+   padding: 5px;
 
+   width: 817px;
 
+   height: 520px;
 
+}
 
+         
+#score {
 
+   font: 40px fantasy;
 
+   text-align: center;
 
+   color: #ff0;
 
+   text-shadow: 2px 2px 4px rgba(0,0,80,1.0);
 
+
 
+   /*border: thin solid white;
 
+   -webkit-box-shadow: rgba(0,0,0,0.5) 1px 1px 2px;
 
+   -moz-box-shadow: rgba(0,0,0,0.5) 1px 1px 2px;
 
+   -o-box-shadow: rgba(0,0,0,0.5) 1px 1px 2px;
 
+   box-shadow: rgba(0,0,0,0.5) 1px 1px 2px;*/
 
+}
 
+
 
+#game-canvas {
 
+   position: relative;
 
+   border: 2px inset rgba(0,0,80,0.62);
 
+
 
+   -webkit-transition: opacity 0.5s;
 
+   -moz-transition: opacity 0.5s;
 
+   -o-transition: opacity 0.5s;
 
+   transition: opacity 0.5s;
 
+
 
+   -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
 
+   -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
 
+   -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
 
+   box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
 
+}

+ 67 - 0
geary-html5gamedev-article-one-code/game.html
View File 

@@ -0,0 +1,67 @@
 
+<!DOCTYPE html>
 
+<!--
 
+- Copyright (C) 2012 David Geary. 
+-
 
+- License:
 
+-
 
+- Permission is hereby granted, free of charge, to any person 
+- obtaining a copy of this software and associated documentation files
 
+- (the "Software"), to deal in the Software without restriction,
 
+- including without limitation the rights to use, copy, modify, merge,
 
+- publish, distribute, sublicense, and/or sell copies of the Software,
 
+- and to permit persons to whom the Software is furnished to do so,
 
+- subject to the following conditions:
 
+-
 
+- The above copyright notice and this permission notice shall be
 
+- included in all copies or substantial portions of the Software.
 
+-
 
+- The Software may not be used to create training material of any sort,
 
+- including courses, books, instructional videos, presentations, etc.
 
+- without the express written consent of David Geary.
 
+-
 
+- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 
+- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 
+- OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 
+- NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 
+- HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 
+- WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 
+- FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 
+- OTHER DEALINGS IN THE SOFTWARE.
 
+-->
 
+
 
+<html>
 
+   <!-- Head........................................................-->
 
+
 
+	<head>
 
+	   <title>Snail Bait</title>
 
+      <link rel='stylesheet' href='game.css'/>
 
+   </head>
 
+
 
+   <!-- Body........................................................-->
 
+
 
+   <body>
 
+      <!-- Wrapper..................................................-->
 
+
 
+      <div id='wrapper'>
 
+         <!-- Header..................................................-->
 
+
 
+         <div id='header'>
 
+            <div id='score'>0</div>
 
+         </div>
 
+            
+         <!-- Arena..................................................-->
 
+
 
+         <div id='arena'>
 
+            <!-- The game canvas.....................................-->
 
+
 
+            <canvas id='game-canvas' width='800' height='400'>
 
+               Your browser does not support HTML5 Canvas.
 
+            </canvas>
 
+         </div>
 
+      </div>
 
+
 
+      <!-- JavaScript................................................-->
 
+
 
+      <script src='game.js'></script>
 
+  </body>
 
+</html>

+ 168 - 0
geary-html5gamedev-article-one-code/game.js
View File 

@@ -0,0 +1,168 @@
 
+/*
 
+ * Copyright (C) 2012 David Geary. This code is from the book
 
+ * Core HTML5 Canvas, published by Prentice-Hall in 2012.
 
+ *
 
+ * License:
 
+ *
 
+ * Permission is hereby granted, free of charge, to any person 
+ * obtaining a copy of this software and associated documentation files
 
+ * (the "Software"), to deal in the Software without restriction,
 
+ * including without limitation the rights to use, copy, modify, merge,
 
+ * publish, distribute, sublicense, and/or sell copies of the Software,
 
+ * and to permit persons to whom the Software is furnished to do so,
 
+ * subject to the following conditions:
 
+ *
 
+ * The above copyright notice and this permission notice shall be
 
+ * included in all copies or substantial portions of the Software.
 
+ *
 
+ * The Software may not be used to create training material of any sort,
 
+ * including courses, books, instructional videos, presentations, etc.
 
+ * without the express written consent of David Geary.
 
+ *
 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 
+ * OTHER DEALINGS IN THE SOFTWARE.
 
+*/
 
+// ---------------------------------------------------------------------
 
+// --------------------------- DECLARATIONS ----------------------------
 
+// ---------------------------------------------------------------------
 
+
 
+var canvas = document.getElementById('game-canvas'),
 
+   context = canvas.getContext('2d'),
 
+
 
+// Constants............................................................
 
+
 
+   PLATFORM_HEIGHT = 8,  
+   PLATFORM_STROKE_WIDTH = 2,
 
+   PLATFORM_STROKE_STYLE = 'rgb(0,0,0)',
 
+
 
+   STARTING_RUNNER_LEFT = 50,
 
+   STARTING_RUNNER_TRACK = 1,
 
+
 
+// Track baselines...................................................
 
+
 
+   TRACK_1_BASELINE = 323,
 
+   TRACK_2_BASELINE = 223,
 
+   TRACK_3_BASELINE = 123,
 
+
 
+// Images............................................................
 
+   
+   background  = new Image(),
 
+   runnerImage = new Image(),
 
+
 
+   // Platforms.........................................................
 
+
 
+   platformData = [  // One screen for now
 
+      // Screen 1.......................................................
 
+      {
 
+         left:      10,
 
+         width:     230,
 
+         height:    PLATFORM_HEIGHT,
 
+         fillStyle: 'rgb(250,250,0)',
 
+         opacity:   0.5,
 
+         track:     1,
 
+         pulsate:   false,
 
+      },
 
+
 
+      {  left:      250,
 
+         width:     100,
 
+         height:    PLATFORM_HEIGHT,
 
+         fillStyle: 'rgb(150,190,255)',
 
+         opacity:   1.0,
 
+         track:     2,
 
+         pulsate:   false,
 
+      },
 
+
 
+      {  left:      400,
 
+         width:     125,
 
+         height:    PLATFORM_HEIGHT,
 
+         fillStyle: 'rgb(250,0,0)',
 
+         opacity:   1.0,
 
+         track:     3,
 
+         pulsate:   false
 
+      },
 
+
 
+      {  left:      633,
 
+         width:     100,
 
+         height:    PLATFORM_HEIGHT,
 
+         fillStyle: 'rgb(250,250,0)',
 
+         opacity:   1.0, 
+         track:     1,
 
+         pulsate:   false,
 
+      },
 
+   ];
 
+
 
+// ------------------------- INITIALIZATION ----------------------------
 
+
 
+function initializeImages() {
 
+   background.src = 'images/background_level_one_dark_red.png';
 
+   runnerImage.src = 'images/runner.png';
 
+
 
+   background.onload = function (e) {
 
+      startGame();
 
+   };
 
+}
 
+
 
+
 
+function drawBackground() {
 
+   context.drawImage(background, 0, 0);
 
+}
 
+
 
+function calculatePlatformTop(track) {
 
+   var top;
 
+
 
+   if      (track === 1) { top = TRACK_1_BASELINE; }
 
+   else if (track === 2) { top = TRACK_2_BASELINE; }
 
+   else if (track === 3) { top = TRACK_3_BASELINE; }
 
+
 
+   return top;
 
+}
 
+
 
+function drawPlatforms() {
 
+   var pd, top;
 
+
 
+   context.save(); // Save context attributes
 
+   
+   for (var i=0; i < platformData.length; ++i) {
 
+      pd = platformData[i];
 
+      top = calculatePlatformTop(pd.track);
 
+
 
+      context.lineWidth = PLATFORM_STROKE_WIDTH;
 
+      context.strokeStyle = PLATFORM_STROKE_STYLE;
 
+      context.fillStyle = pd.fillStyle;
 
+      context.globalAlpha = pd.opacity;
 
+
 
+      // If you switch the order of the following two
 
+      // calls, you get a different effect.
 
+
 
+      context.strokeRect(pd.left, top, pd.width, pd.height);
 
+      context.fillRect  (pd.left, top, pd.width, pd.height);
 
+   }
 
+
 
+   context.restore(); // Restore context attributes
 
+}
 
+
 
+function drawRunner() {
 
+   context.drawImage(runnerImage,
 
+      STARTING_RUNNER_LEFT,
 
+      calculatePlatformTop(STARTING_RUNNER_TRACK) - runnerImage.height);
 
+}
 
+
 
+function draw(now) {
 
+   drawBackground();
 
+   drawPlatforms();
 
+   drawRunner();
 
+}
 
+
 
+function startGame() {
 
+   draw();
 
+}
 
+
 
+// Launch game.........................................................
 
+
 
+initializeImages();

BIN
geary-html5gamedev-article-one-code/images/background.jpg
View File


BIN
geary-html5gamedev-article-one-code/images/background.png
View File


BIN
geary-html5gamedev-article-one-code/images/background_level_one_dark_red.png
View File


BIN
geary-html5gamedev-article-one-code/images/runner.png
View File


+ 267 - 0
iHanoi.html
View File 

@@ -0,0 +1,267 @@
 
+<!DOCTYPE html>
 
+<meta charset="UTF-8">
 
+<html>
 
+	<head>
 
+		<title> Torre de Hanoi </title>
 
+		<Style>
 
+			#planoDeFundo {
 
+				background :transparent;
 
+				left: 10%;
 
+				top : 10%;
 
+				width: 80%; 
+				height: 60%;
 
+				position: absolute;
 
+			}
 
+			#fim_button{
 
+				position: absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				max-width: 5%;
 
+				left:10%;
 
+				top: 5%;
 
+			}
 
+			#atualiza_button{
 
+				position:absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				max-width: 7%;
 
+				left: 15%;
 
+				top:5%;
 
+			}
 
+
 
+			#A_button{
 
+				position:absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				width: 20%;
 
+				max-width: 20%;
 
+				left: 13%;
 
+				top:71%;
 
+			}
 
+			#B_button{
 
+				position:absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				width: 20%;
 
+				max-width: 20%;
 
+				left: 40%;
 
+				top:71%;
 
+			}
 
+			#C_button{
 
+				position:absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				width: 20%;
 
+				max-width: 20%;
 
+				left: 67%;
 
+				top:71%;
 
+			}
 
+
 
+
 
+
 
+		</Style>
 
+	</head>
 
+	<body>
 
+	<button id="fim_button">Fim</button>
 
+	<button id="atualiza_button">Atualiza</button>
 
+	<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>
 
+	<select name ="Disks" onchange="reinicio()" id="selectDisks">
 
+		<option value = "1">1 Disk</option>
 
+		<option value = "2">2 Disk</option>
 
+		<option value = "3">3 Disk</option>
 
+		<option value = "4">4 Disk</option>
 
+		<option value = "5">5 Disk</option>
 
+		<option value = "6">6 Disk</option>
 
+		<option value = "7">7 Disk</option>
 
+
 
+	</select>
 
+		<canvas id="planoDeFundo"  width="1024" height="768">
 
+		Seu navegador não suporta o recurso Canvas. Atualize-o para utilizar esse recurso
 
+		</canvas>
 
+		<script>
 
+			var canvas = document.getElementById('planoDeFundo');
 
+			var context = canvas.getContext('2d');
 
+			var towerA = [], towerB = [], towerC = [];
 
+			var toMove = null;
 
+			var idF=" ", idT= " ";
 
+			var nMovements = 0, nDisks = 0;
 
+					 	//NavyBlue  Lime     Fuchsia   lightPink   Orange   LightSteelBlue  Pink
 
+			var colors = ["#000080","#00FF00", "#FF00FF", "#FFC0CB", "#FFA500", "#B0C4DE","#F441AC"];
 
+			
+
 
+			function inicio (){
 
+				nDisks = document.getElementById('selectDisks').value;
 
+				var x = 0;
 
+				var y = 558;
 
+				var w = 330;
 
+				for (var i = 0; i < nDisks; i++) {
 
+					var disk = new Disk(x,y,w,40,colors[i]);
 
+					towerA.push(disk);
 
+					x+=25;  //moves to the right
 
+					y-=42; //moves up, +1 to separate disks
 
+					w-=50; //reduces disk width
 
+				}
 
+				drawScene();
 
+				console.log(y);
 
+		    
+			}
 
+
 
+			class Disk{
 
+				constructor(x,y,w,h,fill){
 
+					this.x=x;
 
+					this.y=y;
 
+					this.w=w;
 
+					this.h=h;
 
+					this.fill=fill;
 
+				}
 
+				draw(){
 
+					context.fillStyle = this.fill;
 
+					context.fillRect(this.x, this.y, this.w, this.h);
 
+				}
 
+				clear(){
 
+					context.clearRect(this.x, this.y, this.w, this.h);
 
+				}
 
+			}
 
+			function reinicio (){
 
+				while(towerA.length>0){
 
+					towerA.pop();
 
+				}
 
+				while(towerB.length>0){
 
+					towerB.pop();
 
+				}
 
+				while(towerC.length>0){
 
+					towerC.pop();
 
+				}
 
+				nMovements=0;
 
+				idF = " ";
 
+				idT=" ";
 
+				toMove=null;
 
+				inicio();
 
+			}
 
+			function drawTowers(){
 
+				context.beginPath();
 
+				<!-- torre 1 -->
 
+				context.fillStyle = 'black';
 
+				context.fillRect(160, 260, 10, 340);//x, y, largura, altura
 
+			    
+			    <!--Base t1-->
 
+				context.fillRect(0, 600, 330, 15);
 
+
 
+				<!-- torre 2 -->
 
+				context.fillRect(505, 260 ,10, 340);
 
+
 
+			    <!--Base t2-->
 
+				context.fillRect(345, 600, 330, 15);
 
+
 
+				<!-- torre 3 -->
 
+				context.fillRect(850, 260, 10, 340);
 
+
 
+			    <!--Base t3-->
 
+				context.fillRect(690, 600, 330, 15);
 
+			}
 
+
 
+			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){
 
+				console.log(id);
 
+				if(toMove == null && getTower(id).length>0){
 
+					toMove = id;
 
+					idF= String.fromCharCode(65+id);
 
+					idT= " ";
 
+					drawScene();
 
+
 
+				} else if(toMove != id){
 
+					idT = String.fromCharCode(65+id);
 
+					moveDisk(toMove, id);
 
+					toMove=null;
 
+				}
 
+			}
 
+
 
+			function getTower (id){
 
+				switch(id){
 
+					case 0:
 
+						return towerA;
 
+					case 1:
 
+						return towerB;
 
+					case 2:
 
+						return towerC;
 
+				}
 
+			}
 
+
 
+			function drawFromTo (){
 
+				context.font = "50px Arial";
 
+				context.fillStyle = "black";
 
+				context.fillText("Move from "+idF+" to ", 50, 50);
 
+				context.fillText("Movements: "+nMovements, 50, 100);
 
+			}
 
+
 
+
 
+			function moveDisk (origin, destiny){
 
+				var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
 
+				
+				
+				topDiskOrigin = originTower[originTower.length-1];
 
+				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);
 
+						nMovements++;
 
+						drawScene();
 
+					} else{
 
+						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);
 
+					nMovements++;
 
+					drawScene();
 
+				}
 
+				if(towerC.length == nDisks && nDisks!=0){
 
+					alert("You Won!!!\nCongratulations!!");
 
+				}
 
+			}
 
+
 
+
 
+    	</script>
 
+
 
+    	<script> inicio(); </script>
 
+    	
+  </body>
 
+</html>

BIN
imgs/pf.png
View File


+ 122 - 0
imgs/pf.svg
View File 

@@ -0,0 +1,122 @@
 
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
 
+
 
+<svg
 
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
 
+   xmlns:cc="http://creativecommons.org/ns#"
 
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 
+   xmlns:svg="http://www.w3.org/2000/svg"
 
+   xmlns="http://www.w3.org/2000/svg"
 
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 
+   width="210mm"
 
+   height="297mm"
 
+   viewBox="0 0 210 297"
 
+   version="1.1"
 
+   id="svg8"
 
+   inkscape:version="0.92.3 (d244b95, 2018-08-02)"
 
+   sodipodi:docname="pfsvg.svg">
 
+  <defs
 
+     id="defs2" />
 
+  <sodipodi:namedview
 
+     id="base"
 
+     pagecolor="#ffffff"
 
+     bordercolor="#666666"
 
+     borderopacity="1.0"
 
+     inkscape:pageopacity="0.0"
 
+     inkscape:pageshadow="2"
 
+     inkscape:zoom="0.35"
 
+     inkscape:cx="479.94524"
 
+     inkscape:cy="480.12057"
 
+     inkscape:document-units="mm"
 
+     inkscape:current-layer="layer2"
 
+     showgrid="false"
 
+     inkscape:window-width="1215"
 
+     inkscape:window-height="1000"
 
+     inkscape:window-x="65"
 
+     inkscape:window-y="24"
 
+     inkscape:window-maximized="1"
 
+     inkscape:snap-grids="true"
 
+     showguides="true"
 
+     inkscape:guide-bbox="true" />
 
+  <metadata
 
+     id="metadata5">
 
+    <rdf:RDF>
 
+      <cc:Work
 
+         rdf:about="">
 
+        <dc:format>image/svg+xml</dc:format>
 
+        <dc:type
 
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 
+        <dc:title></dc:title>
 
+      </cc:Work>
 
+    </rdf:RDF>
 
+  </metadata>
 
+  <g
 
+     inkscape:groupmode="layer"
 
+     id="layer2"
 
+     inkscape:label="Fundo"
 
+     style="display:inline">
 
+    <rect
 
+       style="fill:#00ffff;stroke-width:0.26458332"
 
+       id="rect3841"
 
+       width="451.30356"
 
+       height="242.66072"
 
+       x="-18.898809"
 
+       y="68.702377" />
 
+  </g>
 
+  <g
 
+     inkscape:label="Torres"
 
+     inkscape:groupmode="layer"
 
+     id="layer1"
 
+     style="display:inline">
 
+    <rect
 
+       id="rect3713"
 
+       width="118.68452"
 
+       height="7.5595236"
 
+       x="-413.0871"
 
+       y="289.64197"
 
+       style="fill:#d38d5f;stroke-width:0.34752944"
 
+       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
 
+    <rect
 
+       id="rect3715"
 
+       width="6.8035712"
 
+       height="191.90002"
 
+       x="-357.14764"
 
+       y="98.497856"
 
+       style="fill:#d38d5f;stroke-width:0.31775796"
 
+       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
 
+    <rect
 
+       id="rect3713-0"
 
+       width="118.68452"
 
+       height="7.5595236"
 
+       x="-268.92889"
 
+       y="288.96158"
 
+       style="fill:#d38d5f;stroke-width:0.34752944"
 
+       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)"
 
+       ry="0" />
 
+    <rect
 
+       id="rect3715-9"
 
+       width="6.8035712"
 
+       height="191.90002"
 
+       x="-212.9875"
 
+       y="97.70565"
 
+       style="fill:#d38d5f;stroke-width:0.31775796"
 
+       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
 
+    <rect
 
+       id="rect3713-3"
 
+       width="118.68452"
 
+       height="7.5595236"
 
+       x="-118.4914"
 
+       y="289.26398"
 
+       style="fill:#d38d5f;stroke-width:0.34752944"
 
+       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
 
+    <rect
 
+       id="rect3715-6"
 
+       width="6.8035712"
 
+       height="191.90002"
 
+       x="-62.553886"
 
+       y="98.057732"
 
+       style="fill:#d38d5f;stroke-width:0.31775796"
 
+       transform="matrix(-0.99999951,9.8620527e-4,9.8620527e-4,0.99999951,0,0)" />
 
+  </g>
 
+</svg>

BIN
j-html5-game1.zip
View File


+ 26 - 0
js/Global.js
View File 

@@ -0,0 +1,26 @@
 
+/**
 
+ * Cria o objeto "Desenhavel" que será a classe base para
 
+ * todos os objetos desenháveis do jogo. Define também as variáveis padrão
 
+ * que todos os objetos filhos herdarão, assim como as funções padrão.
 
+ */
 
+function Desenhavel(){
 
+	this.larguraCanvas = 0;
 
+	this.alturaCanvas = 0;
 
+
 
+ 	 // Define uma função abastrata para ser sobrescrita nos objetos filho
 
+ 	this.Desenhar= function(){};
 
+
 
+ 	this.iniciar = function (x,y){
 
+ 		//variaveis padrao do eixo cartesiano
 
+ 		this.x = x;
 
+ 		this.y = y;
 
+ 	}
 
+}
 
+
 
+var repositorio= new function(){
 
+	this.planoFundo = new Image();
 
+
 
+	this.planoFundo.src = "imgs/pf.png";//caminho da source
 
+}
 
+
 
+function

+ 232 - 0
old/index.html
View File 

@@ -0,0 +1,232 @@
 
+<!DOCTYPE html>
 
+<meta charset="UTF-8">
 
+<html>
 
+	<head>
 
+		<title> Torre de Hanoi </title>
 
+		<Style>
 
+			#planoDeFundo {
 
+				background :transparent;
 
+				left: 10%;
 
+				top : 10%;
 
+				width: 80%; 
+				height: 60%;
 
+				position: absolute;
 
+			}
 
+			#fim_button{
 
+				position: absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				max-width: 5%;
 
+				left:10%;
 
+				top: 5%;
 
+			}
 
+			#atualiza_button{
 
+				position:absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				max-width: 7%;
 
+				left: 15%;
 
+				top:5%;
 
+			}
 
+
 
+			#A_button{
 
+				position:absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				width: 20%;
 
+				max-width: 20%;
 
+				left: 13%;
 
+				top:71%;
 
+			}
 
+			#B_button{
 
+				position:absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				width: 20%;
 
+				max-width: 20%;
 
+				left: 40%;
 
+				top:71%;
 
+			}
 
+			#C_button{
 
+				position:absolute;
 
+				border:1px solid gray;
 
+				border-radius: 7%;
 
+				font-size: 0.875;
 
+				word-wrap: break-word;
 
+				width: 20%;
 
+				max-width: 20%;
 
+				left: 67%;
 
+				top:71%;
 
+			}
 
+		</Style>
 
+	</head>
 
+	<body>
 
+	<button id="fim_button">Fim</button>
 
+	<button id="atualiza_button">Atualiza</button>
 
+	<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> 
+		<canvas id="planoDeFundo">
 
+		Seu navegador não suporta o recurso Canvas. Atualize-o para utilizar esse recurso
 
+		</canvas>
 
+		<script>
 
+			var canvas = document.getElementById('planoDeFundo');
 
+			var context = canvas.getContext('2d');
 
+			var towerA = [], towerB = [], towerC = [], toMove = null;
 
+			var idF=" ", idT=" ";
 
+			function inicio (){
 
+						 	//NavyBlue  Lime     Fuchsia   lightPink   Orange   LightSteelBlue
 
+				var colors = ["#000080","#00FF00", "#FF00FF", "#FFC0CB", "#FFA500", "#B0C4DE"];
 
+				var x = 13.5;
 
+				var y = 109;
 
+				var w = 70;
 
+				for (var i = 0; i < 6; i++) {
 
+					var disk = new Disk(x,y,w,10,colors[i]);
 
+					towerA.push(disk);
 
+					x+=5;  //moves to the right
 
+					y-=11; //moves up, +1 to separate disks
 
+					w-=10; //reduces disk width
 
+				}
 
+				drawScene();
 
+		    document.write("width:",canvas.width,"  height: ",canvas.height);
 
+
 
+			}
 
+
 
+			class Disk{
 
+				constructor(x,y,w,h,fill){
 
+					this.x=x;
 
+					this.y=y;
 
+					this.w=w;
 
+					this.h=h;
 
+					this.fill=fill;
 
+				}
 
+				draw(){
 
+					context.fillStyle = this.fill;
 
+					context.fillRect(this.x, this.y, this.w, this.h);
 
+				}
 
+				clear(){
 
+					context.clearRect(this.x, this.y, this.w, this.h);
 
+				}
 
+			}
 
+
 
+			function drawTowers(){
 
+				context.beginPath();
 
+				<!-- torre 1 -->
 
+				context.rect(45,20,5, 100);//x, y, largura, altura
 
+				context.fillStyle = 'yellow';
 
+			    context.fill();
 
+			    
+			    <!--Base t1-->
 
+				context.rect(13.5,120,70, 5);
 
+			    context.fill();
 
+
 
+				<!-- torre 2 -->
 
+				context.rect(145,20 ,5, 100);
 
+			    context.fill();
 
+
 
+			    <!--Base t2-->
 
+				context.rect(113.5,120,70, 5);
 
+			    context.fill();
 
+
 
+				<!-- torre 3 -->
 
+				context.rect(245,20 ,5, 100);
 
+			    context.fill();
 
+
 
+			    <!--Base t2-->
 
+				context.rect(213.5,120,70, 5);
 
+			    context.fill();
 
+			}
 
+
 
+			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){
 
+				console.log(id);
 
+				if(toMove == null && getTower(id).length>0){
 
+					toMove = id;
 
+					idF= String.fromCharCode(65+id);
 
+					idT= " ";
 
+					drawScene();
 
+				} else if(toMove != id){
 
+					idT = String.fromCharCode(65+id);
 
+					moveDisk(toMove, id)					
+					toMove=null;
 
+				}
 
+			}
 
+
 
+			function drawFromTo(){
 
+				context.font = "10px Arial";
 
+				context.strokeText("Move from "+idF+" to "+idT, 10, 10);
 
+			}
 
+
 
+			function getTower (id){
 
+				switch(id){
 
+					case 0:
 
+						return towerA;
 
+					case 1:
 
+						return towerB;
 
+					case 2:
 
+						return towerC;
 
+				}
 
+			}
 
+
 
+			function moveDisk (origin, destiny){
 
+				var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
 
+				
+				
+				topDiskOrigin = originTower[originTower.length-1];
 
+				if(destinyTower.length>0){
 
+					topDiskDestiny = destinyTower[destinyTower.length-1];
 
+					if(topDiskOrigin.w<topDiskDestiny.w){
 
+						topDiskOrigin.x += 100*(destiny-origin);
 
+						topDiskOrigin.y += 11*(originTower.length-destinyTower.length-1);
 
+						originTower.pop();
 
+						destinyTower.push(topDiskOrigin);
 
+						drawScene();
 
+					} else{
 
+						alert("Movimento Inválido");
 
+						idF =" ";
 
+						idT =" ";
 
+						drawScene();
 
+
 
+					}
 
+				}else{	
+					topDiskOrigin.x += 100*(destiny-origin);
 
+					topDiskOrigin.y += 11*(originTower.length-destinyTower.length-1);
 
+					originTower.pop();
 
+					destinyTower.push(topDiskOrigin);
 
+					drawScene();
 
+				}
 
+			}
 
+
 
+
 
+    	</script>
 
+
 
+    	<script> inicio(); </script>
 
+    	
+  </body>
 
+</html>

BIN
pf.png
View File


+ 11 - 0
teste.ihn~
View File 

@@ -0,0 +1,11 @@
 
+# ihanoi: http://www.matematica.br!
 
+Discs: 3
 
+Size: 7
 
+Movements:
 
+A C ;
 
+A B ;
 
+C B ;
 
+A C ;
 
+B A ;
 
+B C ;
 
+A C ;