当前位置：首页 > article >正文

水果忍者网页版（重制版）

article 2024/10/23 1:07:57

水果忍者网页版

前言
效果图
开发历程
部分源码
领取源码
下期更新

前言

水果忍者游戏通过 JS 小组的官微进行了首发，绘图上，仍然是采用了 VML+SVG，这是我一直比较推荐的组合，市面上针对 VML、SVG 封装的库还是满多的，我比较顺手的就 Raphael 了，他的 API 非常简单，支持链式调用，浏览器的兼容性做得很不错。

效果图

在这里插入图片描述

开发历程

在开发水果忍者时，我升级了一把 2.1.0 版本，发现性能比较低，又一直找不到原因，无奈又得降回了 1.5.0，值得注意的是，2.1.0 的
API 并不完全兼容 1.5.0，其中 rotate/scale/translate 方法被标识为即将弃用而使用 transform
替代，并且 rotate/scale 这两个接口使用 transform 代替时，不能完美支持像 rotate/scale 原有的功能。

动画方面：

主要涉及两个模块：tween 和 timeline，tween 提供一系列关于动画路径的算子；timeline 用于做全局的时间管理。

场景控制：

一个专门管理场景切换的脚本，它提供类似于 switchSence 的接口，通过接口来进行场景的切换，本游戏设计了「菜单」、「游戏界面」、「DOJO 界面」以及「GameOver」等场景。

游戏采用了 commonJS 的规范来管理模块，由于模块之间需要通讯，除了 require 之外，message 和 state 两个模块也是解藕的两大利器，message 是消息管理器，提供 postMessage 和 addEventListener 两个接口，分别用于发送和接收消息；state 是状态管理器，提供数个关于状态读写的接口。

layer.js 在游戏当中做为 Raphael 库的一个补充，扩展了图层管理的能力，Raphael 只有 toFront 和 toBack 两个关于图层顺利控制的接口，想精准定位某个元素处于某个层次不是很方便，作为弥补，layer.js 中维护了一个图层 mapping，每个图层的 z 索引值在这个 mapping 中进行记录。

collide 模块用于做碰撞检测运算，这里，collide 只关心线段与椭圆之间的关系，因为刀路过的痕迹与水果可以抽象成线段的拼接和椭圆。

此外，游戏的脚本中还包括「模块工厂」和「对象包」两个东西，「模块工厂」里存放着几个模块模型，通过这些模型可以衍生出来任意个类型相同的模块，有点像模块级别的继承，由于是工厂模式创建的，所以管它叫模块工厂；「对象包」里则放着每一个元素对应的控制脚本，游戏主逻辑通过对象包中的对象去操纵元素。

最后，还有两个脚本 control.js 和 main.js，control.js 主要负责管理人机交互部分的逻辑，main.js 则管理游戏主线业务逻辑。

好了，暂时就这些。

部分源码

var stack = {};
	var cache = {};
	var callbacks = {};
	
	exports = function( key ){
	
		if( cache[ key ] )
		    return cache[ key ];
	
		return cache[ key ] = {
			is: function( value ){
			    return stack[key] === value;
			},
	
			isnot: function( value ){
			    return stack[key] !== value;
			},
	
			ison: function(){
				return this.is( true );
			},
	
			isoff: function(){
				return this.isnot( true );
			},
	
			isunset: function(){
				return this.is( undefined );
			},
	
			set: function(){
				var lastValue = NaN;
				return function( value ){
				    var c;
				    stack[key] = value;
				    if( lastValue !== value && ( c = callbacks[ key ] ) )
				    	for(var i = 0, l = c.length; i < l; i ++)
				    		c[i].call( this, value );
				   	lastValue = value;
				}
			}(),
	
			get: function(){
			    return stack[key];
			},
	
			on: function(){
				var me = this;
				me.set( true );
				return {
					keep: function( time ){
						timeline.setTimeout( me.set.saturate( me, false ), time );
					}
				}
			},
	
			off: function(){
				var me = this;
			    me.set( false );
			    return {
			    	keep: function( time ){
			    		timeline.setTimeout( me.set.saturate( me, true ), time );
			    	}
			    }
			},
	
			hook: function( fn ){
				var c;
			    if( !( c = callbacks[ key ] ) )
			        callbacks[ key ] = [ fn ];
			    else
			    	c.push( fn );
			},
	
			unhook: function(){
			    // TODO: 
			}
		}
	};;

	return exports;
});