Skip to content

Instantly share code, notes, and snippets.

@ikr7
Created December 12, 2015 12:44
Show Gist options
  • Save ikr7/bf962ac8120332daa626 to your computer and use it in GitHub Desktop.
Save ikr7/bf962ac8120332daa626 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
canvas {
background: #DEF;
}
</style>
</head>
<body>
<h1>Randomized `Tower of Hanoi`</h1>
<p>
Press G / H / J to select disc, then press G / H / J to move disc.
</p>
<p>
<label for="disc_amount">Discs:</label>
<input type="number" id="disc_amount" value="8" min="1" autocomplete="off">
<input type="button" id="init" value="Restart">
</p>
<canvas></canvas>
</body>
<script src="./main.js"></script>
</html>
'use strict';
var WIDTH = 540,
HEIGHT = 220;
var canvas = document.querySelector('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
var context = canvas.getContext('2d');
context.lineWidth = 3;
document.querySelector('input#init').addEventListener('click', function () {
init();
});
var init = function () {
var DISC_AMOUNT = parseInt(document.querySelector('input#disc_amount').value, 10);
var poles = [[], [], []];
var poleSelected = false;
var selectedPole;
var congratulated = false;
for (var i = 1; i <= DISC_AMOUNT; i++) {
poles[Math.floor(Math.random() * poles.length)].unshift(i);
}
var move = function (from, to) {
if (poles[from].length <= 0) {
return;
}
if (poles[from][poles[from].length - 1] > poles[to][poles[to].length - 1]) {
return;
}
var targetDisc = poles[from].pop();
poles[to].push(targetDisc);
};
var isFinished = function () {
var finished = false;
for (var i = 0; i < poles.length; i++) {
if (poles[i].length === DISC_AMOUNT) {
finished = true;
}
}
return finished;
};
document.addEventListener('keyup', function (e) {
var index = [71, 72, 74].indexOf(e.keyCode);
if (index < 0) {
return;
}
if (poleSelected) {
move(selectedPole, index);
if (isFinished() && !congratulated) {
alert('Congratulations!');
congratulated = true;
}
poleSelected = false;
} else if (poles[index].length !== 0) {
selectedPole = index;
poleSelected = true;
}
draw();
});
var draw = function () {
context.clearRect(0, 0, WIDTH, HEIGHT);
for (var i = 0; i < poles.length; i++) {
var x = i * (WIDTH / poles.length) + (WIDTH / poles.length / 2);
context.beginPath();
context.moveTo(x, 100);
context.lineTo(x, HEIGHT);
context.stroke();
for (var j = 0; j < poles[i].length; j++) {
context.fillText(poles[i][j], x + poles[i][j] * 5, HEIGHT - j * 10 - 5);
context.beginPath();
context.moveTo(x - poles[i][j] * 5, HEIGHT - j * 10 - 5);
context.lineTo(x + poles[i][j] * 5, HEIGHT - j * 10 - 5);
if (poleSelected && i === selectedPole && j === poles[i].length - 1) {
context.strokeStyle = '#f00';
}
context.stroke();
context.strokeStyle = '#000';
}
}
};
draw();
};
init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment