Self-taught Easeljs code that you write by not stepping on the white block game

Source: Internet
Author: User
Tags addchild

Mainly based on-------easeljs-0.7.1.min.js-----to make this game

Idea: The main idea is to act on the unit binding can click on the row to select the move the outermost container to continue binding can click the row of the next line or end the game


HTML page Layout

<script src= "Js/easeljs-0.7.1.min.js" ></script><script src= "Easeljs/drawzfx.js" ></script ><body><div class= "ABS" id= "Time" >0</div> <section class= "Section-box" > <canvas ID    = "Canvasid" width= "height=" > does not support canvas elements </canvas> <a href= "" class= "Remove" > Restart </a> </section></body>

Css

    *{margin:0;padding:0}    body{         font-family:  "Microsoft Ya Black";    }    .section-box{         width: 320px;         height: 480px;        margin: 0 auto;         text-align: center;    }    .abs{         position: absolute;         width: 100%;        text-align: center;         font-size: 2rem;         font-weight: bold;        color:  #f00;     }   &nBSP;. remove{        display: inline-block;         width: 100px;        height: 26px;         text-align: center;         line-height: 26px;        background:  #f00;         color:  #fff;     }

Drawzfx.js file------  This file mainly creates rectangular squares   white and black---

/********************** draw black and white rectangle **************************************/function drawzfx (w,h) {     createjs. Shape.call (this);     var typevalue = 1;    this.settype  = function (type) {        typevalue = type;         switch  (type) {             case 1:             &NBSP;&NBSP;&NBSP;&NBSP;THIS.GETDRAW1 ();                 break;             case 2:                 THIS.GETDRAW2 ();                 break;        }    }     This.getdraw1 = function () {&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;THIS.GRAPHICS.S ("#000"). Beginfill ("#fff"). DrawRect (0,0,W/4,H/4). EndFill ();    }     This.getdraw2 = function () {&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;THIS.GRAPHICS.S ("#000"). Beginfill ("#000"). DrawRect (0,0,W/4,H/4). EndFill ();    }     This.gettype = function () {        return typevalue;     }    this.settype (typevalue);} Drawzfx.prototype = new createjs. Shape ();

Core JavaScript

Var stage = new createjs. Stage ("Canvasid");         //gets canvas createjs. Ticker.setfps (;               )          //sets the frame number frequency createjs. Ticker.addeventlistener ("tick", stage);     //Event var drawview = new  Createjs. Container ();            //Create the outermost container stage.addchild (drawView );                           //containers are added to the canvas var timefn;                                          //Timer var  text = 0;                                        //Time initialization value 0/***** Initialize layout *******/function init (w,h,size) {                             //Initialization Interface   (wide, high, row container layer)     var view = [];     var current = 1;                               The   //can be clicked by default to the penultimate line     for (var n = size;n>=0;n--) {         view[n] = new createjs. Container ();         //definitionContainer for a row container         view[n].y =  (3-n) *h/4;                      // Positioning         var black = parseint (Math.random ()) for row containers;      //Random black Block         for (var l =  0;l <4;l++) {            var zfx  = new drawzfx (w,h);             // Create a swatch (the default is a white color block)             zfx.x = l*w/4;                           //to color block positioning              if (black ==&NBSP;L) {                         zfx.settype (2);                     //filled with black color blocks              }             view[n].addchild (ZFX);                  //put the color block in a row container         }         if (n == current) {                            //judgment can be clicked on the line             addcurrent (Current,view, h); &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&Nbsp;              }         drawview.addchild (View[n]);                 //putting the row container in the outermost container     }}/***** an over method   By this event over to click event ******/function addcurrent (current,view,h) {    for (var i =  0; i < 4; i++) {&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;CLICKFN (i,current, VIEW,H)     }}/**** Binding Sentinel Event ****/function clickfn (i,current,view,h) {     view[current].getchildat (i). AddEventListener ("click", Function () {             /******************  value 1: Dot in white block   game over  ************************ /        if (View[current].getchildat (i). GetType ()  == 1 ) {&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBsp;      alert ("Game over, your score is:" +text.tofixed (1) + "seconds clicked" + (Current-1) + "sub-Black Block");             clearinterval (timeFn);                     /*******   Value 2: Dot in black block    continue game ******************************/         }else if (View[current].getchildat (i). GetType ()  == 2) {                 /********** (current == 1) is the starting start meter * * * /            if (current ==  1) {                text  = 0;                 timefn = setInterval (function () {                     text += 0.1;                     document.getelementbyid ("Time"). InnerHTML  = text.tofixed (1);              &NBSP;&NBSP;&NBSP;},100);            }             drawView.y +=h/4;                         //the outermost container moves down             current++;                                //set the line to bind a fixed point              addcurrent (current,view,h);              //callback over event         }    }); Init (320,440,1000);                                 // Initialize startup game



Game effects are as follows



Self-taught Easeljs code that you write by not stepping on the white block game

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.