一篇文章教會你使用HTML打造一款顏色配對游戲

一、項(xiàng)目背景】

createjs是一個(gè)基于canvas的制作H5游戲、動畫、交互的庫。包括EaselJs、TweenJs、SoundJs、 PreloadJs四個(gè)部分。它基于容器進(jìn)行展示，其中根容器是stage（舞臺）對象。

今天教大家用EaselJs、TweenJs結(jié)合做一個(gè)顏色配對游戲。

【二、項(xiàng)目準(zhǔn)備】

1、去下方網(wǎng)站：

http://www.createjs.cc/

然后下載EaselJs、TweenJs這兩個(gè)模塊。

2、軟件：Dreamweaver

【三、項(xiàng)目目標(biāo)】

隨機(jī)產(chǎn)生4種顏色，讓下方的色塊通過鼠標(biāo)移動，匹配上方的顏色框。如果上方顏色框與下方色塊顏色相同。全部色塊匹配完成則為成功。

【四、項(xiàng)目實(shí)現(xiàn)】

1、導(dǎo)入EaselJs、TweenJs模塊。

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

2、body 創(chuàng)建畫布canvas 設(shè)置畫布大小，畫布添加描邊，id屬性。

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

3、創(chuàng)建shapes.js文件。定義一個(gè)初始化init()方法，創(chuàng)建stage對象。

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

4、定義畫圖形方法buildShapes()，調(diào)用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、設(shè)置正方形x,y的位置， for循環(huán)隨機(jī)填充顏色，添加在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循環(huán)隨機(jī)產(chǎn)生一個(gè)r值，添加到shapes。產(chǎn)生移動的正方形。添加到舞臺（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、添加鼠標(biāo)事件。控制正方形移動。

 shape.addEventListener("mousedown", startDrag);

8、定義開始游戲方法startGame，設(shè)置游戲的幀數(shù)，添加監(jiān)聽事件。

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

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

1）獲取當(dāng)前鼠標(biāo)的坐標(biāo)。

var shape=e.target;

2）讓鼠標(biāo)的坐標(biāo)等于填充正方形的坐標(biāo)。

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設(shè)置動畫效果。

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（）中，調(diào)用方法，實(shí)現(xiàn)效果

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

【五、效果展示】

1、f12運(yùn)行到chrome瀏覽器。

2、拖動隨機(jī)顏色塊，匹配顏色框。

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

【六、總結(jié)】

1、本文主要介紹了createjs中EaselJs、TweenJs的用法，以及對stage是如何創(chuàng)建的，在stage上怎么去繪制圖形。在頁面上如何去呈現(xiàn)stage。

2、就本項(xiàng)目中的難點(diǎn)，重點(diǎn)，提供了詳細(xì)的講解和提供有效的解決方案。

3、大家可以嘗試了解createjs的其他模塊，官網(wǎng)上有對應(yīng)的API文檔供大家學(xué)習(xí)。

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

5、需要本文源碼的小伙伴，后臺回復(fù)“顏色配對”四個(gè)字，即可獲取。

****看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人****

想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識，可前往專業(yè)網(wǎng)站：http://pdcfighting.com/

是一篇有趣的文章，我們精選了 JS13K 游戲編程挑戰(zhàn)的優(yōu)秀作品，與大家分享。JS13K 是專為 JavaScript 開發(fā)者量身定制的編程競賽，報(bào)名參賽的開發(fā)者需要根據(jù)挑戰(zhàn)主題，利用 JS 開發(fā)一款不超過 13KB（譯者注：壓縮后檔案大小不超過 13KB，且不得使用任何托管的函式庫、圖片或資料）的游戲進(jìn)行角逐。

我們精選了去年（譯者注：2018 年的主題為-離線游戲）參賽的優(yōu)秀作品，你不光能體驗(yàn)小游戲的樂趣，還可以搜尋一些編程的靈感。一起來瞧瞧吧！

1.OnOff

這是一個(gè)很有挑戰(zhàn)性的關(guān)卡游戲，簡約的設(shè)計(jì)與有趣的音效讓游戲妙不可言。躲閃尖刺，躍過深坑，通過場景切換完成 25 個(gè)由易到難的關(guān)卡挑戰(zhàn)。作者還提供了一個(gè)很酷的關(guān)卡編輯器，讓你體驗(yàn)創(chuàng)建關(guān)卡的樂趣。

游戲體驗(yàn)：https://js13kgames.com/games/onoff/index.html
項(xiàng)目地址：https://github.com/starzonmyarmz/js13k-2018

2.Everyone's sky

Everyone's sky 是一款經(jīng)典的科幻風(fēng)格太空冒險(xiǎn)游戲。除了主打太空冒險(xiǎn)，這款游戲還兼具了一些 RPG 游戲要素。在游戲中，通過控制飛船移動，聯(lián)合太空中的其他勢力收集資源。你可以結(jié)交盟友，和平的完成任務(wù)，也可以攻擊你所遇到的一切勢力。和平還是毀滅，掌握在你的手中。

游戲體驗(yàn)：https://js13kgames.com/games/everyones-sky/index.html
項(xiàng)目地址：https://github.com/remvst/everyones-sky

3.Underrun

這是一款第三人稱射擊游戲。游戲主角被關(guān)在損壞的實(shí)驗(yàn)室里，通過射殺變異的蜘蛛人，完成搜尋、重啟終端系統(tǒng)的任務(wù)。游戲運(yùn)行流暢，而像素風(fēng)格的場景與人物，出色的燈光與音效，也讓游戲蒙上一層陰暗、恐怖的氛圍。

游戲體驗(yàn)：https://js13kgames.com/games/underrun/index.html
項(xiàng)目地址：https://github.com/phoboslab/underrun

4.Konnekt

這是一個(gè)簡單的即時(shí)戰(zhàn)略游戲。你需要清除病毒感染的系統(tǒng)節(jié)點(diǎn)，完成游戲挑戰(zhàn)。隨著關(guān)卡的深入，游戲難度會不斷遞增，你需要處理病毒感染的節(jié)點(diǎn)也會增多。這款游戲看似簡單，卻相當(dāng)有挑戰(zhàn)。

游戲體驗(yàn)：https://js13kgames.com/games/konnekt/index.html
項(xiàng)目地址：https://github.com/monsterkodi/konnekt

5.Super Chrono Portal Maker

這款游戲與原版的超級馬里奧如出一轍。你需要控制主角移動、跳躍挑戰(zhàn) 30 個(gè)不同級別的關(guān)卡，而每個(gè)級別也引入了豐富的游戲機(jī)制，讓游戲妙趣橫生。此外，開發(fā)者還提供了關(guān)卡構(gòu)建器，幫助你打造專屬的關(guān)卡并與朋友分享。

游戲體驗(yàn)：
https://js13kgames.com/games/super-chrono-portal-maker/index.html

6.Offline Paradise

這是一個(gè)快節(jié)奏的跑酷游戲，你需要控制游戲主角奔跑、跳躍、沖刺躲避不同的障礙物。游戲里設(shè)置了自動保存點(diǎn)功能，省去了挑戰(zhàn)失敗而重新開始游戲的煩惱。游戲不僅運(yùn)行流暢，游戲場景、動畫、音效也令人心情愉悅。

游戲體驗(yàn)：https://js13kgames.com/games/offline-paradise/index.html
項(xiàng)目地址：https://github.com/sirxemic/js13k-game

7.Raven

Raven 是一款動作益智游戲。你的任務(wù)很簡單，通過調(diào)整游戲人物視角，在躲避神秘生物的同時(shí)完成修復(fù)安全攝像頭的目標(biāo)。游戲看似簡單，但任務(wù)難度隨關(guān)卡的增加變得困難重重。

游戲體驗(yàn)：https://js13kgames.com/games/raven/index.html
項(xiàng)目地址：https://github.com/elliot-nelson/js13k-2018-raven

8.Systems Offline

這是一款相當(dāng)鍛煉大腦的益智游戲。游戲的背景故事設(shè)定在破損的空間站內(nèi)，你需要操縱主角在氧氣耗盡之前，修復(fù)空間站系統(tǒng)并逃生。游戲設(shè)置了三個(gè)級別難度，操作簡單（支持色盲模式），只需要利用鼠標(biāo)就可以完成游戲。

游戲體驗(yàn)：https://js13kgames.com/games/systems-offline/index.html
項(xiàng)目地址：https://github.com/eschatonic/SystemsOffline

9.Re-wire

Re-wire 是一款邏輯思維游戲。你需要躲避鋸齒的干擾，將線纜相連并插入插座。隨著游戲進(jìn)程的深入，挑戰(zhàn)難度逐漸增加。開發(fā)者很有心，還提供了游戲自動保存功能。喜歡的朋友可以試試。

游戲體驗(yàn)：https://js13kgames.com/games/re-wire/index.html
項(xiàng)目地址：https://github.com/JMankopf/js13k-rewire

10.Spacecraft

這款游戲與跑酷游戲類似。你需要操作飛船，在太陽系各大行星上收集金幣，并躲避障礙，勇奪高分。游戲還提供了購買飛船的功能。

游戲體驗(yàn)：https://js13kgames.com/games/spacecraft/index.html
項(xiàng)目地址：https://github.com/tricsi/spacecraft

感謝你的閱讀。若你有所收獲，歡迎點(diǎn)贊與分享。

注：

本文版權(quán)歸原作者所有，僅用于學(xué)習(xí)與交流；
如需轉(zhuǎn)載譯文，煩請按下方注明出處信息，謝謝！

英文原文：10 Amazing JavaScript Games In Under 13kB of Code
作者：Georgi Georgiev
譯者：IT程序獅
譯文地址：
https://zhuanlan.zhihu.com/p/57789538

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

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

今天要推薦的項(xiàng)目就是重溫經(jīng)典，只通過 HTML/CSS（沒有任何 JavaScript）來實(shí)現(xiàn)的掃雷游戲。

這個(gè)游戲另外一個(gè)很有趣的地方就是，為了強(qiáng)調(diào)沒有使用 JavaScript，掃雷游戲中的雷就是 JS，哈哈哈。

整個(gè)項(xiàng)目使用最核心的技術(shù)就是 CSS 里面的是 Space Toggle，感興趣的同學(xué)可以了解一下哦。

通過如下網(wǎng)站可以試玩上面的掃雷游戲：

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

更多項(xiàng)目詳情請查看如下鏈接。

開源項(xiàng)目地址：

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

在線咨詢

上一篇：前端編碼規(guī)范手冊學(xué)前端開發(fā)看這個(gè)就夠了
下一篇：HTML5表單介紹

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商