切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由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. Linux下xampp集成环境安装配置方法 、部署bugfree及部署禅道

    XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包.XAMPP 是一个易于安装且包含 MySQL.PHP 和 Perl 的 Apache 发行版.XAMPP 的确非 ...

  2. AngularJS学习之依赖注入

    1.什么是依赖注入:简称DI,是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端 ...

  3. Java日期处理

    日常工作中经常遇到关于日期的处理,下面把自个写好的Java代码段分享一下,也当做自个的一个备份,同时也欢迎交流,如若分享请注明出处,谢谢. 1.返回两个时间段之间的月份: /** * 返回任意两个月份 ...

  4. WinServer 2008 远程桌面连接设置

    WinServer 2008 远程桌面连接设置   1.在服务器端启用远程桌面>>计算机--右键--管理 看远程桌面是否已经启用,若未启用则启用它.配置远程桌面,勾选允许任意版本远程桌面的 ...

  5. 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室

    一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...

  6. CodeForces 540

    A. Combination Lock time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  7. [转] JS中简单的继承与多态

    这里讲了一个最最最简单的JS中基于原型链的继承和多态. 先看一下以下这段代码的实现(A是“父类”,B是“子类”): var A = function(){ this.value = 'a'; this ...

  8. 踩坑事件:windows操作系统下的eclipse中编写SparkSQL不能从本地读取或者保存parquet文件

    这个大坑... .... 如题,在Windows的eclipse中编写SparkSQL代码时,编写如下代码时,一运行就抛出一堆空指针异常: // 首先还是创建SparkConf SparkConf c ...

  9. requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】

    这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...

  10. uri不能处理结尾为点的url的问题

    最近需要和某公司进行接口对接,发现用WebClient获取URL结尾带.的资源,会出404错误.但是用IE还有其它浏览器访问此资源,还能找到它.很神奇. 于是,我百度了,找到的一堆都是说此url不规范 ...