1. 初來乍到

打開 Cocos Creator 點擊新建空白項目，在預設佈局的左下區域，一個黃黃assets文件夾映入眼帘。作為前端的你對這個文件是不是再熟悉不過了。是的，和你想象的一樣，開發游戲中所有資源，腳本都會放置到該文件。

2. 初步探索

項目建立好以後，對各區域的功能大致瞭解下，作為前端的你，主要還是要迅速的掌握cc提供的各種NB的功能。所以，還得趕緊打開 [官網](https://docs.cocos.com/creator/manual/zh/) 快速瀏覽一遍。官網也寫得很好，提供中文和英文，對於英文能力不好的伙伴來說，簡直是不能太好了。是不是找到了當初學習Vue的感覺。作為前端的你，整天寫了一堆業務控制，處理各種佈局，各種相容，對奇怪的css優先順序搞得雲里霧裡的。所以是時候換一個更有意思開發場景，給自己做個游戲解悶多好

cc是一個跨平臺框架，一端編譯多端發佈。想想前端的 mpvue taro uni-app，無不是解決此類問題，再加上gulp,webpack,再來一堆node_modules,啥less sass stylus.各種環境配置那是相當的複雜。所以業界流傳，前端已經進入深水區，真的一點不假。 然而cc依然可以讓你舒適的寫JS或者TS ,並且沒有繁雜的配置，一鍵搞定打包發佈。

3. 小試牛刀

上邊說了一大堆，其實並沒有什麼鳥用。在官網首頁中，給開發者提供了個完整坑爹的游戲《摘星星》，如果打包到微信小游戲，需要橫屏，不太友好。本著舉一反三的求學態度，我利用此場景，換了一個游戲玩法。開發了自己第一款小游戲《坦克俠》，當然也很坑爹

游戲開發主要是確定游戲規則，我新改編的玩法就是在星空中隨機生成不同數量的星星，並一直往下掉落，我的主角坦克必須在星星掉落前接住。丟失一顆星星生命減一，生命為0游戲結束。當然我們主角每收集一顆星星，根據當前的難度會添加一定的分數。累計到一定的分數，又可以給主角添加一點生命值

在官網 [下載初始項目](https://github.com/cocos-creator/tutorial-first-game/releases/download/v2.0/start_project.zip) 下載一個基礎項目，該項目中只有一些項目基本圖片和聲音。接下來，我們需要建立場景，製作預製資源，添加控制腳本，編譯發佈微信小游戲，[快速開始](https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html)

製作一個游戲場景，與官網不同的是，我將Canvas的Size屬性，在屬性檢查器中設置為 288 x 512 ，並且勾選了 Fit Height以及 Fit Width 用以適應同的手機屏幕。然後拖動背景圖片到層級管理器中，併在場景編輯器中設置背景Size屬性，使其等於Canvas的Size屬性。然後依次在層級管理器中新建三個Label控制項，依次拖動到背景圖片左上角和右上角，用以記錄生命值，當前分數，以及最高分數。接著在場景中間添加一個Label控制項和一個Button按鈕用於顯示游戲結束和開始游戲。在場景底部拖動放置我們的主角坦克。所以最新場景的效果應該是如下顯示的那樣

4. 一頓操作猛如虎

游戲場景設計，看似酷炫，無非就是拖拖拖。依稀找到了當年C#開發winform的感覺，隨便搞整一下，一個界面就出來了。所以導致很多人開發winform，webform很簡單，很傻瓜，其實不是的。重要的還是後邊的業務邏輯，解決方案，這些都是超越語言之上的東西。所以cc的場景編輯，就不多說了，直接分析我們游戲實現邏輯。開始之前我們先初始一下typescript開發環境，操作如下圖