HTML5 String Avoider games,

HTML5 String Avoider games,

HTML5 version of the String Avoider game http://www.newgrounds.com/portal/view/300760 is quite simple and quite a test of patience, from the starting point of the game to move the mouse to the end position, the mouse movement process to draw a moving track of the String smooth curve, the whole process cannot hit the boundary. From a technical point of view, its core is to generate the String line algorithm based on the mouse movement position. This game is a Flash version written in ActionScript, here we will transform it into HTML5 JavaScript implementation and add a design idea that can customize the level function.

The String link is an array with 300 vertex information cached. When the mouse moves, the new position information of the 300 vertex is constantly adjusted. Each update, the new mouse is set to the first element, after updating the x point, the angle between the x point and the X-1 point is calculated, and the coordinates are updated at the position with the length of 1 in this direction, so that the smooth curve is achieved.

In addition to drawing the String line, there is a technical point is the Monitoring collision, the Flash game boundary is a line segment, so the first thought of the monitoring method is the line intersection ideas, the algorithm can refer to the http://en.wikipedia.org/wiki/Line%E2%80%93line_intersection, if the line segments between all points need to be traversed Based on the intersection idea of LineLine to determine whether the line segments defined by the game level are intersecting, this method is more troublesome for irregular boundaries, the monitoring performance is not high either.

Considering that we also need to provide users with the ability to customize game levels, we will adopt the method of monitoring color transparency information, because normal game scenarios do not need to be dynamically modified by users, therefore, the boundary information can be cached in the ImageData memory in advance, and the distance between our 300 points is 1. Monitoring only needs to be performed based on the points.

The whole program uses the GraphView topology component of HT for Web, and then adds the top-level paint brush to draw the curve through addTopPainter. When the curve hits the Node graph element, it is drawn in red; otherwise, it is drawn in yellow, listen to the interaction event of the GraphView topology, set the dirty flag of dirty in the event, and update it according to the dirty flag during painting, this method can be used to aggregate multiple transformations into one update, which is also a common basic technique for drawing refresh. You can also use GraphView. setEditable (true) to enable visual editing of the topology. You can change the shape information such as the position and rotation of the interface elements at any time, which is equivalent to the effect of a custom level.

All code and run effects: 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';document.body.appendChild(view);createNode(20, 20, 80, 40, 'rect');                createNode(200, 300, 80, 40, 'star');createNode(400, 100, 80, 40, '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);points[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);points[i].x = points[i - 1].x + length * Math.cos(angle);points[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});dataModel.add(node);return node;}