一個簡簡單單的切換場景的小游戲，怎么能滿足得了我呢，所以在看了cocos creator的用戶手冊和JavaScript的新手教程之后，盤算著做一個稍微復(fù)雜一點的小游戲，對，稍微~~
ps：看見藍色的字就點一點啊，沒準(zhǔn)藏了個驚嚇。
首先呢，依舊是創(chuàng)建一個空項目，這一步不會做的話請點擊這里，建立好相應(yīng)文件夾，需要提早準(zhǔn)備一些圖片資源，可以去網(wǎng)上下載，并放入你的項目中的存放圖片的文件夾中。再創(chuàng)建一個場景，命名為first。先給first場景添加一個背景圖，找一張比較大的背景圖，直接拖到Canvas下，命名為firstBg，并在右側(cè)的屬性檢查器中的Node欄中配置好相應(yīng)的數(shù)據(jù)，使這張背景圖能夠在后期用代碼實現(xiàn)橫向滾動。如：
那條紅線往左就是屏幕大小，藍線框內(nèi)就是這張背景圖的大小。接下來，要做一個主角，隨便取一張卡通人物圖，把它拖到Canvas中，命名為hero，放在在firstBg的下面，與firstBg同級。層級的規(guī)則是：同級的情況下，在層級管理器，越下面的，就在運行后的屏幕上越前面。
接下來，給hero加點料吧。新建一個JavaScript，命名為hero，添加：
這部分的代碼是給主角hero添加了，鍵盤上的WSAD的監(jiān)聽，分別代表上下左右，如果你不能理解的話，可以看看這個例子先。accLeft，accRight，accUp，accDown，是在該方向上是否能移動。moveSpeed指的是hero的移動速度。update是一個實時監(jiān)聽的函數(shù)，在里面寫了如果在該方向上允許移動，則實時設(shè)置this.node的坐標(biāo)，這個this.node就是主角hero。另外，為了更符合背景圖的實際，我給hero在縱向上移動范圍做了限制。然后回到first場景，點選hero，添加剛剛寫的hero.js，(添加組件/添加用戶腳本組件/hero)：
設(shè)置移動速度為200，完成后，你可以保存一下，然后運行看看了。
那么問題來了，主角可以通過WSAD移動，但是背景圖沒有動。那么，新建一個javaScript腳本文件命名為bg：
bg.js里的bg和hero是給外部預(yù)留的接口，如同上面的moveSpeed。我就在update這個函數(shù)下做了一些移動范圍的判斷，具體的數(shù)值你要根據(jù)你的背景圖大小來設(shè)置。如果嫌麻煩，就把背景圖大小改成和我一樣就得了。然后在firstBg的屬性檢查器中，添加剛剛寫的bg.js腳本文件，再把Canvas下的hero和firstBg拖進來：
之后可以運行看看，屏幕會隨著主角移動而移動了。
不過，感覺空蕩蕩的，是不是應(yīng)該添加點怪物？將怪物的小圖片拖到Canvas中，因為怪物們不能隨著主角的移動而移動，所以要把怪物放到firstBg下。下圖請忽略置灰的UI。
然后給這些怪物加點動畫，新建腳本命名為monster：
上面的代碼就預(yù)留了monster1，monster2，monster3，boss，box，的外部接口，然后給一些怪物增加了移動動畫。把這個腳本應(yīng)用到firstBg上，再把相應(yīng)的怪物拖進來：
運行，恩，怪物在動了。然而，主角與怪物碰撞時，什么都沒發(fā)生，這可不行，總得讓它們產(chǎn)生點激情的火花吧？恩，依次給monster1，monster2，monster3，boss，box，還有hero，都添加一個碰撞組件，碰撞組件有三種，矩形，圓形，多邊形，試了下，還是多邊形比較好一些：
完成如下：
設(shè)置hero和box的碰撞組件的Tag為0，其他都為1。以便于區(qū)分勝負(fù)，碰到box為勝，碰到其他怪物為負(fù)。
既然都有勝負(fù)了，那么是不是應(yīng)該有個勝負(fù)的彈窗呢？隨便搭一個吧，就一個背景圖，一個按鈕，一個文本：
這個彈窗不能一開始就可以看到吧？所以resultView的屬性檢查器的那個可見的勾要去掉，在代碼中可以用.active = true來顯示：
然后新建腳本文件，命名為hit.js：
預(yù)留了彈窗和文本的接口。cc.director.getCollisionManager().enabled = true;表示碰撞系統(tǒng)開啟。
onCollisionEnter: function (other, self) {
? ? if (self.tag === 0) {
? ? ? ? this.view.active = true;
? ? ? ? this.label.string = "you win";
? ? } else {
? ? ? ? this.view.active = true;
? ? ? ? this.label.string = "you lose";
? ? }
}
是碰撞的處理函數(shù)，self是被碰到的對象，如果被碰到的東西的tag是0，那個表示碰到了箱子，就贏了；反之，就輸了。
然后將這個腳本文件應(yīng)用到monster1，monster2，monster3，boss，box中：
到這里其實游戲已經(jīng)差不多完成了。接下來把那個再玩一次的按鈕添上腳本文件，不會的話請點擊這里：
接下來是實際運行的效果圖：
都說問題來自測試，我發(fā)現(xiàn)當(dāng)游戲結(jié)束時（碰撞到勝利或者碰撞到怪物失?。﹉ero還能接受WSAD的監(jiān)聽，還有怪物也依舊上下做著緩慢的動作，這個應(yīng)該是不符合常理的。游戲結(jié)束了，hero和怪物們都要停止動作，保持在碰撞到的那一刻。
所以，我想了好久也問了好多人，終于得到了一個比較好的辦法。首先在hero.js里cc.class的外面加上：
這段代碼意思是：從cocos creator里找到hero這個控件，使它上下左右都不允許移動，移除自身所有的監(jiān)聽，并對外提供了 removeAll這個函數(shù)。這樣我在別的腳本文件里，想讓hero停止移動并移除監(jiān)聽只需要導(dǎo)入hero.js，然后調(diào)用removeAll函數(shù)就可以了。
同理，給monster.js添加：
最后在hit.js中調(diào)用，先導(dǎo)入上兩個文件：
然后：
這樣，當(dāng)游戲結(jié)束時，hero和怪物們都會停止移動，而且你再按WSAD也對hero無效了。
至于
隨便搭一下吧，至于關(guān)閉游戲的代碼是 ?cc.director.end();
好了，新一代的菜鳥“神作”就這樣完成了。什么？你要代碼？好吧，我剛剛學(xué)會了用Github Desktop上傳項目到Github，點擊這里就能下載項目了。如果你真的需要看一些游戲項目的話，請點擊這兒和點擊那兒。這里有許多大神寫的一些游戲項目供參考，當(dāng)然要看懂的話，你至少需要把cocos creator的用戶手冊全都看一遍，畢竟大神們是沒那么多時間來寫對他們來講很low而對我們來講很高大上的項目的教程的(攤手)。
如有錯誤，歡迎指正。如有補充，歡迎告知。
2017-07-24
