文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript实现的水果忍者游戏,支持鼠标操作

2023-06-03 13:55

关注

智能手机刚刚普及时,水果忍者这款小游戏可谓风靡一时。几年过去了,现在,让我们用纯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实现的水果忍者游戏,支持鼠标操作

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯