HTML5-based WebGL design of the tower 3D Game

HTML5-based WebGL design of the tower 3D Game

Here we will construct a HTML5 + JavaScript Based on HT for Web to implement the tower of death game.

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

For details about the game rules and recursive algorithms of tower of Hanoi, see http://en.wikipedia.org/wiki/tower_of_hanoi.

Now that you know the rules and algorithms of the tower, you can create elements. Using existing HT for Web (http://www.hightopo.com) 3D templates to create a chassis and three columns is not a problem, the problem is to create several hollow discs. The idea at the beginning was to create a cylinder, hide the upper and lower ends of the cylinder, and set the width of the cylinder to achieve the effect of the disc. After several attempts and reading the relevant api documentation, it is found that the cylinder has no thickness and the modification method is not feasible.

Later, inspired by the WebGL application (http://www.hightopo.com/blog/381.html) of HT for Web custom 3D models, the disc is formed by a rectangle on the xy plane, which is generated by rotating the Y axis for one week, by reading the relevant documents, we have decided to use ht. default. create a disc model using the createRingModel method, and then reference the created model through the shape3d attribute when creating a node.

In terms of logic implementation, the advanced post-release principle of stack is adopted to sequentially control the disc on the cylindrical disk to ensure that each moving disc is the smallest disc.

The algorithm uses a recursive algorithm to record the relocation process step by step, and then uses the heap principle to perform the relocation step by step.

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

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

Var barNum = 5, // Number of disks cylinderHeight = barNum * 20 + 40, // cylindrical height barrelMinORadius = 50, // maximum outer radius of the disc barrelIRadius = 10, // poorRadius = 20 in the disc, // barrelMaxORadius = barrelMinORadius + barNum * poorRadius, barrelHeight = 20, // barPadding = 20 in the disc height, // floorX = barrelMaxORadius * 6 + barPadding * 4, // chassis length floorY = 20, // chassis height floorZ = 2 * barrelMaxORadius + barPadding * 2, // chassis width // 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 movement sequence set // animation parameter params = {delay: 10, duration: 500, easing: easing ['easeboth ']};/*** initialization program **/function init () {data Model = 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 (2 * PI/360*60)]); // initialize the node initNodes (); moveAnimation ();} /*** construct the game mobile queue * diskQuantity: Number of disks * positionA: Starting Point * positionB: Starting Point * PositionC: terminal **/function buildRunOrder (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: ending point **/functio N 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 (), 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, 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); 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 = 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 **/function initNodes () {// chassis floor = createNode ([0, floorY/2, 0], [floorX, floorY, floorZ]). s ({'shape3d ': 'box', '3d. movable ': false}); // create a column for (var I = 0, len = 3; I <len; I ++) {positions [I]. cylinder = createNode (positions [I]. position, [20, cylinderHeight, 20], floor ). s ({'shape3d ': 'cylinder', 'shape3d. color ':' # E5BB77 ', '3d. movable ': false});} // create a disc createBarrels (barNum, positions [0]. cylinder); // create the disc running 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 + 60}, {x: to [0], y: to [2], e: cylinderHeight}, {x: to [0], y: to [2], e: to [1]}]); return polyline;}/*** create disk * barNum: Number of disks * host: adsorption node **/function createBarrels (barNum, host) {// The initial x position of the disc 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 * p3: node location * s3: node size * host: adsorption node **/function createNode (p3, s3, host) {var node = new ht. 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); return node;}/*** create a hollow cylinder * p3: Position of the bucket * s3: size of the bucket * oRadius: outer diameter of the bucket * iRadius: diameter of the bucket * 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, oRadius, 1], null, 20, false, false, 70 )});}

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