智能手机刚刚普及时,水果忍者这款小游戏可谓风靡一时。几年过去了,现在,让我们用纯JavaScript来实现这个水果忍者游戏,就算是为了锤炼我们的JavaScript开发技能吧。

大家可以通过这个链接在线玩一玩(该链接是我的github地址):

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

用鼠标在网页上划一条横线切正中的“New Game”的水果开始新的游戏:

然后按住鼠标左键不放,在屏幕上划一条线,即可去切您中意的水果了。

玩法和手机上一样简单。

如果大家想定制化水果忍者这个游戏,请从我的github上将水果忍者的源代码clone或者下载到本地,然后自行修改:

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

如果大家想修改在游戏里登场的水果图标,直接把文件夹images/fruit下面的图片文件替换即可。以苹果为例,apple.png代表完整的苹果,apple-1.png和apple-2.png分别代表被切成两半的苹果左半部份和右半部份。

如果想修改游戏音效,请将您喜欢的音效的mp3文件放到sound文件夹下。

我们在玩这个游戏时,如果在JavaScript文件all.js的slice事件处理函数里设置断点,就能观察到JavaScript实现是如何检测水果刀(是否)切到了水果:collide.check:

如果大家觉得只有三次机会玩起来太不过瘾了,那很容易,直接把showLseAt这个函数里的number == 3的判断条件改成比如number == 999, 这样就可以几乎无限制得玩啦!

有的朋友想作弊得更彻底一点,想达到即使切到炸弹,游戏也不结束的效果。

那么只需要修改sliceAt函数,如下图if ( fruit.type != "boom")的红色分支就是切到水果的分支,执行加分和显示水果被切成两半的效果。else的蓝色分支是切到炸弹的分支,我们只需要将蓝色分支内的代码注释掉,游戏就永远不能结束了。不过这样挺无聊的,哈哈!

这个游戏的JavaScript版本的作者:https://github.com/ChineseDron/fruit-ninja

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

JavaScript实现的水果忍者游戏,支持鼠标操作的更多相关文章

  1. L3-012 水果忍者 (30 分)

    2010年风靡全球的“水果忍者”游戏,想必大家肯定都玩过吧?(没玩过也没关系啦~)在游戏当中,画面里会随机地弹射出一系列的水果与炸弹,玩家尽可能砍掉所有的水果而避免砍中炸弹,就可以完成游戏规定的任务. ...

  2. 前端优秀作品展示,JavaScript 版水果忍者

    <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Rapha ...

  3. 作品展示,JavaScript 版水果忍者

    点这里 <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 R ...

  4. java游戏制作之水果忍者

    水果忍者的原理很简单,主要就是采用随机的方式是画面上面出现水果. package Fruitninja; import java.awt.Dimension; import java.awt.Grap ...

  5. 基于html5 canvas和js实现的水果忍者网页版

    今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版 ...

  6. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  7. html+css+JavaScript实现爱恩斯坦棋游戏

    title: "html+css+JavaScript实现爱恩斯坦棋游戏" author: Sun-Wind date: December 30, 2021 背景:本贴将基于前端的 ...

  8. Unity中制作游戏的快照游戏支持玩家拍快照

    Unity中制作游戏的快照游戏支持玩家拍快照 有些游戏支持玩家“拍快照”,也就是将游戏的精彩瞬间以图片的形式记录下来的功能.这个功能比较有趣,而且以后的用途也会很广,为此本节打算介绍:截取矩形区域内游 ...

  9. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

随机推荐

  1. Linux 执行定时任务 shell脚本

    Linux上面执行定时任务,我们可以利用crontab -e直接编辑定时任务 另外我们还可以写好shell脚本,定时去执行shell脚本,这两个方法都可以起到定时执行的作用 下面我详细说一下入如何执行 ...

  2. CF-807A

    A. Is it rated? time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  3. LeetCode: 258 Add Digits(easy)

    题目: Given a non-negative integer num, repeatedly add all its digits until the result has only one di ...

  4. 一个C#开发者重温C++的心路历程

    不知道为什么,似乎很多人理解跑偏了,在这里我要说明一下. 首先,我并没有对C++语言有偏见,我只是单纯的在学习时,在理解时,对C++语言进行一些吐槽,我相信,很多学习C++的人,也会有类似的吐槽. 其 ...

  5. E20181120-hm

    checkerboard n. 西洋跳棋盘; checker n. 方格图案;

  6. 两种好用的清除浮动的小技巧(clearfix hack)

    方法一:使用内容生成的方式清除浮动 这种方法不能解决margin在垂直边界上的叠加问题,如果不涉及margin的边界叠加问题使用这种方法清除浮动就行了 . /* :after 选择器向选定的元素之后插 ...

  7. MFC控件:listctrl使用方法总结

    以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 “ListView_”开头的一些宏.如 ListView_InsertCol ...

  8. Unity3D中调用外接摄像头,并保存为图片文件

    http://bbs.9ria.com/thread-170539-1-1.html 项目要求调用摄像头,并且把图像保存下来,上传到服务器. 这里有几个难点,调用摄像头是很简单的,unity已经提供好 ...

  9. VC.NET 需要注意的一些问题

    String^ abc = gcnew String(); String^ abc = nullptr override .net 类方法: void Reset() override {....} ...

  10. 洛谷P4151 [WC2011]最大XOR和路径(线性基)

    传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 首先看到异或就想到线性基 我们考虑有一条路径,那么从这条路径走到图中的任意一个环再走回这条路径上,对答案的贡献是这个环的异或和,走到这个环上的路径对 ...