一、項目背景】

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、需要本文源碼的小伙伴，后臺回復“顏色配對”四個字，即可獲取。

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

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

家好，我是你們的章魚貓。

掃雷大家都玩過吧，Windows 里面的經典游戲。我記得上初中那會，上計算機課，都是偷偷玩這個游戲，懷念呀。但是不得不說，掃雷相比紙牌難度還是大一點的，畢竟還要費一點腦子的。

今天要推薦的項目就是重溫經典，只通過 HTML/CSS（沒有任何 JavaScript）來實現的掃雷游戲。

這個游戲另外一個很有趣的地方就是，為了強調沒有使用 JavaScript，掃雷游戲中的雷就是 JS，哈哈哈。

整個項目使用最核心的技術就是 CSS 里面的是 Space Toggle，感興趣的同學可以了解一下哦。

通過如下網站可以試玩上面的掃雷游戲：

https://propjockey.github.io/css-sweeper/

更多項目詳情請查看如下鏈接。

開源項目地址：

https://github.com/propjockey/css-sweeper