HTML5 game Createjs and "find a different" practice

Today to introduce a small framework of H5 games, Createjs, I believe that many people have been exposed. The first simple introduction of the next Createjs:createjs for the Createjs library, can be said to be a HTML5 game development engine.

Createjs includes five tools: Easeljs: Drawing for Sprites, animations, vectors, and bitmaps, creating an interactive experience on the HTML5 Canvas, including Multitouch, while providing a "Show list" feature in Flash. TWEENJS: A simple engine for creating "motion tweens" in Flash, which produces a continuous change of numbers or non-digital effects. Soundjs: An audio playback engine that can select the audio playback mode based on browser performance. The audio file is used as a module and can be loaded and uninstalled at any time. Prloadjs: help you to simplify the pre-loading of site resources, whether loading content is graphics, video, sound, JS, data ... Pxloadr a JavaScript library for pre-loading Web resources that can load any type of file, such as pictures, audio, and more. Pxloader can also help you to specify the order in which resources are loaded, in addition to helping you monitor the progress of the resource load and capture the "load complete" event. You can even load resources by priority grouping. So today we mainly talk about is Easejs, and comes with a before in the circle of friends very fire "find different" as a practical exercise. First introduce the next game: Then the game is very simple to pull, that is, in a region of different colors of the tile, which has a piece with other colors, the user click on this will be a point and enter the next level. So the idea of the game is not difficult, we use Easejs to do, on the code:

<! DOCTYPE public  "-//W3C//DTD XHTML 1.0 transitional//en" http://
The code is HTML content, which introduces the Easeljs module, which is good for direct introduction. (Here we only quoted Easejs this component class library, in fact, Createjs function is very powerful, itself is a H5 game engine)
Then we wrote the JS for two pieces, one is app.js, the other is rank.js. Where Rank.js is a constructed instance, which is the method owned by each tile, we enclose it in this instance. App.js for the specific execution of the main thread JS.
First, Rank.js code.
functionRect (n,color) {Createjs. Shape.call ( This);//will Createjs. All of shape's methods are passed in as parameters. This. Setrecttype =function(type) {//constructing the Setrecttype method  This. _recttype =type;Switch(type) { Case1:     This. SetColor ("#" +color[0]+color[1]+color[2]+color[3]+color[4]+color[5]);  Break;  Case2:    varM=1.9-N/9; This. SetColor ("#" +parseint (color[0]/m) +parseint (color[1]/m) +parseint (color[2]/m) +parseint (color[3]/m) +parseInt ( color[4]/m) +parseint (color[5]/m));  Break; }}  This. SetColor =function(colorstring) { This. Graphics.beginfill (colorstring);  This. Graphics.drawrect (0,0,400/n-5,400/n-5);  This. Graphics.endfill (); }     This. Getrecttype =function (){    return   This. _recttype; }     This. Setrecttype (1);} Rect.prototype=NewCreatejs. Shape ();//constructs a Rect object, inherits all Createjs methods, and the method we created earlier
In the Rank.js code, all the instances we build should have methods, and then in App.js we write the main thread:
varStage=NewCreatejs. Stage ("Gameview"); Createjs. Ticker.setfps (30); Createjs. Ticker.addeventlistener ("Tick", stage);vargameview=NewCreatejs. Container (); Stage.addchild (Gameview);varN=2,num=1;varTimer = 16;vartime=$ ("#time");functionStop () {varOve = ' <div style= ' 9999px;height:9999px;z-index:99;opacity:0.6;background: #000; " ></div> ', over= ' <div style= ' position:absolute;top:200px;left:200px;font-size:20px;height:500px;width:200px;z-index:999 ' id= "Over" > Time to!!!!!! </div> '; $("HTML"). Append (ove); $("HTML"). append (over);} T= SetInterval (function() {Timer--; if(timer<0) {stop ();    Cleartimeout (t); }    Else{time.html (timer); }}, 1000);functionAddrect () {varCl=[parseint (Math.random () *10), parseint (Math.random () *10), parseint (Math.random () *10), parseint (Math.random () *10 ), parseint (Math.random () *10), parseint (Math.random () *10)]; varcolor =cl; varX =parseint (Math.random () *N); varY =parseint (math.random () *N);  for(varindexx=0;indexx<n;indexx++){         for(varindexy=0;indexy<n;indexy++){        varR =NewRect (N,color);        Gameview.addchild (R); R.x=Indexx; R.y=indexy; if(r.x = = x&& r.y==y) {R.setrecttype (2); } r.x=indexx* (400/n); r.y=indexy* (400/n);if(R.getrecttype () = = 2 &&timer>=0) {R.addeventlistener ("Click",function(){        if(n<7) {++N;}        Gameview.removeallchildren (); $("#int"). HTML (num++);        Addrect ();        }); }}}}addrect ();
Because the game is simple, app.js function is very good understanding, the main role for the player to select the target block, build a new layer.
HTML5 game Createjs and "find a different" practice