Web Breakthrough Game (Riddle Webgame) The principle and practice of--H5 scraping card

Objective:
    Prior to writing a Web page game (similar to Riddle game), in addition to the hope that you can experience my game outside. Also willing to share in the process of writing this web game, learn some knowledge.
    For scraping the card, presumably everyone is familiar with, also like this way. You may be curious how it is implemented?
    This article will explain its principle, and combine concrete examples to demonstrate how to use the H5 canvas to achieve the effect of the scratch-like card.

Display effect:
    Web Entry game entrance ( please hit me fiercely, ^_^) http://magic.mmxfgame.com.
    H5 scraping the case of the card from the sixth level--Visit the home of the east unbeaten.

　　

    This technical point is carried out around the scratch card, which will be described in detail below.

Scraping card principle:
    Scratch card technology is nothing more than a cover, wipe the place is to cover, and restore the original image under the cover.
    Let's talk about the drawing mode supported by H5, and then introduce the next key processing and drawing API.
    Drawing mode
    The context handle of a canvas has a property:globalcompositeoperation, which represents the combination of graphs.
    When we set it to destination-out, it means to draw only the part of the original shape that does not overlap the new shape . In fact, this sentence is somewhat obscure, it is difficult to let people understand, and even misunderstanding. Rather than directly on the code, concise and clear, ^_^, not the code is bullying.
    Reinforce the concept by combining a simple scratch card case.

　　

    The original figure is equivalent to the silver-gray portion of the scratch card.
    The new graph is equivalent to the newly drawn area/path when the user/player is scraping.
    The obscured picture is equivalent to the silver-gray portion of the lottery information.
    When the original and new shapes overlap, the part that is scratched is the intersection of the two becomes transparent. Then the underlying image of the original graphic mask is displayed, which is the lottery part.
    So, the original figure is to cover the image, the new figure is the user scraping area/path.
    After understanding these concepts, then the implementation of the scraping card is very simple, almost can be said to be very navie.

Game Specific Analysis:
    The game actually uses two identical pictures, one for the original picture (xyz1.jpg) and the other for the secret key Answer (Xyz2.jpg).
    setting of the underlying image
    div element, add the canvas element.

    <div id= "Id_dongfangbubai_canvas" >        <canvas id= "Game_canvas" width= "480px" height= "333px" ></ Canvas>    </div>

    Then look at the CSS style settings.

    #id_dongfangbubai_canvas {        background-image:url (' http://www.xxx.com/img/xyz2.jpg ');        width:480px;        height:333px;    }

    The background image of the answer is the same size as the canvas and is set to the bottom.
    Picture loading in the HTML5
    JS in the picture loading the asynchronous process, it takes time, so remember that the picture is not finished loading before the operation.

    var maskedimage = new Image ();    Set Picture link    maskedimage.src = "http://www.xxx.com/img/xyz1.jpg";    Set the callback function    maskedimage.onload = function () {        gray.drawimage (maskedimage, 0, 0) after loading the picture;        Gray.globalcompositeoperation = "Destination-out";    }

    This enables the rendering of the masking image and successfully sets the drawing mode.
    Event Monitoring
    On the mobile side, we need to focus on Touchmove event operations. Again, let's focus on the positioning of the coordinates.

　　

    The blue area represents the display area of the mobile device, and the green area is the parent of the canvas canvas, which is out of the screen. The light purple part is a canvas canvas. Suppose our fingers touch the position of the blue dot, the red line is the value of "E.targettouches[0].clientx", the black line is "Document.body.scrollLeft" or "E.pagex", and the Yellow line represents Mycanvas.offsetleft.
    So the final axis x conversion formula:

var x = E.targettouches[0].clientx + document.body.scrollleft-mycanvas.offsetleft.

    The Ordinate y conversion formula is similar:

var y = e.targettouches[0].clienty + document.body.scrolltop-mycanvas.offsettop;

    The specific event handling is as follows:

    var MyCanvas = document.getElementById (' Game_canvas ');    var ctx = Mycanvas.getcontext (' 2d ');    var offsetx = mycanvas.offsetleft;    var offsety = mycanvas.offsettop;    Mycanvas.addeventlistener (' Touchmove ', function (e) {        e.preventdefault ();        Ctx.beginpath ();        Ctx.fillstyle = "#f00";        if (e.changedtouches) {            e=e.changedtouches[e.changedtouches.length-1];        }        var x = E.clientx + document.body.scrollleft-mycanvas.offsetleft;        var y = e.clienty + document.body.scrolltop-mycanvas.offsettop;        Draw a small circle to simulate the scraping effect of the finger        ctx.arc (x, y, 0, Math.PI * 2);        Ctx.fill ();        Ctx.closepath ();    });

    Note: The area/path is drawn, and the cover layer becomes transparent, and the bottom part of the answer is naturally revealed.

Summarize:
    The implementation principle and technical point of scraping card is actually very simple and clear. The code is a mere dozens of lines, very clear, but the knowledge points involved in a lot. For me, the design of the topic and the implementation of the principle are improved.
    Finally, hope the game, everyone can like.

Public Number & Games sites:
Personal public Number: Wooden purpose H5 game world

　　

Personal Game Folio site (still under construction ...): www.mmxfgame.com, also direct IP access : http://120.26.221.54/. 

Web Breakthrough Game (Riddle Webgame) The principle and practice of--H5 scraping card