HTML5-based WebGL design 3D game for Nottingham

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

Http://hightopo.com/demo/hanoi_20151106/index.html

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

Http://hightopo.com/demo/hanoi_20151106/index.html

var barnum = 5, //  Disc number     cylinderheight = barnum  * 20 + 40, //  Cylinder Height     barrelminoradius  = 50 , //  Disc Maximum outer radius     barrelIRadius = 10, //  disc inner radius      poorRadius = 20, //  Disc Outer RADIUS difference value     barrelmaxoradius =  barrelminoradius + barnum * poorradius,    barrelheight =  20, //  Disc height     barPadding = 20, //  gap between cylinders      floorx = barrelmaxoradius * 6 + barpadding * 4, //   Chassis length     floorY = 20, //  chassis height     floorz =  2 * barrelMaxORadius + barPadding * 2, //  Chassis Width      //  Cylinder Set &NBSP;&NBSP;&Nbsp; positions = [        {             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 = [], //   Disc move sequence set     //  animation parameters     params = {         delay: 10,        duration:  500,        easing: easing[' EaseBoth ']     };/** *  Initialization Program  * */function init () {    datamodel =  new ht. Datamodel ();     g3d = new ht.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 ( PI/360*60)]);    //  initialize node     initnodes ();     Moveanimation ();} /** *  Construction Game Move Queue  * diskquantity: Number of discs  * positiona: Start  * positionb: Transit point  * positionc: End  * */function buildrunorder (diskquantity, positiona,  Positionb, positionc) {    if  (diskquantity == 1)  {         runorder.push ([Positiona, positionc]);    }  Else {        buildrunorder (diskquantity - 1,  POSITIONA,&NBSP;POSITIONC,&NBSP;POSITIONB);         buildrunorder (1, &NBSP;POSITIONA,&NBSP;POSITIONB,&NBSP;POSITIONC);         buildrunorder (DISKQUANTITY&NBsp;- 1, positionb, positiona, positionc);    }}/** *  Mobile Animation  * positiona: Start  * positionc: End point  * */function moveanimation (positionA,  Positionc) {    if (!positiona) {        var  Poses = runorder.shift ();         if (!poses) {             settimeout (reset, 500);         }else{             Moveanimation (Positions[poses[0]], positions[poses[1]);         }     }else {        var barrel =  positiona.barrels.pop ();        var position =  POSITIONC.CYLINDER.P3 (), &NBSP;&NBsp;          barpos = barrel.getposition3d ();         position[1] = position[1] + floory +  barrelHeight * positionC.barrels.length - cylinderHeight / 2;         setpolylinepoints (polyline, barpos, position);         params.action = function  (v, t)  {             var length = g3d.getlinelength (polyline),                 offset =  g3d.getlineoffset (POLYLINE,&NBSP;LENGTH&NBSP;*&NBSP;V),                 point = offset.point,                 px = point.x,                 py = point.y,                 pz = point.z;    &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;BARREL.P3 (PX,&NBSP;PY,&NBSP;PZ);         };        params.finishFunc =  function  ()  {             PositionC.barrels.push (barrel);             var  poses = runorder.shift ();             if  (!poses)  {                 moveanimation ();             } else {                 moveanimation (positions[poses[0]],  POSITIONS[POSES[1]]);            }         };        anim = ht. Default.startanim (params);    }}/** *  reset Game  * */function reset () {     if (positions[0].barrels.length == 0) {         positions[0].barrels = positions[2].barrels;    }     positions[2].barrels = [];    for (var i = 0, len  = positions[0].barrels.length; i < len; i++) {         var pos =&nBSP;POSITIONS[0].CYLINDER.P3 ();        pos[1] = pos[1]  + floory + i * barrelheight - cylinderheight / 2;   &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;POSITIONS[0].BARRELS[I].P3 (POS);    }     buildrunorder (BARNUM,&NBSP;0,&NBSP;1,&NBSP;2);     settimeout (MoveAnimation,  500);} /** *  initialization Node  * */function initnodes () {    //  chassis      floor = createnode ([0, floory / 2, 0], [floorx, floory,  floorz]). S ({         ' shape3d ':   ' box ',          ' 3d.movable ':  false    });     //  Create pillars     for (var i = 0, len = 3; i  < len; i++) {&Nbsp;       positions[i].cylinder = createnode (Positions[i]. Position, [20, cylinderheight, 20], floor). S ({              ' shape3d ':   ' cylinder ',              ' Shape3d.color ':  ' #E5BB77 ',              ' 3d.movable ':  false        });     }    //  Create disc     createbarrels (barnum,  Positions[0].cylinder);    //  Create disc run track     polyline =  New ht. 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  * */function setpolylinepoints (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&NBSP;+&NBSP;60},&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;{X:&NBSP;TO[0],&NBSP;Y:&NBSP;TO[2],  e: cylinderheight},        {x: to[0], y: to[ 2], e: to[1]}    ]);     return polyline;} /** *  Create disc  * barnum: Number of discs  * host: Adsorption node  * */function createbarrels ( Barnum, host) {    //  disc initial x position     var pos =  HOST.P3 ();     for (var i = 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 &NBSP;*&NBSP;P3: node Location  *  S3: Node size  * host: Adsorption node  * */function createnode (p3, s3, host) {     var node = new ht. Node ();     node.p3 (p3); &NBSP;&NBSP;&NBSP;&NBSP;NODE.S3 (S3);     Node.sethost (host); &NBSP;&NBSP;&NBSP;&NBSP;NODE.S ({         ' wf.visible ':  ' selected ',         ' wf.color ':  ' #FF6B10 ',          ' wf.width ': 2,         ' Wf.short ':  true    });     datamodel.add (node); &NBSP;&NBsp;  return node;} /** *  Create hollow cylindrical &NBSP;*&NBSP;P3: Barrel position &NBSP;*&NBSP;S3: Barrel size  * oradius: Barrel od  *  Iradius: Drum inner diameter  * host: Adsorption node  * */function createbarrel (p3, s3, oradius,  Iradius, host) {    return createnode (p3, s3, host). S ({          ' Shape3d ':   ht. Default.createringmodel ([            oradius,  1,            oRadius, 0,             iRadius, 0,             iRadius, 1,         &NBSP;&NBSP;&NBSP;&NBSP;ORADIUS,&NBSP;1&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;],&NBSP;NULL,&NBSP;20, &NBSP;FALSE,&NBSP;FALSE,&NBSP;70)     });} 

Http://hightopo.com/demo/hanoi_20151106/index.html

HTML5-based WebGL design 3D game for Nottingham