Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
