切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由JavaSript和HTML5实现,虽然功能和原版的相差太大,但是基本的功能还是具备了,还是模仿的挺逼真,有一定的JavaSript水平的朋友,可以看看源代码,相信你的JavaSript水平会有很大的提升。

/**

 * this file was compiled by jsbuild 0.9.6

 * @date Fri, 20 Jul 2012 16:21:18 UTC

 * @author dron

 * @site 网页链接

 */

void function(global){

      var mapping = {}, cache = {};

      global.startModule = function(m){

            require(m).start();

      };

      global.define = function(id, func){

            mapping[id] = func;

      };

      global.require = function(id){

            if(!/\.js$/.test(id))

                  id += '.js';

            if(cache[id])

                  return cache[id];

            else

                  return cache[id] = mapping[id]({});

      };

}(this);

/**

 * @source D:\hosting\demos\fruit-ninja\output\scripts\collide.js

 */ 

define("scripts/collide.js", function(exports){

      var fruit = require("scripts/factory/fruit");

      var Ucren = require("scripts/lib/ucren");

      var fruits = fruit.getFruitInView();

      /**

       * 碰撞检测

       */

      exports.check = function( knife ){

            var ret = [], index = 0;

            fruits.forEach(function( fruit ){

                var ck = lineInEllipse(

                  knife.slice( 0, 2 ), 

                  knife.slice( 2, 4 ), 

                  [ fruit.originX, fruit.originY ],

                  fruit.radius

                );

                if( ck )

                    ret[ index ++ ] = fruit;

            });

            return ret;

      };

      function sqr(x){

            return x * x;

      }

      function sign(n){

            return n < 0 ? -1 : ( n > 0 ? 1 : 0 );

      }

      function equation12( a, b, c ){

            if(a == 0)return;

            var delta = b * b - 4 * a * c;

            if(delta == 0)

                  return [ -1 * b / (2 * a), -1 * b / (2 * a) ];

            else if(delta > 0)

            return [ (-1 * b + Math.sqrt(delta)) / (2 * a),  (-1 * b - Math.sqrt(delta)) / (2 * a) ];

      }

      // 返回线段和椭圆的两个交点,如果不相交,返回 null

      function lineXEllipse( p1, p2, c, r, e ){

            // 线段:p1, p2    圆心:c    半径:r    离心率:e

            if (r <= 0) return;

            e = e === undefined ? 1 : e;

            var t1 = r, t2 = r * e, k;

            a = sqr( t2) * sqr(p1[0] - p2[0]) + sqr(t1) * sqr(p1[1] - p2[1]);

            if (a <= 0) return;

      b = 2 * sqr(t2) * (p2[0] - p1[0]) * (p1[0] - c[0]) + 2 * sqr(t1) * (p2[1] - p1[1]) * (p1[1] - c[1]);

      c = sqr(t2) * sqr(p1[0] - c[0]) + sqr(t1) * sqr(p1[1] - c[1]) - sqr(t1) * sqr(t2);

            if (!( k = equation12(a, b, c, t1, t2) )) return;

            var result = [

                  [ p1[0] + k[0] * (p2[0] - p1[0]), p1[1] + k[0] * (p2[1] - p1[1]) ],

                  [ p1[0] + k[1] * (p2[0] - p1[0]), p1[1] + k[1] * (p2[1] - p1[1]) ]

            ];

      if ( !( ( sign( result[0][0] - p1[0] ) * sign( result[0][0] - p2[0] ) <= 0 ) &&

               ( sign( result[0][1] - p1[1] ) * sign( result[0][1] - p2[1] ) <= 0 ) ) )

                  result[0] = null;

      if ( !( ( sign( result[1][0] - p1[0] ) * sign( result[1][0] - p2[0] ) <= 0 ) &&

               ( sign( result[1][1] - p1[1] ) * sign( result[1][1] - p2[1] ) <= 0 ) ) )

                  result[1] = null;

            return result;

      }

      // 判断计算线段和椭圆是否相交

      function lineInEllipse( p1, p2, c, r, e ){

            var t = lineXEllipse( p1, p2, c, r, e );

            return t && ( t[0] || t[1] );

      };

      return exports;

});

基于HTML5和JS实现的切水果游戏的更多相关文章

  1. 用HTML5+原生js实现的推箱子游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

  3. 基于HTML5坦克大战游戏简化版

    之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...

  4. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  5. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  6. 基于html5 canvas 的强大图表插件【Chart.js】

    名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...

  7. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

随机推荐

  1. PHP上传文件示例

    虽然大多数人认为Web只包含网页,但HTTP协议实际上可以传输任何文件,如office文档.PDF.可执行文件.AVI.压缩文件及各种其他文件类型.虽然FTP在历史上一直是向服务器上传文件的标准方式, ...

  2. winform用户控件、动态创建添加控件、timer控件、控件联动

    用户控件: 相当于自定义的一个panel 里面可以放各种其他控件,并可以在后台一下调用整个此自定义控件. 使用方法:在项目上右键.添加.用户控件,之后用户控件的编辑与普通容器控件类似.如果要在后台往窗 ...

  3. HDU 2545 树上战争 (并查集+YY)

    题意:给一棵树,如果树上的某个节点被某个人占据,则它的所有儿子都被占据,lxh和pfz初始时分别站在两个节点上,lxh总是先移动 ,谁当前所在的点被另一个人占据,他就输了比赛,问谁能获胜 比较有意思的 ...

  4. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  5. iOS 之 Cocoapods安装

    进入正题前,先来点前奏:了解cocoapods是某天看一个博客,那时才明白原来写项目不用一个个将三方库拷进项目里啊,惊讶的我是一塌糊涂的啊...(原谅我那时还没进入过正规的IT公司....好多你们自然 ...

  6. Apache, Tomcat, JK Configuration Example

    Example of worker.properties: worker.list=myWorker,yourWorker worker.myWorker.port=7505 worker.myWor ...

  7. EXCEL处理大量数据的潜在风险

    同事收到几份60几M的xls文件,电脑性能不够,发给我来处理. 处理发现有BUG.简单的vlookup,如果只是实验性的处理几个数据的话,发现没有问题,但批量对全部数据进行处理,就会出现#N/A的问题 ...

  8. 自动提交Git branch代码评审到Review Board系统

    背景 敏捷软件开发中,越小的反馈环,意味着软件质量越容易得到保证. 作为组件团队,我们的开发任务中,往往存在一些特性涉及到几十个功能点,开发周期持续数周或数月的情况.如何在开发过程中保证软件质量,是个 ...

  9. js 类型转换学习

    类型转换分为显示转换和隐式转换 参考http://www.cnblogs.com/mizzle/archive/2011/08/12/2135885.html 先事件显示的 通过手动进行类型转换,Ja ...

  10. java文件下载,上传,解压方法

    1.文件下载(亲测可用) private static final int BUFFER = 2 * 1024;// 缓冲区大小(2k)private boolean isSuccess = true ...