【一、專案背景】

createjs是一個基於canvas的製作H5遊戲、動畫、互動的庫。包括EaselJs、TweenJs、SoundJs、 PreloadJs四個部分。它基於容器進行展示，其中根容器是stage（舞臺）物件。

今天教大家用EaselJs、TweenJs結合做一個顏色配對遊戲。

【二、專案準備】

1、去下方網站：

http://www.createjs.cc/

然後下載EaselJs、TweenJs這兩個模組。

2、軟體：Dreamweaver

【三、專案目標】

隨機產生4種顏色，讓下方的色塊通過滑鼠移動，匹配上方的顏色框。如果上方顏色框與下方色塊顏色相同。全部色塊匹配完成則為成功。

【四、專案實現】

1、匯入EaselJs、TweenJs模組。

<script src="js/easeljs-0.7.1.min.js"></script>
<script src="js/tweenjs-0.5.1.min.js"></script>

2、body 建立畫布canvas 設定畫布大小，畫布新增描邊 ，id屬性。

<canvas id="canvas" width="600" height="400" style="border: black solid 1px"></canvas>
 

3、建立shapes.js檔案。定義一個初始化init()方法 ，建立stage物件。

function init() {
    stage = new createjs.Stage("canvas");
}

4、定義畫圖形方法buildShapes()，呼叫createjs.Shape()方法 用graphics繪製描邊正方形。填充顏色。

function buildShapes() {
    var colors = ['blue', 'red', 'green', 'yellow'];
    var i, shape, slot;
    for (i = 0; i < 4; i++) {
        //slots 描邊正方形
        slot = new createjs.Shape();
        slots.push(slot);
        //shapes 正方形
        shape = new createjs.Shape();
        shape.graphics.beginFill(colors[i]);
        shape.graphics.drawRect(0, 0, 100, 100);
        shape.regX = shape.regY = 50;
        shape.key = i;
        shapes.push(shape);
    }
}
 

5、設定正方形x,y的位置， for迴圈隨機填充顏色，新增在stage上。

slot.graphics.beginStroke(colors[i]);
slot.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255, 1));
slot.graphics.drawRect(0, 0, 100, 100);
slot.regX = slot.regY = 50;
slot.key = i;
slot.y = 80;
slot.x = (i * 130) + 100;
stage.addChild(slot);

6、定義setShapes方法，for迴圈隨機產生一個r值，新增到shapes。產生移動的正方形。新增到舞臺（stages）上。

function setShapes() {
    var i, r, shape;
    var l = shapes.length;
    for (i = 0; i < l; i++) {
        r = Math.floor(Math.random() * shapes.length);
        shape = shapes[r];
        shape.homeY = 320;
        shape.homeX = (i * 130) + 100;
        shape.y = shape.homeY;
        shape.x = shape.homeX;
        stage.addChild(shape);
        shapes.splice(r, 1);
    }
}

7、新增滑鼠事件。控制正方形移動。

 shape.addEventListener("mousedown", startDrag);

8、定義開始遊戲方法startGame，設定遊戲的幀數，新增監聽事件。

function startGame() {
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", function (e) {
        stage.update();
    });
}

9、判斷遊戲方法startDrag(e)

1）獲取當前滑鼠的座標。

var shape = e.target;

2）讓滑鼠的座標等於填充正方形的座標。

stage.addEventListener('stagemousemove', function (e) {
        shape.x = e.stageX;
        shape.y = e.stageY;
    });

3）hitTest方法。測試影象是否與顏色相同的框有交集，判斷顏色是否相同。

if (slot.hitTest(pt.x, pt.y)) {
            shape.removeEventListener("mousedown",startDrag);
            score++;
            createjs.Tween.get(shape).to({x:slot.x, y:slot.y}, 200, createjs.Ease.quadOut).call(checkGame);
            console.log('h');
        }
        else {
            
        }

4）TweenJs設定動畫效果。

createjs.Tween.get(shape).to({x:shape.homeX, y:shape.homeY}, 200, createjs.Ease.quadOut);

10、定義贏的方法checkGame ，用score分別代表四種顏色色塊，判斷score的值。

function checkGame(){
    if(score == 4){
        alert('You Win!');
    }
}

11、在init（）中，呼叫方法，實現效果

buildShapes();
setShapes();
startGame();

【五、效果展示】

1、f12執行到chrome瀏覽器。

2、拖動隨機顏色塊，匹配顏色框。

3、四個顏色塊匹配完成 彈框 (勝利）！！

【六、總結】

1、本文主要介紹了createjs中EaselJs、TweenJs的用法，以及對stage是如何建立的，在stage上怎麼去繪製圖形。在頁面上如何去呈現stage。

2、就本專案中的難點，重點，提供了詳細的講解和提供有效的解決方案。

3、大家可以嘗試瞭解createjs的其他模組，官網上有對應的API文件供大家學習。

4、按照操作步驟，自己嘗試去做。自己實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

5、需要本文原始碼的小夥伴，後臺回覆“顏色配對”四個字，即可獲取。

看完本文有收穫？請轉發分享給更多的人

IT共享之家

入群請在微信後臺回覆【入群】