JavaScript奇淫技巧：变速齿轮

JavaScript奇淫基本功：油浴

在PC黄金时代，曾有个名叫“油浴”的奇妙应用软件，能大力推进或减缓掌控系统天数。

彼时常见来修正格斗游戏速率，可同时实现BUG通常的效用，很难以置信。

责任编辑，将用JavaScript重制而此机能，同时实现三个用作网页的油浴，可用作H5格斗游戏、网页小格斗游戏变速箱。

效用展现

具体来说看同时实现后的效用模拟。

图一、失速效用：

图二、快速效用：

网页三个循环式慢速的陀螺，透过网页中“快速”、“失速”三个按键，能入侵并掌控它的速率。

不光表明：变速箱操作方式，仍未修正陀螺慢速的Monpazier，而要隐性的出现改变了网页的天数水势，使陀螺慢速的速率出现了出现改变。

控制技术基本原理

如上图所示，该机能是用API Hook控制技术同时实现接管setTit。

源码解析

UI部分：

网页UI 中，三个按键、三个CSS同时实现的陀螺。

陀螺移动逻辑代码：

从源码可知，是用setTimeout掌控陀螺在一定范围内循环式慢速，接下来是重点。

setTimeout的Hook操作方式：

如图中代码所示，核心代码并不复杂，而要十分简单明了：定义有三个公共变量speed，快速或失速就是掌控此值。然后在setTimeout的替代函数中，对argument[1]参数增加此变量值。

完整代码

以下即是此变速箱机能的完整测试代码，保存为html文件即可使用。

失速快速

LOG：

//变速箱增量var speed = 0;document.getElementById(“speed”).innerHTML = speed;//Hook setTimeut，同时实现变速箱//备份原始setTimeout函数var pre_setTimeout = setTimeout;//新的setTimeout函数var setTimeout = function(){arguments[1] = arguments[1] + speed;console.log(“arguments”, arguments[1]);//最小为1，1毫秒if(arguments[1]<1) arguments[1] = 1;//执行回调函数pre_setTimeout.apply(this, arguments);}//快速function add_speed(){speed = speed – 20;console.log(“速率”,speed);document.getElementById(“log”).innerHTML += (new Date).toGMTString() + ” 速率:” + (-speed) + “\n”;if(speed < -100) speed = -100document.getElementById(“speed”).innerHTML = -speed;}//失速function dec_speed(){speed += 20;console.log(“速率”,speed)document.getElementById(“log”).innerHTML += (new Date).toGMTString() + ” 速率:” + (-speed) + “\n”;if(speed > 200) speed = 200document.getElementById(“speed”).innerHTML = -speed;}//陀螺移动动画function move() {var box = document.getElementById(“box”);var current_position = 0;var left = 1;//循环式调用function render() {setTimeout(render, 100);current_position += left;if (current_position == 200 || current_position == 0){left = -left;}box.style.left = current_position + “px”;}render();}move();

JS油浴DEMO

速率增量：

JS代码保护

JavaScript是明文代码，很容易被他人任意拿去使用。

通常，我们不希望自己写的代码泄露，比如责任编辑所介绍的变速箱机能，初闻感觉十分奇妙，但代码公开后可知竟如此简单。很多控制技术、机能都是如此，因此，能对JavaScript代码进行混淆加密处理。

以上面代码为例，如果使用JShaman加密其中的JavaScript代码：