JavaScript實現的水果忍者遊戲,支援滑鼠操作

i042416發表於2018-08-27

智慧手機剛剛普及時,水果忍者這款小遊戲可謂風靡一時。幾年過去了,現在,讓我們用純JavaScript來實現這個水果忍者遊戲,就算是為了錘鍊我們的JavaScript開發技能吧。

大家可以通過這個連結線上玩一玩(該連結是我的github地址):

http://i042416.github.io/FioriODataTestTool2014/WebContent/051_fruitninja.html

用滑鼠在網頁上劃一條橫線切正中的“New Game”的水果開始新的遊戲:

JavaScript實現的水果忍者遊戲,支援滑鼠操作

然後按住滑鼠左鍵不放,在螢幕上劃一條線,即可去切您中意的水果了。

JavaScript實現的水果忍者遊戲,支援滑鼠操作

玩法和手機上一樣簡單。

JavaScript實現的水果忍者遊戲,支援滑鼠操作

如果大家想定製化水果忍者這個遊戲,請從我的github上將水果忍者的原始碼clone或者下載到本地,然後自行修改:

https://github.com/i042416/FioriODataTestTool2014/

如果大家想修改在遊戲裡登場的水果圖示,直接把資料夾images/fruit下面的圖片檔案替換即可。以蘋果為例,apple.png代表完整的蘋果,apple-1.png和apple-2.png分別代表被切成兩半的蘋果左半部份和右半部份。

JavaScript實現的水果忍者遊戲,支援滑鼠操作

如果想修改遊戲音效,請將您喜歡的音效的mp3檔案放到sound資料夾下。

JavaScript實現的水果忍者遊戲,支援滑鼠操作

我們在玩這個遊戲時,如果在JavaScript檔案all.js的slice事件處理函式裡設定斷點,就能觀察到JavaScript實現是如何檢測水果刀(是否)切到了水果:collide.check:

JavaScript實現的水果忍者遊戲,支援滑鼠操作

如果大家覺得只有三次機會玩起來太不過癮了,那很容易,直接把showLseAt這個函式裡的number == 3的判斷條件改成比如number == 999, 這樣就可以幾乎無限制得玩啦!

JavaScript實現的水果忍者遊戲,支援滑鼠操作

有的朋友想作弊得更徹底一點,想達到即使切到炸彈,遊戲也不結束的效果。

那麼只需要修改sliceAt函式,如下圖if ( fruit.type != "boom")的紅色分支就是切到水果的分支,執行加分和顯示水果被切成兩半的效果。else的藍色分支是切到炸彈的分支,我們只需要將藍色分支內的程式碼註釋掉,遊戲就永遠不能結束了。不過這樣挺無聊的,哈哈!

JavaScript實現的水果忍者遊戲,支援滑鼠操作

這個遊戲的JavaScript版本的作者: https://github.com/ChineseDron/fruit-ninja

要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:


JavaScript實現的水果忍者遊戲,支援滑鼠操作

JavaScript實現的水果忍者遊戲,支援滑鼠操作


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2212878/,如需轉載,請註明出處,否則將追究法律責任。

相關文章