Design of Tower of Hanoi 3D game based on HTML5 WebGL_PHP tutorial

Design the Tower of Hanoi 3D game based on HTML5 WebGL

Here we will construct an HTML5 JavaScript based on HT for Web to implement the Tower of Hanoi game.

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

For the Tower of Hanoi game rules and recursive algorithm analysis, please refer to http://en.wikipedia.org/wiki /Tower_of_Hanoi.

Now that you know the rules and algorithms of the Tower of Hanoi, start creating elements now. It is not a problem to create the chassis and 3 pillars using the existing 3D template of HT for Web (http://www.hightopo.com). The problem is to create several hollow disks. The initial idea 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 a disk. After many attempts and consulting the relevant API documents, I found that the cylinder has no thickness. Changing the method is not feasible.

Later, I was inspired by the WebGL application of custom 3D model in HT for Web (http://www.hightopo.com/blog/381.html). The formation of the disk is a rectangle on the xy plane. , generated based on one rotation of the y-axis. After consulting the relevant documents, I finally decided to use the ht.Default.createRingModel method to create the disk model, and then reference the created model through the shape3d attribute when creating the node.

In terms of logic implementation, the first-in-last-out principle of the stack is adopted to sequentially control the disks on the cylinder to ensure that the disks moved each time are the smallest of disc.

In terms of algorithm, a recursive algorithm is used. Through the recursive algorithm, the relocation process is recorded step by step, and then the heap principle is used 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, // 圆盘个数    cylinderHeight = barNum * 20 + 40, // 圆柱高度    barrelMinORadius  = 50, // 圆盘最大外半径    barrelIRadius = 10, // 圆盘内半径    poorRadius = 20, // 圆盘外半径差值    barrelMaxORadius = barrelMinORadius + barNum * poorRadius,    barrelHeight = 20, // 圆盘高    barPadding = 20, // 柱体之间的间隙    floorX = barrelMaxORadius * 6 + barPadding * 4, // 底盘长    floorY = 20, // 底盘高    floorZ = 2 * barrelMaxORadius + barPadding * 2, // 底盘宽    // 柱体集    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 = [], // 圆盘移动顺序集    // 动画参数    params = {        delay: 10,        duration: 500,        easing: Easing['easeBoth']    };/** * 初始化程序 * */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(2*PI/360*60)]);    // 初始化节点    initNodes();    moveAnimation();}/** * 构造游戏移动队列 * diskQuantity：圆盘个数 * positionA：起点 * positionB：中转点 * positionC：终点 * */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);    }}/** * 移动动画 * positionA：起点 * positionC：终点 * */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(),            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);    }}/** * 重置游戏 * */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  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        }));    }}/** * 创建节点 * p3：节点位置 * s3：节点大小 * host：吸附节点 * */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;}/** * 创建空心圆柱 * p3：圆桶位置 * s3：圆桶大小 * oRadius：圆桶外径 * iRadius：圆桶内径 * host：吸附节点 * */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

http://www.bkjia.com/PHPjc/1071442.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1071442.htmlTechArticleWebGL design of Tower of Hanoi 3D game based on HTML5 Here we will construct an HTML5 JavaScript based on HT for Web Implement the Tower of Hanoi game. http://hightopo.com/demo/hanoi_20151106/inde...