切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由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. JSON&XML总结

    JSON&XML: JSON----- //英译 Serialization:序列化 perform:执行 segue:继续 IOS5后 NSJSONSerialization解析 解析JSO ...

  2. 低功耗蓝牙BLE之连接事件、连接参数和更新方法

    转自:http://blog.csdn.net/zzfenglin/article/details/51304084 连接事件 在一个连接当中,主设备会在每个连接事件里向从设备发送数据包.一个连接事件 ...

  3. js通过location.search来获取页面传来的参数

    这篇文章主要介绍了通过window.location.search来获取页面传来的参数,经测试是OK的 ? 1 2 3 4 5 function GetQueryString(name) { var ...

  4. python常用文件处理函数_1

    1.range()函数 函数原型:range(start,end,scan) 参数含义:start:计数从start开始.默认是从0开始的,如range()等价于range(0,5)  end:计数到 ...

  5. 【Java EE 学习 16 上】【dbcp数据库连接池】【c3p0数据库连接池】

    一.回顾之前使用的动态代理的方式实现的数据库连接池: 代码: package day16.utils; import java.io.IOException; import java.lang.ref ...

  6. Oracle查询实用命令

    1.设置每行的长度: SET LIN[ESIZE] 200; 2.设置分页数量: SET PAGES[IZE] 50; 3.查看表空间相关信息: select file_id, tablespace_ ...

  7. 转载:稀疏矩阵存储格式总结+存储效率对比:COO,CSR,DIA,ELL,HYB

    http://www.cnblogs.com/xbinworld/p/4273506.html 稀疏矩阵是指矩阵中的元素大部分是0的矩阵,事实上,实际问题中大规模矩阵基本上都是稀疏矩阵,很多稀疏度在9 ...

  8. Jenkins + Ant + Git + Tomcat自动化部署

    环境linux下,大致的配置内容如下: 首先安装JDK配置环境变量等. 其次安装ANT配置ANT_HONE并把bin目录加入PATH中. 然后安装Git,并生成sshkey配置ssh 安装tomcat ...

  9. Jquery和其他库($的好处)

    ---很多时候我们的页面 会使用很多的 javascript库 ---而这个时候  jQuery这款重点在满足社区用户的需求的工具  做好了让jQuery在页面上与其他库和平共处的准备 凭借名副其实的 ...

  10. 畅通工程续——E

    E. 畅通工程续 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让 ...