切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由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. js通过location.search来获取页面传来的参数

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

  2. Pyqt5 获取命令行参数sys.argv

    大家有没有注意到,很多软件都能接收第三方应用触发命令行参数,根据参数打开想要的效果. 在windows任务管理器调取命令行列,我们同样能看到进程中有好多是带有参数的. 现在,我们用Pyqt5 (Py3 ...

  3. Jetty使用教程(一)——开始使用Jetty

    一.Jetty简介 1.1 什么是Jetty Jetty是一个提供HHTP服务器.HTTP客户端和javax.servlet容器的开源项目.   这个入门教程分为五个部分: 第一部分部分重点介绍如何使 ...

  4. C++ 定义全局数组

    数组怎么用,全局数组就怎么用,只是他的作用域不一样才叫全局数组... 在A.h 或 A.cpp中定义char buf[10]; 如果在B.cpp要用,就在其开头中写成 extern char buf[ ...

  5. Linux学习笔记(5)-hello world

    经过三天的熟悉,我已经将教程中那些常用命令都使用了一遍,所以,从今天起,我已经从一直Linux菜鸟蜕变成了大雕-- Linux的命令无穷多,要想背下来那肯定是不可能的,所以我的目标便是混个手熟,那些常 ...

  6. BFC的深入理解

    一:BFC是什么东东 了解BFC前先一了解一下Box和Formatting Context (1)B: BOX即盒子,页面的基本构成元素.分为 inline . block 和 run-in 三种类型 ...

  7. 分享Kali Linux 2016.2第50周镜像文件

    分享Kali Linux 2016.2第50周镜像文件Kali Linux官方于12月11日发布Kali Linux 2016.2的第50周镜像.这次保持以往规律,仍然是11个镜像文件.默认的Gnom ...

  8. 一个print的简单错误

    原因是python 2.X 可以print 内容 而3.X 取消了这种写法 改成了print(内容)

  9. Leetcode Longest Palindromic Substring

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  10. *HDU1251 字典树

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...