HTML5 game Createjs and "find a different" practice

Source: Internet
Author: User
Tags addchild

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.