JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

智能手機(jī)剛剛普及時,水果忍者這款小游戲可謂風(fēng)靡一時。幾年過去了,現(xiàn)在,讓我們用純JavaScript來實(shí)現(xiàn)這個水果忍者游戲,就算是為了錘煉我們的JavaScript開發(fā)技能吧。

創(chuàng)新互聯(lián)IDC提供業(yè)務(wù):簡陽服務(wù)器托管,成都服務(wù)器租用,簡陽服務(wù)器托管,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動機(jī)房,聯(lián)通機(jī)房。

大家可以通過這個鏈接在線玩一玩(該鏈接是我的github地址):

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

用鼠標(biāo)在網(wǎng)頁上劃一條橫線切正中的“New Game”的水果開始新的游戲:

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

然后按住鼠標(biāo)左鍵不放,在屏幕上劃一條線,即可去切您中意的水果了。

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

玩法和手機(jī)上一樣簡單。

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

如果大家想定制化水果忍者這個游戲,請從我的github上將水果忍者的源代碼clone或者下載到本地,然后自行修改:

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

如果大家想修改在游戲里登場的水果圖標(biāo),直接把文件夾images/fruit下面的圖片文件替換即可。以蘋果為例,apple.png代表完整的蘋果,apple-1.png和apple-2.png分別代表被切成兩半的蘋果左半部份和右半部份。

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

如果想修改游戲音效,請將您喜歡的音效的mp3文件放到sound文件夾下。

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

我們在玩這個游戲時,如果在JavaScript文件all.js的slice事件處理函數(shù)里設(shè)置斷點(diǎn),就能觀察到JavaScript實(shí)現(xiàn)是如何檢測水果刀(是否)切到了水果:collide.check:

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

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

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

有的朋友想作弊得更徹底一點(diǎn),想達(dá)到即使切到炸彈,游戲也不結(jié)束的效果。

那么只需要修改sliceAt函數(shù),如下圖if ( fruit.type != "boom")的紅色分支就是切到水果的分支,執(zhí)行加分和顯示水果被切成兩半的效果。else的藍(lán)色分支是切到炸彈的分支,我們只需要將藍(lán)色分支內(nèi)的代碼注釋掉,游戲就永遠(yuǎn)不能結(jié)束了。不過這樣挺無聊的,哈哈!

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

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

要獲取更多Jerry的原創(chuàng)技術(shù)文章,請關(guān)注公眾號"汪子熙"或者掃描下面二維碼:

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作

分享標(biāo)題:JavaScript實(shí)現(xiàn)的水果忍者游戲,支持鼠標(biāo)操作
當(dāng)前網(wǎng)址:http://bm7419.com/article30/phopso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、Google、定制網(wǎng)站移動網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、企業(yè)網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司