HTML5 version of String Avoider mini-game

HTML5 version of the string avoider small game http://www.newgrounds.com/portal/view/300760 pretty simple also quite test patience, from the game starting point to move the mouse to the end position, The mouse movement process to draw a moving trajectory of the string smoothing curve, the entire process can not collide to the boundary, from a technical point of view, its core is based on the mouse movement position to generate a string line algorithm, the game is written in ActionScript Flash version, This is transformed into a HTML5 version of the JavaScript implementation, and adds a design idea to customize the level function.

String line I was the cache of 300 point information array, the mouse movement constantly adjust the new location information of 300 points, each update to the new mouse point set to the first element, the subsequent update x point, calculate its angle with the x-1 point, in this direction length 1 position update coordinates, This achieves the effect of smoothing the curve.

In addition to drawing a string line there is also a technical point is to monitor the collision, the flash game is the boundary of the line line, so the first thought of the monitoring method is the line intersection idea, the algorithm can refer to http://en.wikipedia.org/wiki/Line%E2%80% 93line_intersection, if the intersection idea of Lineline only need to traverse all points between the line segments, to determine whether the game level defined boundary crossing, but this way to irregular boundaries is more cumbersome, monitoring performance is not high.

Considering that we also need to provide the user can DIY custom game level function, we will adopt the way of monitoring color transparency information, because the normal game scene without user dynamic modification, so the boundary information can be cached in imagedata memory, and our 300 points distance is 1, Monitoring can only be done by point.

The entire program uses the Graphview topology component of the HT for Web, and then draws the curve on top of the addtoppainter by adding a front brush, and when the curve touches the node element it is drawn red, otherwise it is painted yellow. Listen to the interaction event of the Graphview topology, set the dirty flag of dirty in this event, and update it according to the dirty flag when drawing, in this way the multiple transformations can be finally aggregated into one update, which is also the basic technique commonly used in drawing refresh drawing. At the same time, through Graphview.seteditable (true) to open the topology map of the visual editing function, users can change the interface element location and rotation of the shape information, equivalent to the effect of the custom level.

All code and run effects are as follows: http://v.youku.com/v_show/id_XODU4NzY5MzQ0.html

function init () {Datamodel = new ht.                   Datamodel (); Graphview = new Ht.graph.GraphView (Datamodel); Graphview.handlescroll = function () {};graphview.seteditable (true); Graphview.setpannable (false) view = Graphview.getview (); view.style.left = ' 10px '; view.style.top = ' 10px '; view.style.width = ' 600px '; view.style.height = '                400px '; view.style.background = ' Black ';d ocument.body.appendChild (view); CreateNode (+, +, +, ' rect '); CreateNode (+, +, +, ' star '); CreateNode (+, +, +, ' oval '); Createshape (); length = 1;count = 300;points = [ ];for (var i=0; i<count; i++) {Points.push ({x:0, y:0});} View.addeventlistener (' MouseMove ', function (e) {var point = GRAPHVIEW.LP (e);p oints[0].x = Point.x;points[0].y = Point.y ; for (var i = 1; i < count-1; i++) {var angle = math.atan2 (POINTS[I].Y-POINTS[I-1].Y, points[i].x-points[i-1] . x);p oints[i].x = points[i-1].x + length * math.cos (angle);p oints[i].y = points[i-1].y + length * Math.Sin (angle);} if (imageData) {hit = False;for (var i = 0; i < count; i++) {var x = Math.floor (points[i].x); var y = Math.floor (Points[i]                        . y); var index = (Y * graphview.getwidth () + x) * 4;IF (Imagedata.data[index+3]!== 0) {hit = True;break;}} } graphview.redraw ();});                Dirty = true;                ImageData = NULL;GRAPHVIEW.MI (function (e) {dirty = true;});    Graphview.addtoppainter (function (g) {if (dirty) {dirty = false;                                                                                                                                              Hit = False;imagedata = G.getimagedata (0, 0, graphview.getwidth (), Graphview.getheight ()); Ht.  Default.calllater (Graphview.redraw, Graphview); }else{g.beginpath (); g.linewidth = 3;g.strokestyle = hit?                   ' Red ': ' Yellow '; G.moveto (points[0].x, POINTS[0].Y); for (var i = 1; i < count-1; i++) {G.lineto (points[i].x, points[i].y);}                        G.stroke (); }});} function CreateNode (x, Y, W, H, shape) {var node = new ht. Node (); Node.setrect (x, Y, W, h); Node.s ({' Shape ': shape, ' select.width ': 0});d atamodel.add (node); return node;}

HTML5 version of String Avoider mini-game