2d3d Maze games based on HTML5 's WEBGL implementation

In order to achieve a HTML5-based scene games, I use the HT for Web to implement, just 200 lines of code, I can implement the "first person" to operate the forward and backward back and forth, and achieve collision detection.

Let's take a look at the effect of the implementation: Http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision

or http://v.youku.com/v_show/id_XMzA5MzUzODc4NA==.html?spm=. a2h3j.8428770.3416059.1 video in the frame of the problem is my screen recorder problem, the actual operation will not have, it is recommended to use the above link to operate on their own

Play, mouse or touch screen can be, but I think the most convenient or operating keyboard Wsad control up and down around.

My idea is to lay out the scene first, the code is as follows:

Createht ([ -20, +], ' #E74C3C ');                  Createht ([ -100, -20, +], ' #1ABC9C ');                    Createht ([ -20, -100], ' #3498DB ');                   Createht ([ -100, -20, -100], ' #9B59B6 ');   Createcurve ([0, -20, 0]); Createcircle ();    

These are all custom functions, createht is a figure depicting the HT shape, there are four in the scene, so it is called four times, Createcurve is the yellow curve depicting the middle of the scene, and Createcircle is the outermost circle, because it is not an all-inclusive circle, so it is also a depiction.

HT is packaged with a component, Ht. Shape (shape), which can be drawn from a drawing based on a stroke, can be shape.setpoints (Pointsarray) to add all the points into the array, set to shape, and then through Setsegments () Set the segment array information, that is, the way to connect two points, in the Shape manual is highlighted, interested can refer to the HT for WEB Shape manual. Draw a function of one of the depicted points to look at:

 function  createht (p3, color) {shape = new  ht.                    Shape ();  SHAPE.S ({' shape.background ': null , ' shape.border.width ': Ten , ' Shape.border.color ' : Color, ' all.color ' : color}); Shape.settall (+ ); Shape.setthickness (5 ); shape.setpoints ([//Draw H {x:20, y:0 }, {x:20, Y:100}, {x:80, y:50 }, {x:80, y:0 }, {x:80, y:100 },//Draw T {x:120, y:0 } , {x:180, y:0 }, {x:150, y:0 }, {x:150, y:100 }]); shape.setsegments ([//Draw H 1,//MoveTo 2,// LineTo 1,//MoveTo 2,//LineTo 1,//MoveTo 2,//LineTo//Draw T 1,//MoveTo 2,//LineTo 1,//MoveTo 2//LINETO
                    
                     ]); SHAPE.P3 (p3); Datamodel.add (Shape); return 
                      shape;}  
                                 

Because the word "HT" has a lot of points to describe, the code looks a bit big, and if you see how to paint an incomplete circle with 20 lines of code to do it, and include styles, you'll be surprised:

Shape = new ht. Shape ();                SHAPE.S ({    ' shape.background ': null,    ' shape.border.width ': Ten,    ' shape.border.color ': ' #D26911 ' ,    ' all.color ': ' #D26911 '}); Shape.settall (0, -20, 0); shape.setthickness ( shape.p3); ); var r = $, for(var i=0; i<36; i++) {var angle = Math.PI * 2 * i/36; Shape.addpoint ({x:r * Math . cos (angle), Y:r * math.sin (angle)}); Datamodel.add (Shape); return shape;            

The scene is set up, and the next step in 3d is to display the position of "I" in 2d. First I have to set "I" is "first person roaming mode", directly G3d.setfirstpersonmode (true). The first person roaming mode essentially controls eye and center, and if no first person roaming mode is set, then the mouse or trackpad drag will rotate around center. Refer to the HT for WEB 3D manual for details.

Because HT 3D encapsulates two methods Geteye and Getcenter, the two methods are to get the location of the camera and the location of the target center point, the former as you can imagine that you have a camera on the head, where you go to the center of the shooting where, it is convenient to record your location The latter is the same as you look out, but here is not the same as our people, because people can see wide range, but this center is equivalent to your eyes and can not be rotated, is a point in front of the position is your gaze focus position.

Once we know Geteye and getcenter, we can get the current position and the line of sight:

G2d.addtoppainter (function(g) {    var eye = G3d.geteye (),    center = G3d.getcenter ();                            G.fillstyle = ' red ';    G.strokestyle = ' black ';    G.linewidth = 1; G.beginpath () G.arc (eye[0], eye[2],, 0, Math.PI * 2, true);//Draw a circle, and get the position of "I" in 3d in real time G.fill ( ); G.stroke (); G.strokestyle = ' black '; g.linewidth = 2; G.beginpath (); G.moveto (eye[0], eye[2 g.stroke ();}); 

But in the code we found that this method was only drawn once, if not always redraw, then the 2d interface "I" position and movement will not change, so we also listen to the changes in the 3d properties:

G3D.MP (function (e) {//) update the 2d interface in real time based on the position and sight of the "I" On 3d    (e.property = = = ' Eye ' | | e.property = = ' Center ') {//If the E attribute changes to get/ Seteye,get/setcenter, then redraw the 2d interface         G2d.redraw ();    });

In 2D, I can edit the entity, move its point, change the size of an element, and so on, as long as the elements are changed, then my crash test has to be updated:

function updateboundaries () {    boundaries = [];    Datamodel.each (function data) {//HT curve circle                      boundaries = Boundaries.concat (HT. Default.toboundaries (Data.getpoints (), data.getsegments ()));        Ht. Default.toboundaries the discontinuous curve into a graph3dview#setboundaries (BS) required parameter format     });     G3d.setboundaries (boundaries);//setboundary () can specify collision bounds}   

So what we're curious about is, how can we keep the collision detection when the drag element changes size?

HT has a listener event Adddatapropertychangelistener () for attribute changes, abbreviated to MD (), and when we drag the element, the underlying points of the entity is changed, So all we have to do is monitor whether points has been changed, and how to use this event can refer to the HT for WEB data Model manual

DATAMODEL.MD (function (e) {//data Property Change event        if (e.property = = = ' Points ') {//If the Data property changes to Getpoints/setpoints, update the boundary         updateboundaries ();    }});

2d3d Maze games based on HTML5 's WEBGL implementation