Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tower Of Hanoi
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="mycanvas" width="3000" height="3000"></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
function towerOfHanoi()
{
}
towerOfHanoi.prototype.make_board=function(x1,y1,x2,y2)
{
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineWidth = 40;
context.strokeStyle = "red";
context.stroke();
}
towerOfHanoi.prototype.make_coll=function(x1,y1,x2,y2)
{
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
}
towerOfHanoi.prototype.make_text=function(x,y,txt)
{
context.font = "20pt Calibri";
context.fillStyle = "black";
context.fillText(txt,x,y);
}
towerOfHanoi.prototype.make_roundedRec=function(x,y,w,h,color)
{
context.beginPath();
context.moveTo(x,y);
context.quadraticCurveTo(x, y, x+w, y);
context.quadraticCurveTo(x+w+10, y+h/2, x+w, y+h);
context.quadraticCurveTo(x+w/2, y+h, x, y+h);
context.quadraticCurveTo(x-10, y+h/2, x+1, y);
context.lineWidth = 4;
context.strokeStyle = color;
context.fillStyle = color;
context.fill();
context.stroke();
}
var obj=new towerOfHanoi();
var coll_det=[
{x1:438, y1:400, x2:438, y2:780},
{x1:875, y1:400, x2:875, y2:780},
{x1:1313, y1:400, x2:1313, y2:780}
];
var text_det=[
{x:430, y:360, txt:"A"},
{x:865, y:360, txt:"B"},
{x:1304, y:360, txt:"C"}
];
var box_det=[
{x:300, y:660, w:300, h:120, color:"orange"},
{x:330, y:555, w:250, h:100, color:"blue"},
{x:350, y:470, w:200, h:80, color:"green"}
];
obj.make_board(50,800,1800,800);
for(var i=0; i<3; ++i)
obj.make_coll(coll_det[i].x1, coll_det[i].y1, coll_det[i].x2, coll_det[i].y2);
for(var i=0; i<3; ++i)
obj.make_text(text_det[i].x, text_det[i].y, text_det[i].txt);
for(var i=0; i<3; ++i)
obj.make_roundedRec(box_det[i].x, box_det[i].y, box_det[i].w, box_det[i].h, box_det[i].color);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.