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

切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由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实现的切水果游戏的更多相关文章
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 基于html5 canvas和js实现的水果忍者网页版
今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版 ...
- 基于HTML5坦克大战游戏简化版
之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...
- heX——基于 HTML5 和 Node.JS 开发桌面应用
heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- 基于html5 canvas 的强大图表插件【Chart.js】
名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...
- 基于html5实现的愤怒的小鸟网页游戏
之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 快速开发基于 HTML5 网络拓扑图应用
采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...
随机推荐
- Swift 提示:Initialization of variable was never used consider replacing with assignment to _ or removing it
Swift 提示:Initialization of variable was never used consider replacing with assignment to _ or removi ...
- PIL中分离通道发生“AttributeError: 'NoneType' object has no attribute 'bands'”
解决方法: 这个貌似是属于一个bug 把Image.py中的1500行左右的split函数改成如下即可: def split(self): "Split image into bands&q ...
- Java数组技巧攻略
Java数组技巧攻略 0. 声明一个数组(Declare an array) String[] aArray = new String[5]; String[] bArray = {" ...
- cve-2015-5199漏洞分析
继续之前hackteam的flash漏洞,这次的对象为cve-2015-5199,遂做一下记录. 首先,在该exp中TryExpl函数为漏洞的触发函数,该函数也为本次调试的主要对象,函数的开始首先创建 ...
- 《DSP using MATLAB》示例Example5.16
代码: x1 = [1,2,2,1]; x2 = [1,-1,-1,1]; x3 = conv(x1,x2); % N = 5 n1 = 0:1:length(x1)-1; n2 = 0:1:leng ...
- 分布式缓存技术redis学习系列(三)——redis高级应用(主从、事务与锁、持久化)
上文<详细讲解redis数据结构(内存模型)以及常用命令>介绍了redis的数据类型以及常用命令,本文我们来学习下redis的一些高级特性. 安全性设置 设置客户端操作秘密 redis安装 ...
- android解析json
android2.3提供的json解析类 android的json解析部分都在包org.json下,主要有以下几个类: JSONObject:可以看作是一个json对象 JSONStringer:js ...
- Javascript并发模型和事件循环
Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单线程的. Javas ...
- innerHTML 与 innerText 的区别
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...
- Java底层实现 - CPU术语
1.内存屏障(memory barriers)是一组处理器指令,用于实现对内存操作的顺序限制 2.缓冲行(cache line)CPU高速缓存中可以分配的最小存储单位.处理器填写缓存行时 会加载整个缓 ...