基于HTML5和JS实现的切水果游戏

Posted 2020-08-26 CC大神01

切水果游戏曾经是一款风靡手机的休闲游戏，今天要介绍的就是一款网页版的切水果游戏， 由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;
});