阿里智勇大闯关第三季答案

几个星期之前在 v2ex 上看到有人发帖说有有关前端的网页游戏玩，于是去看了看，发现挺有趣的，打算通关之后就发一下答案。无奈公司网络不行，宿舍没有网络，所以拖到现在。

第一关

看控制台提示要调用 xxx，不过追踪了一下调用的函数发现似乎疑似是显示指纹的代码被注释掉。于是看了一下前后的代码，发现有一段判断密码是否相等的代码，显然就不需要折腾了，直接将相等时执行的代码复制到控制台运行就可以了。不过要注意 decode 中的字符串要在页面的 #page 元素中的 data-t 属性的值取出来。

答案（location = 后的字符串视你自己的 data-t 属性值为准）：

window.location=Base64.decode('L3F1aXozL2luZGV4LnBocD90PU9UY3lNMkUwTUdSRGFuVXhNVzlCUVZWR1ZrRlJSMEZSTlZKVlFtZEI=')

第二关

意思是要你将那两个灰色的所谓的 “镜子” 通过移位和旋转将红色光线反射过黑色的点。需要用到 CSS3 的属性，先用审查元素找到镜子的 css 属性，直接将我修改过的属性复制进去。

答案：

#mirror1

top: 560px;

-webkit-transform: rotate(-82deg);

#mirror2

top: 430px;

-webkit-transform: rotate(172deg);

第三关

一看显然就是二维码了。控制台中的一大坨数字其实是二维码中黑点的位置信息。结合 canvas 这个 html5 标签元素，意思就是要我们把位置信息解析出来，操纵 canvas 画出二维码。直接上代码吧，复制到控制台运行就 ok 了。

答案：

strr='0,0,12,12 12,0,12,12 24,0,12,12 36,0,12,12 48,0,12,12 60,0,12,12 72,0,12,12 120,0,12,12 132,0,12,12 144,0,12,12 168,0,12,12 180,0,12,12 192,0,12,12 204,0,12,12 216,0,12,12 228,0,12,12 240,0,12,12 0,12,12,12 72,12,12,12 96,12,12,12 108,12,12,12 120,12,12,12 144,12,12,12 168,12,12,12 240,12,12,12 0,24,12,12 24,24,12,12 36,24,12,12 48,24,12,12 72,24,12,12 120,24,12,12 132,24,12,12 144,24,12,12 168,24,12,12 192,24,12,12 204,24,12,12 216,24,12,12 240,24,12,12 0,36,12,12 24,36,12,12 36,36,12,12 48,36,12,12 72,36,12,12 96,36,12,12 108,36,12,12 144,36,12,12 168,36,12,12 192,36,12,12 204,36,12,12 216,36,12,12 240,36,12,12 0,48,12,12 24,48,12,12 36,48,12,12 48,48,12,12 72,48,12,12 108,48,12,12 144,48,12,12 168,48,12,12 192,48,12,12 204,48,12,12 216,48,12,12 240,48,12,12 0,60,12,12 72,60,12,12 96,60,12,12 132,60,12,12 168,60,12,12 240,60,12,12 0,72,12,12 12,72,12,12 24,72,12,12 36,72,12,12 48,72,12,12 60,72,12,12 72,72,12,12 96,72,12,12 120,72,12,12 144,72,12,12 168,72,12,12 180,72,12,12 192,72,12,12 204,72,12,12 216,72,12,12 228,72,12,12 240,72,12,12 108,84,12,12 0,96,12,12 12,96,12,12 24,96,12,12 36,96,12,12 48,96,12,12 72,96,12,12 84,96,12,12 96,96,12,12 132,96,12,12 156,96,12,12 180,96,12,12 204,96,12,12 228,96,12,12 0,108,12,12 24,108,12,12 36,108,12,12 60,108,12,12 120,108,12,12 132,108,12,12 144,108,12,12 156,108,12,12 168,108,12,12 216,108,12,12 240,108,12,12 12,120,12,12 36,120,12,12 48,120,12,12 60,120,12,12 72,120,12,12 84,120,12,12 108,120,12,12 120,120,12,12 144,120,12,12 168,120,12,12 180,120,12,12 228,120,12,12 24,132,12,12 36,132,12,12 60,132,12,12 84,132,12,12 96,132,12,12 108,132,12,12 120,132,12,12 132,132,12,12 144,132,12,12 156,132,12,12 168,132,12,12 204,132,12,12 216,132,12,12 0,144,12,12 12,144,12,12 24,144,12,12 48,144,12,12 72,144,12,12 84,144,12,12 96,144,12,12 108,144,12,12 144,144,12,12 180,144,12,12 204,144,12,12 228,144,12,12 96,156,12,12 108,156,12,12 120,156,12,12 144,156,12,12 180,156,12,12 204,156,12,12 216,156,12,12 228,156,12,12 240,156,12,12 0,168,12,12 12,168,12,12 24,168,12,12 36,168,12,12 48,168,12,12 60,168,12,12 72,168,12,12 96,168,12,12 108,168,12,12 120,168,12,12 132,168,12,12 156,168,12,12 192,168,12,12 204,168,12,12 216,168,12,12 228,168,12,12 0,180,12,12 72,180,12,12 108,180,12,12 180,180,12,12 192,180,12,12 204,180,12,12 216,180,12,12 228,180,12,12 0,192,12,12 24,192,12,12 36,192,12,12 48,192,12,12 72,192,12,12 96,192,12,12 108,192,12,12 120,192,12,12 132,192,12,12 156,192,12,12 192,192,12,12 228,192,12,12 0,204,12,12 24,204,12,12 36,204,12,12 48,204,12,12 72,204,12,12 96,204,12,12 120,204,12,12 132,204,12,12 144,204,12,12 156,204,12,12 168,204,12,12 180,204,12,12 204,204,12,12 216,204,12,12 0,216,12,12 24,216,12,12 36,216,12,12 48,216,12,12 72,216,12,12 96,216,12,12 144,216,12,12 168,216,12,12 180,216,12,12 204,216,12,12 216,216,12,12 0,228,12,12 72,228,12,12 96,228,12,12 132,228,12,12 144,228,12,12 156,228,12,12 168,228,12,12 180,228,12,12 204,228,12,12 216,228,12,12 0,240,12,12 12,240,12,12 24,240,12,12 36,240,12,12 48,240,12,12 60,240,12,12 72,240,12,12 96,240,12,12 108,240,12,12 120,240,12,12 144,240,12,12 228,240,12,12'
arr=strr.split(' ');
newarr=[];
arr.map(function(n){newarr.push(n.split(','))});
var c=document.getElementById("qr-canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#000";
newarr.map(function(n){ctx.fillRect(n[0],n[1],n[2],n[3])});

第四关

看图猜字。比较坑爹的一关，我有一次卡在一幅不太认识的图上了。这个看运气吧。
自己多次做刷出来的部分答案列表：

grunt-contrib-cssmin
www.stackoverflow.com
sublime text
v
www.github.com
wordpress
CSS Sprites
jade
less
underscore.js

第五关

做过其他网页游戏例如 python 的话对这关就不陌生了，就是要你不断地请求 url 而已，控制台也提示提供 jQuery 了。
答案：
先运行如下代码，第一行代码 “index.php?t=” 和“&room=”中间的那串字符串换成自己地址栏同样位置的字符串，第二行代码的 “24” 也是：

url='index.php?t=OTk1ZDJjYjhyMzRsRldWd2NDVlF4UkRRNWNCRTlW&room=';
urlreal=url+'24';
strr='';
$.get(urlreal, function(data){
	var mess=$(data).find('#message').text();
	var number=$(data).find('#next-room').text();
	strr=strr+mess;
	urlreal=url+number;
	console.log(strr);
})

可以看到控制台会输出一些字，接着不断执行如下代码：

$.get(urlreal, function(data){
	var mess=$(data).find('#message').text();
	var number=$(data).find('#next-room').text();
	strr=strr+mess;
	urlreal=url+number;
	console.log(strr);
})

直到控制台输出的文字没有再变化了，你也就看到了下一关的网址了。
为什么我做得这么麻烦是因为懒，不想写判断和循环了，况且手动复制粘贴运行也很快。而且过关时间是有限制的。

最后一关

我是直接看了一下 html 和 js 源代码，发现其实要过关就一个跳转而已，于是直接复制网址过的。其实是要提交 script 代码利用 xss 将那个图片移走来过关的。
我的答案：
将 #page 的 data-p 属性值复制到地址栏替换类似字符串跳转过关。

最后

审查元素发现比基尼美女的下身是可以点击的，就是链接到邮箱了，恶趣味。