基于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 ...
随机推荐
- Linux系统virtualbox + ubuntu + xshell 问题与注意事项
序言:ubuntu闭源软件太多,一般不推荐使用:没钱可以使用centos.debian:有钱使用redhat 目前主流和常用的Linux版本主要有:1.Redhat 版本5.5和6.0最新:培训.学习 ...
- 【转】Java开发中JDBC连接数据库代码和步骤总结
(转自:http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html) JDBC连接数据库 创建一个以JDBC连接数据库的程序,包含7个 ...
- Nginx 反代理其他搜索引擎
反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...
- 移动硬盘安装win7,蓝屏,0x0000007B
@echo offecho 加载注册表echo.reg load HKLM\sys %1\WINDOWS\system32\config\system >nul 2>nulif error ...
- 图像分割算法-GraphSeg算法
图像分割是图像处理中的一个基础课题范围,本文简要介绍一种比较好的图像分割算法: Efficient Graph-Based Image Segmentation 论文出处:http://cs.brow ...
- pyhon 模块与库
引用“http://www.iplaypython.com/module/” 引用“http://codingnow.cn/language/265.html” Python模块是什么? 玩蛇网:一个 ...
- 开机自动启动Tomcat
一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. 2.安装Tomc ...
- NoSQL-Redis【2】-HDEL给我的一个惊喜
用HDEL删除Hash最后一个域的时候,Redis奇迹般的帮我清除了Key,真是考虑周到啊! 127.0.0.1:6673[2]> HMSET USER:Zhangshan Name 'Zhan ...
- BZOJ4712 : 洪水
首先不难列出DP方程: $dp[x]=\min(w[x],h[x])$ $h[x]=\sum dp[son]$ 当$w[x]$增加时,显然$dp[x]$不会减少,那么我们求出$dp[x]$的增量$de ...
- 创建DOTA2本地数据库(一)
在APP中,用本地数据库好于频繁的联网去获取相关数据.我使用SQLite作为本地的数据库,比较轻巧. 英雄 首先先建立英雄的数据库,暂时我先只设置ID,name,loaclized_name这三种,我 ...