ikr7/index.html

## index.html
<!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>

## main.js
'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();
	<!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();