HT for Web 3D Game Design-Hanoi (Towers of Hanoi)

Source: Internet
Author: User
Tags polyline

Here we will construct a HT for web-based Html5+javascript to implement the Hanoi game.

Hanoi game rules and recursive algorithm analysis please refer to Http://en.wikipedia.org/wiki/Tower_of_Hanoi.

Knowing the rules and algorithms of Hanoi, we now start creating elements. Creating a chassis and 3 pillars with the HT for WEB (http://www.hightopo.com) existing 3D template is not a problem, the problem is to create several hollow discs. The first idea is: Create a cylinder, the upper and lower ends of the cylinder is hidden, set the width of the column to achieve the effect of the disk, after several attempts and consult the relevant API documentation, found that the cylinder is no thickness, the method is not feasible.

Later, the WebGL application (http://www.hightopo.com/blog/381.html) of the HT for Web custom 3D model was inspired by the formation of a disc in a rectangle on the XY plane, generated by the rotation of the y-axis one week, by consulting the relevant documentation, The most general decision to adopt HT. Default.createringmodel method to create a disk model, and then create a good model by referencing the Shape3d property when creating node.

In the logic realization, using the advanced post-out principle of the stack, the disk on the cylinder is controlled sequentially, ensuring that each moving disk is the smallest disc.

In the algorithm, using recursive algorithm, through the recursive algorithm, the relocation process step by step record down, and then use the principle of the heap to perform a step-by-step relocation work.

Http://v.youku.com/v_show/id_XODcwMTk4MDI4.html

varBarnum = 5,//Number of discsCylinderheight = Barnum * 20 + 40,//Cylinder HeightBarrelminoradius = 50,//maximum outer radius of discBarreliradius = 10,//inner radius of discPoorradius = 20,//outer radius difference of discBarrelmaxoradius = Barrelminoradius + Barnum *Poorradius, Barrelheight= 20,//Disc HeightBarpadding = 20,//the gap between the cylindersFloorx = Barrelmaxoradius * 6 + barpadding * 4,//Chassis LengthFloory = 20,//High ChassisFloorz = 2 * Barrelmaxoradius + barpadding * 2,//Chassis Width    //Column Setpositions =[{barrels: [], Position: [-(2*barrelmaxoradius + barpadding), CYLINDERHEIGHT/2 + 1, 0]},{barrels: [], Position: [0, CYLINDERHEIGHT/2 + 1, 0]},{barrels: [], Position: [(2*barrelmaxoradius + barpadding), CYLINDERHEIGHT/2 + 1, 0]}], Runorder= [],//disk move sequence set    //Animation Parametersparams ={delay:10, Duration:500, easing:easing[' Easeboth ']    };/** * Initialization program **/functioninit () {Datamodel=Newht.    Datamodel (); G3d=NewHt.graph3d.Graph3dView (Datamodel); View=G3d.getview (); View.classname= ' main ';    Document.body.appendChild (view); Window.addeventlistener (' Resize ',function(e) {g3d.invalidate (); }, false); G3d.seteye ([0, Cylinderheight * 2, Floorx * sin (2*pi/360*60)]);//Initializing Nodesinitnodes (); Moveanimation ();}/** * Construct game Move queue * diskquantity: Number of Discs * Positiona: Starting point * positionb: Transit point * positionc: End point **/functionBuildrunorder (diskquantity, Positiona, positionb, positionc) {if(Diskquantity = = 1) {Runorder.push ([Positiona, Positionc]); } Else{buildrunorder (diskquantity-1, Positiona, Positionc, positionb); Buildrunorder (1, Positiona, positionb, Positionc); Buildrunorder (diskquantity-1, positionb, Positiona, Positionc); }}/** * Mobile animation * Positiona: Starting point * positionc: End point **/functionmoveanimation (Positiona, positionc) {if(!Positiona) {        varposes =Runorder.shift (); if(!poses) {setTimeout (Reset,500); }Else{moveanimation (positions[poses[0]], positions[poses[1]]); }    }Else {        varBarrel =PositionA.barrels.pop (); varPosition =positionC.cylinder.p3 (), Barpos=barrel.getposition3d (); position[1] = position[1] + floory + barrelheight * POSITIONC.BARRELS.LENGTH-CYLINDERHEIGHT/2;        Setpolylinepoints (polyline, barpos, position); Params.action=function(V, t) {varLength =g3d.getlinelength (polyline), offset= G3d.getlineoffset (polyline, Length *v), Point=offset.point, px=point.x, py=Point.y, PZ=point.z;        BARREL.P3 (px, py, PZ);        }; Params.finishfunc=function() {PositionC.barrels.push (barrel); varposes =Runorder.shift (); if(!poses)            {moveanimation (); } Else{moveanimation (positions[poses[0]], positions[poses[1]]);        }        }; Anim=ht.    Default.startanim (params); }}/** * Reset the game **/functionReset () {if(Positions[0].barrels.length = = 0) {positions[0].barrels = positions[2].barrels; } positions[2].barrels = [];  for(vari = 0, len = positions[0].barrels.length; i < Len; i++){        varpos = positions[0].cylinder.p3 (); pos[1] = Pos[1] + floory + i * BARRELHEIGHT-CYLINDERHEIGHT/2; positions[0].BARRELS[I].P3 (POS); } buildrunorder (Barnum,0, 1, 2); SetTimeout (Moveanimation,500);}/** * Initialize node **/functioninitnodes () {//ChassisFloor = CreateNode ([0, FLOORY/2, 0], [Floorx, Floory, Floorz]). S ({' Shape3d ': ' Box ',        ' 3d.movable ':false    }); //Create pillars     for(vari = 0, len = 3; i < Len; i++) {Positions[i].cylinder= CreateNode (Positions[i].position, [Cylinderheight, 20], floor). S ({' Shape3d ': ' Cylinder ',            ' Shape3d.color ': ' #E5BB77 ',            ' 3d.movable ':false        }); }    //Creating DiscsCreatebarrels (Barnum, Positions[0].cylinder); //Create a disk run trackPolyline =Newht.    Polyline (); Polyline.setsegments ([1, 2, 4, 2]); POLYLINE.S ({' Shape.background ':NULL,        ' Shape.border.color ': ' Rgba (0,0,0,0) ',        ' Shape.border.gradient.color ': ' Rgba (0,0,0,0) ',        ' Shape.border.pattern ': [20, 10],        ' Shape3d.resolution ': 50    }); Datamodel.add (polyline);}/** * Set route node **/functionsetpolylinepoints (Polyline, from, to) {polyline.setpoints ([{x:from[0], y:from[2], e:from[1]}, {x:from[0], y:from[2], e:cylinderheight}, {x:from[0], y:from[2], E:cylinderheight + 60}, {x:to[0], y:to[2], E:cylinderheight + 60}, {x:to[0], y:to[2], e:cylinderheight}, {x:to[0], y:to[2], e:to[1]}    ]); returnpolyline;}/** * Create disc * Barnum: Disk number * Host: Adsorption node **/functionCreatebarrels (Barnum, host) {//Disc initial x position    varpos =host.p3 ();  for(vari = barnum, j = 0; i > 0; I--, J + +) {pos[1] = Barrelheight * j +floory; positions[0].barrels.push (Createbarrel (POS, [1, Barrelheight, 1], Barrelminoradius + i*Poorradius, Barreliradius, host). S ({' Shape3d.color ': Randomcolor (),' 3d.movable ':false        })); }}/** * Create node * P3: Node location * S3: Node Size * Host: Adsorption node **/functionCreateNode (P3, S3, host) {varnode =Newht.    Node ();    NODE.P3 (p3);    NODE.S3 (S3);    Node.sethost (host); NODE.S ({' Wf.visible ': ' Selected ',        ' Wf.color ': ' #FF6B10 ',        ' Wf.width ': 2,        ' Wf.short ':true    });    Datamodel.add (node); returnnode;}/** Create Hollow Cylinder * P3: Barrel position * S3: Barrel Size * Oradius: Barrel Outside diameter * Iradius: Barrel Inner Diameter * Host: Adsorption node **/functionCreatebarrel (P3, S3, Oradius, Iradius, host) {returnCreateNode (P3, S3, host). S ({' Shape3d ': Ht. Default.createringmodel ([Oradius,1, Oradius,0, Iradius,0, Iradius,1, Oradius,1        ], NULL, 20,false,false, 70)    });}

HT for Web 3D Game Design-Hanoi (Towers of Hanoi)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.