Hanoi Towers

Semester Project

by MariusNastasa

HTML

<html>
<body>
    <h1>
  Turnurile din Hanoi
      </h1>
      Introdu numarul de discuri:
      <input type="text" placeholder="AICI" id="disk">
      <button class="show-disks">Afiseaza discurile</button>
      <br>
      Dupa afisarea discurilor apasa:
      <button class="start-game">Start</button>
      <canvas id="myCanvas" height="350" width="600">Your browser doesn't support canvas</canvas>
      <div class="cnvs">
      <br>
      <hr>
        <div> Numarul de mutari: <span class="optimal-moves"></span></div>
        <ul class="moves">
        </ul>
      </div>
</body>
</html>

CSS

body{
background-color: grey;
}
h1 {
    font-family:verdana;
   color:	red;
   font-size:200%;
}

canvas {
    display: block;
    background-color: white;
} 

.cnvs { height: 300px; }
.show-disks {
    background-color: red;
    font-family:verdana;
    border: none;
    color: white;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;

}
.start-game {
    background-color: red;
    font-family:Comic Sans MS;
    color: white;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
}

JavaScript

(function () {

	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	var vturnY = 200;
	var vturnWidth = 13;
	var vturnHeight = 150;
	var vdiscHeight = 12;
	var primulDiskWidth = 113;
	var vdiscWidthFactor = 20;
	var timpTime = 1500;
	var turnA = {};
	turnA.disks = [];
	turnA.position = {};
	turnA.width = vturnWidth;
	turnA.height = vturnHeight;
	turnA.position.x = 100;
	turnA.position.y = 200;
	turnA.position.disks = [{x: 50,y: 340},{x: 60,y: 325},{x: 70,y: 310},];
	var turnB = {};
	turnB.disks = [];
	turnB.position = {};
	turnB.width = vturnWidth;
	turnB.height = vturnHeight;
	turnB.position.x = 300;
	turnB.position.y = 200;
	turnB.position.disks = [{x: 250,y: 340},{x: 260,y: 325},{x: 270,y: 310}];
	var turnC = {};
	turnC.disks = [];
	turnC.position = {};
	turnC.width = vturnWidth;
	turnC.height = vturnHeight;
	turnC.position.x = 500;
	turnC.position.y = 200;
	turnC.position.disks = [{x: 450,y: 340},{x: 460,y: 325},{x: 470,y: 310}];
	var diskCount;
	var turns = [];
	var callStack;
	var myTimer = null;

	function bindEvents() {
		var showDisksBtn = document.getElementsByClassName("show-disks")[0];
		var startGameBtn = document.getElementsByClassName("start-game")[0];

		showDisksBtn.addEventListener("click", showDisc);
		startGameBtn.addEventListener("click", start);
	}

	function initialize() {
		turns = [turnA, turnB, turnC];
		drawTurns();
		callStack = [];
	}

	function drawTurns() {
		for (var i = 0; i < turns.length; i++) {
			drawTurn(turns[i].position.x, turns[i].position.y, turns[i].width, turns[i].height);
		}
	}

	function drawTurn(x, y, width, height) {
		context.fillRect(x, y, width, height);
	}

	function getDisk(id) {
		return {
			id: id,
			color: "#" + Math.max(Math.floor(Math.random() * 999999) + 1, 100000),
			height: vdiscHeight,
			width: (primulDiskWidth - (id * vdiscWidthFactor)),
			position: {}
		};
	}

	function getDiskCount() {
		return...