Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use HTML5 to achieve String Avoider Mini Game", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to use HTML5 to achieve String Avoider Mini Game" bar!

Move the mouse from the starting point of the game to the end position, the mouse movement process draws the String smooth curve of the moving track, the whole process can not collide with the boundary, from a technical point of view, its core is the algorithm of generating string line according to the mouse moving position, the game is the Flash version of ActionScript, here it is transformed into HTML5 version of JavaScript implementation, and add a design idea of customizable level function.

String connection I am a cache of 300point information array, mouse movement constantly adjust the new location information of 300points, each update will first set the new mouse point to the first element, the subsequent update of x points, calculate its angle with x Mel 1 points, update coordinates in this direction length of 1, so as to achieve the effect of smoothing the curve.

In addition to drawing string lines, there is also a technical point is to monitor collisions, the boundaries of the Flash game are line segments, so the first thing that comes to mind is the idea of line intersection. If you only need to traverse all the point segments to determine whether or not to intersect with the boundary defined by the game level, this way is more troublesome for irregular boundaries and the monitoring performance is not high.

Taking into account that we also need to provide user-defined game level function, we will use the way to monitor color transparency information, because the normal game scene does not need to be dynamically modified by users, so the boundary information can be cached in advance to ImageData memory, and our distance of 300 points is 1, monitoring only needs to be carried out at the base point.

The whole program uses the GraphView topology diagram component of HT for Web, and then adds a top-level brush to draw the curve through addTopPainter. When the curve meets the Node element, it is drawn red, otherwise it is drawn yellow. It listens to the interaction event of the GraphView topology diagram, sets the dirty flag of dirty in this event, and updates it according to the dirty flag when drawing. In this way, many transformations can be aggregated into an update. This is also the basic skill commonly used in graphics refresh drawing. At the same time, the visual editing function of the topology diagram is turned on through GraphView.setEditable (true), and the user 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 customizing the level.

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 = '600pxrabbit; view.style.height =' 400pxrabbit; 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 iTuno; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.