切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由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. Sublime3学习笔记

    学习笔记: 学习内容:sublime 3 学习时间:2015-10-20 预计学习时长:1 hour/3 day 学习工具&资料: 官网:http://www.sublimetext.com/ ...

  2. 【Java EE 学习 48】【Hibernate学习第五天】【抓取策略】【二级缓存】【HQL】

    一.抓取策略. 1.hibernate中提供了三种抓取策略. (1)连接抓取(Join Fetch):这种抓取方式是默认的抓取方式.使用这种抓取方式hibernate会在select中内连接的方式获取 ...

  3. IL指令详细

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  4. linux协议栈skb操作函数

  5. MEF Parts Sample

    namespace Microshaoft.MEF.Contracts { using System; public delegate void ExceptionEventHandler<TS ...

  6. dp表模型-如何写出for循环动态规划

    题目很肤浅.. 但是这件事我们要做.. 那么有一种方法叫做刷表法.. 当你发现这个问题具有最优子结构,重叠子问题时 那么这是一个dp问题是使用本方法的前提 画出该dp状态所对应的矩阵 画出转移关系线. ...

  7. MIT 6.828 JOS学习笔记5. Exercise 1.3

    Lab 1 Exercise 3 设置一个断点在地址0x7c00处,这是boot sector被加载的位置.然后让程序继续运行直到这个断点.跟踪/boot/boot.S文件的每一条指令,同时使用boo ...

  8. android 无限循环的viewpager

    思路 例如存在 A -B -C 需要在viewpager滑动时无限循环 1.我们可以设计 C' A B C A'  C'与C相同,A'与A相同 2.滑动到A'时,则index回到1 3.滑动到C'时, ...

  9. 《DSP using MATLAB》示例Example5.8

    代码: n = [0:1:99]; x = cos(0.48*pi*n) + cos(0.52*pi*n); n1 = [0:1:9]; y1 = x(1:1:10); % N = 10 figure ...

  10. BZOJ4643 : 卡常大水题

    将边按权值$A$从小到大排序,从小到大枚举$\max(A)$,然后双指针从大到小枚举$\max(B)$. 按权值$B$用大根堆维护所有已经加入的边,每次$\max(B)$减少时,不断取出权值$B$最大 ...