JavaScript实现的水果忍者游戏,支持鼠标操作
智能手机刚刚普及时,水果忍者这款小游戏可谓风靡一时。几年过去了,现在,让我们用纯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实现的水果忍者游戏,支持鼠标操作的更多相关文章
- L3-012 水果忍者 (30 分)
2010年风靡全球的“水果忍者”游戏,想必大家肯定都玩过吧?(没玩过也没关系啦~)在游戏当中,画面里会随机地弹射出一系列的水果与炸弹,玩家尽可能砍掉所有的水果而避免砍中炸弹,就可以完成游戏规定的任务. ...
- 前端优秀作品展示,JavaScript 版水果忍者
<水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Rapha ...
- 作品展示,JavaScript 版水果忍者
点这里 <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 R ...
- java游戏制作之水果忍者
水果忍者的原理很简单,主要就是采用随机的方式是画面上面出现水果. package Fruitninja; import java.awt.Dimension; import java.awt.Grap ...
- 基于html5 canvas和js实现的水果忍者网页版
今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版 ...
- 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结
大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...
- html+css+JavaScript实现爱恩斯坦棋游戏
title: "html+css+JavaScript实现爱恩斯坦棋游戏" author: Sun-Wind date: December 30, 2021 背景:本贴将基于前端的 ...
- Unity中制作游戏的快照游戏支持玩家拍快照
Unity中制作游戏的快照游戏支持玩家拍快照 有些游戏支持玩家“拍快照”,也就是将游戏的精彩瞬间以图片的形式记录下来的功能.这个功能比较有趣,而且以后的用途也会很广,为此本节打算介绍:截取矩形区域内游 ...
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...
随机推荐
- sql语句之正则表达式
select * from employee where name regexp '^jin' select * from employee where name regexp '^jin.*(g|n ...
- 01.课程介绍 & 02.最小可行化产品MVP
01.课程介绍 02.最小可行化产品MVP 产品开发过程 最小化和可用之间找到一个平衡点
- Tarjan找桥和割点与点连通分量与边连通分量【未成形】
之前只学了个强连通Tarjan算法,然后又摸了缩点操作: 然后今天在lightoj摸了一道模板题,是求所有桥的题: 然后发现,要把:割点,割点集合,双连通,最小割边集合(桥),点连通分量,边连通分量都 ...
- CodeForces Canada Cup 2016【A,B,C,D】
CodeForces 725A: 思路就是如果"最左"不是'>'这个了,那么这个右边的一定不可能到达左边了: 同理最右: CodeForces 725B: 有两个空姐,一个从 ...
- GPU渲染管线与shader
1 几何阶段(顶点shader处理这部分) 模型坐标空间-世界坐标空间-观察坐标空间-屏幕坐标空间 其中从观察空间 到 屏幕空间需要经过3步(CVV单位立方体,规范立方体) a用透视变换矩阵把顶点从视 ...
- 【渗透测试】如何使用burpsuite对特殊密码进行爆破
爆破是渗透测试中必不可少的一部分,对于没有太大价值可利用的漏洞或是业务只有一个登陆页面时,爆破更是我们的最合适的选择.那么在爆破时,抛去目标系统对爆破频率的限制,如果遇到较为复杂的密码,该如何顺利进行 ...
- C#字体字号的改变
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- ZooKeeper应用案例
我们通过学习借鉴,哪些项目或应用都使用了ZooKeeper,可以了解我们的应用使用ZooKeeper是否能真正地带来价值,当然,有些项目可能也未必非常适合使用ZooKeeper,我们要批判地学习.借鉴 ...
- java泛型笔记一
名词:泛型类 泛型方法 原始类型 子类型 版本 参数化类型 通配符类型 超类通配 子类通配 全通配 定义变量 创建对象 检查模板 类型实参 类型形参 补充 替代语法特征:尖括号括起来的类型参数表 // ...
- android studio ffmpeg简单使用 (cmake)
编译ffmpeg android studio 新建项目,勾选上 将编译好的libffmpeg.so库扔到src/main/jniLibs/armeabi下(主要这里我只编译了arm的ffmpeg的库 ...