Towers of Hanoi

For my AP Computer Science Principles class

by Eminence

HTML

<body>
  <canvas id="game" width="600" height="300">
    Canvas not supported
  </canvas>
  <div id="output"></div>
</body>

CSS

#game {
  border-style: solid;
}

JavaScript

var gameWindow = document.getElementById("game");
var out = document.getElementById("output");
var ctx = gameWindow.getContext("2d");
// Represents whether a block is currently picked up or not
var isBlockSelected = false;

var disks = [{
	x: 60,
  y: 220,
  width: 140,
  height: 30,
  color: "#45d23a",
  size: 1,
  draw: function(ctx) {
  	ctx.fillStyle = this.color;
    // fillRect(x, y, width, height)
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
},{
	x: 70,
  y: 190,
  width: 120,
  height: 30,
  color: "#27efef",
  size: 2,
  draw: function(ctx) {
  	ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
},{
	x: 80,
  y: 160,
  width: 100,
  height: 30,
  color: "#26a4f2",
  size: 3,
  draw: function(ctx) {
  	ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
},{
	x: 90,
  y: 130,
  width: 80,
  height: 30,
  color: "#2652f1",
  size: 4,
  draw: function(ctx) {
  	ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}];

var pegs = [{
	x: 50,
  y: 250,
  width: 500,
  height: 20,
  disks: [],
  draw: function(ctx) {
  	ctx.fillStyle = "#8B4513";
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
},{
	x: 120,
  y: 50,
  width: 20,
  height: 200,
  disks: [],
  draw: function(ctx) {
  	ctx.fillStyle = "#8B4513";
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}, {
	x: 290,
  y: 50,
  width: 20,
  height: 200,
  disks: [],
  draw: function(ctx) {
  	ctx.fillStyle = "#8B4513";
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}, {
	x: 460,
  y: 50,
  width: 20,
  height: 200,
  disks: [],
  draw: function(ctx) {
  	ctx.fillStyle = "#8B4513";
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}];

function init() {
	ctx.clearRect(0, 0, gameWindow.width, gameWindow.height);
	// Peg and Base rectangles
	for (var i = 0; i < pegs.length; i++) {
  	pegs[i].draw(ctx);
  }
  // Disk...