基于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;

});

时间: 2024-10-10 06:11:04

基于HTML5和JS实现的切水果游戏的相关文章

基于html5 canvas和js实现的水果忍者网页版

今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Raphael,效果很赞,赶紧来膜拜一下.效果图如下: 在线预览   源码下载 实现的代码. html代码: <canvas id="view" width="640" height=&q

HTML日记——试着解剖HTML5版切水果小游戏(1)

2018.1.11 实践是最好的老师,在学习阶段通过分析一部成型的作品来了解一门语言的运作方式不失为理解这门语言的一种方法. 这里我们选择分析HTML5版的切水果游戏来进一步了解HTML5和JavaScript. 先看html文件的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content=&q

基于HTML5坦克大战游戏简化版

之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射子弹,命中敌方坦克后也会发出声音,效果还算可以.效果图如下: 在线预览   源码下载 实现的代码. javascript代码: window.addEventListener("load", canvasApp, false); //是否支持canvas function canvasSu

Agile国人出品HTML5+CSS3+JS移动应用开发框架

Agile 是一个基于HTML5+CSS3+JS的移动应用开发框架,在体验上尽量接近Native Like,并且同时支持单页模式和多页模式. Agile 让HTML5在移动应用开发中充分发挥优势.所有开发者都能快速上手.所有设备都可以适配.所有项目都适用. 简单.可扩展 Agile 支持Zepto和jQuery双引擎及相应的扩展:同时Agile均支持单页模式和多页模式的移动应用,可以与ExMobi.PhoneGap等流行的跨平台开发框架一起使用. 一个框架.多种设备 你的移动应用能在 Agile

使用NGUI模仿制作“切水果”

只做学习之用,无任何商业元素 如有侵权,即删除 首先,载入NGUI包,完成后如下图所示: 新建一个Sprite 然后,设置UIRoot 注意:图中画圈的部分--Scaling Style设置为"Fixed Size On Mobiles"顾名思义,整个画面开启UI整体缩放支持(在手机中) 调整Main Camera的监控范围,使得和UIRoot下的Camera同样大小. 开始新建图集(Fruit) 将图片选中,所有图片就会出现在以后View Sprites下,如图 然后在刚才新建立的S

Unity知识三:两种方式实现切水果的刀痕

Unity作为游戏开发平台之一,还是有很多实用的小技巧的,今天来学习一下怎样用两种方式来显示切水果游戏中的刀痕: 1.正常显示下的刀痕: 什么叫正常显示下的呢?我们所接触过的切水果游戏一般都是2D游戏,那我们知道,2D游戏可以用Unity直接来做,还可以使用NGUI.UGUI或者其他方法通过UI来实现. 所以我们第一种方法就是不借助UI来做. 首先来看看我们刀痕的素材:(需要的同学可以右键另存.^_^) 打开Unity: 新建一个空游戏体,命名为"BackGround",然后在组件面板

基于HTML5的PACS--HTML5图像处理(7)实现客户端JS调整窗宽窗位

仅提供参考和学习,代码仅为了指明个思路,转载请注明出处. 要查看此系统更多的图像处理功能请参考: 区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理 在此之前,此系统是结合DICOM的WADO标准,在浏览器里通过javascript操作返回的JPG图片.这种服务器端解析,客户端展现的方式,对实现图像的移动.缩放.旋转.测量等图像操作能够实现实时的交互.但这种方式存在着几个弊端: 1.获取图像上的CT值(钙化值)信息的时候,要频繁的和服务器进行交互. 2.调整图像的窗宽

基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用!

原文:基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用! 源代码下载地址:http://www.zuidaima.com/share/1550463575788544.htm 分页,查询功能已经全部用JS实现,无需再做此类代码编写,嵌入数据即可,真心美观好用.       

fabric.js的简单上手及基于fabric.js的canvas切图工具:1、基本使用及配置

参考链接 Fabric.js 简单介绍和使用 简介 Fabric.js是一个可以简化canvas程序编写的库. Fabric.js为canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具.基于MIT协议开源,在github上有许多人贡献代码. 为什么选择fabric.js 手上的项目必须使用canvas 原生的canvas API不够友好 用fabric.js实现切图用户体验更好 为项目以后的迭代留下扩展的余地 简单上手 请参考文章开头的参考链接 这里主要介绍