標籤：
今天給大家介紹一款h5遊戲的小架構，createjs，相信很多人都接觸過。先簡單介紹下createjs：CreateJS為CreateJS庫，可以說是一款為HTML5遊戲開發的引擎。
CreateJS 中包含五款工具：EaselJS：用於 Sprites、動畫、向量和位元影像的繪製，建立 HTML5 Canvas 上的互動體驗（包含多點觸控），同時提供 Flash 中的“顯示列表”功能。TweenJS：一個簡單的用於製作類似 Flash 中“補間動畫”的引擎，可產生數字或非數位連續變化效果。SoundJS：一個音頻播放引擎，能夠根據瀏覽器效能選擇音頻播放方式。將音頻檔案作為模組，可隨時載入和卸載。PrloadJS：協助你簡化網站資源預先載入工作，無論載入內容是圖形、視頻、聲音、JS、資料……PxLoadr一款用於網站資源預先載入的 JavaScript 庫，可載入圖片、音頻等任何類型的檔案。PxLoader 除了可以幫你對資源載入的進度進行監測，捕捉“載入完成”事件外，還可以幫你指定資源載入的順序。你甚至還可以按照優先順序分組載入資源。那麼今天我們主要講的就是easejs，並附送一款之前在朋友圈很火的"找不同"，作為實戰演練。首先介紹下遊戲：那麼遊戲很簡單拉，就是在一塊地區出現不同的顏色的圖塊，其中有一塊跟其他顏色不一樣，使用者點擊此則得一分並進入下一關。那麼遊戲的思路並不難，我們用easejs來做好了，上代碼：<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang = "en" > <head><meta charset = "UTF-8" > <!--This text is a comment--><script src = "jquery-1.8.3.min.js"></script><script src="easeljs-0.7.1.min.js"></script><script src="rank.js"></script></head><body><canvas id="gameView" width="400px" height="400px;"> Your browser is not Support</canvas><div>時間：<span id="time">--</span></div><div>得分：<span id="int">--</span></div><script src="app.js"></script></body></html>
該代碼為html內容，其中引入easeljs模組，直接引入就好。（在這裡我們只引用了了easejs這個組件類庫，其實createjs功能很強大，本身是一款h5遊戲引擎）
然後我們自己寫的js為兩塊，一個是app.js，另一個就是rank.js。其中rank.js為構造執行個體，即每一關圖塊所擁有的方法，我們均將其封裝在這個執行個體裡面。app.js為具體執行的主線程js。
先上rank.js的代碼
function Rect(n,color){createjs.Shape.call(this);//將createjs.Shape的方法全部當作參數傳進來this.setRectType = function (type){//構造setRectType方法 this._RectType = type; switch (type){ case 1: this.setColor("#"+color[0]+color[1]+color[2]+color[3]+color[4]+color[5]); break; case 2: var m=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 = new createjs.Shape();//構建Rect對象，繼承所有createjs方法以及我們之前建立的方法
在rank.js代碼中，我們構建的所有執行個體應該擁有的方法，接下來在app.js中我們寫主線程：
var stage=new createjs.Stage("gameView");createjs.Ticker.setFPS(30);createjs.Ticker.addEventListener("tick",stage);var gameView=new createjs.Container();stage.addChild(gameView);var n=2,num=1;var timer = 16;var time=$("#time");function stop() { var ove = ‘<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">時間到啦！！！！！！</div>‘; $("html").append(ove); $("html").append(over);}t = setInterval(function() { timer--; if(timer<0){ stop(); clearTimeout(t); } else { time.html(timer); }}, 1000);function addRect(){ var cl=[parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10)]; var color = cl; var x =parseInt(Math.random()*n); var y =parseInt(Math.random()*n); for(var indexX=0;indexX<n;indexX++){ for(var indexY=0;indexY<n;indexY++){ var r = new Rect(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();
由於遊戲簡單，app.js功能很好理解，主要作用為玩家選中目標方塊時，構建新圖層。
html5遊戲之createjs以及“找不同”實踐
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
