zoukankan      html  css  js  c++  java
  • 阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略

    《智勇大闯关第三季》 闯关地址:http://ued.campus.alibaba.com/quiz3/index.php(需要chrome)

    以我目前的水平,我认为两个小时之内闯到第六关的,都可以算是高手了,咳,这还只是一个校招游戏。

    攻略开始之前,先做个声明:

    本人菜鸟一个,从第四关开始就歇菜了,此攻略来自于JS/Javascript交流群(31609956),本人撰稿,并由以下几位同学协助完成:嚼头(592737223)、js-dino(904591031)、难得清醒(582416882) ,尤其是dino同学,提供了很多帮助,膜拜了要。

     

    第一关

    1. 鼠标点击号码器上的回车键,弹出“Opps,不是这个密码!”
    2. f12,resources中查找弹出的这段文字,在step0.js的第155行:window.location = Base64.decode(S.one("#page").attr('data-t')); 可以看出密码输入成功之后会跳转到Base64.decode(S.one("#page").attr('data-t'));
    3. f12,elements中找到id="page"的div,复制data-t的属性值L3F1aXozL2luZGV4LnBocD90PU9HUTNORFpsTXpreVoxcHFXa3BCYkVWRlFsWlpUMVZuTUVaV2FEbFc=
    4. f12,console中输入window.location = Base64.decode("L3F1aXozL2luZGV4LnBocD90PU9HUTNORFpsTXpreVoxcHFXa3BCYkVWRlFsWlpUMVZuTUVaV2FEbFc="),按回车运行,此时页面跳转到第二关。
    总结:考察的应该是浏览器调试DOM属性操作之类的东西。

     

    第二关

    原理:红色激光束上下各有一个灰色的小镜子,需要改变两面镜子的位置和角度让激光束穿过小黑点。考察的是css2的定位以及css3的旋转。
    操作:下方的镜子调整后的位置大概是top: 550px;添加一个css3的旋转属性:-webkit-transform: rotate(-82deg);,后续原理同上。最后结果如下图

    点击确定进入第三关。

     


    第三关

    1. 标题是坐标,隐藏的线索,右下角一个二维码框,并且控制台中隔一段时间输出了这么一段文字X:咦,这里有个canvas,是不是在上面画些什么——看样子是需要写一些代码画点二维码,考察canvas。
    2. F12,elements中id=main的div下面两行,有一大片注释掉的数字,观察数字,是每四个数字一组,并且用空格隔开了。再看二维码部分是一个canvas,由此猜想这是需要根据fillRect(x,y,width,height)画矩形。
    3. 复制下注释部分的数字串,F12, console中运行以下代码
    var c = document.getElementById('qr-canvas').getContext('2d');
    var s="0,0,12,12 12,0,………..……太多了省略……….....,12,12 228,240,12,12";
    var a=s.split(' ');
    for(i=0;i<a.length;i++){
    var b=a[i].split(',');
    c.fillRect(b[0],b[1],b[2],b[3]);
    }
    此时,二维码已经画满了,效果图如下:

    确定之后跳转到第四关。

     


    第四关

    闯关思路:这一关主要考察技术大牛常去的网站、常用的工具、常用的技术等常识性问题。注意要根据图片和图片下的提示来猜答案(图片相同但提示不同会导致答案也不同)。下面贴出图片和对应答案:(图在上答案在下)

    w3


    stackoverflow


    Jade


    zepto


    Github

     

    CSS Sprites 

    Grunt (楼下补充by fanfanqq250

    这里的问题比较多,不过也就是随机出现三到四个的样子,上面列的不全。吶,接下来会跳转到第五关了。

     

    第五关

    1. 注意观察room后面的数字和浏览器地址栏后面的room参数,两者是不一样的,比如我的t=OTkzN2JmYzNEOU13YkxCd1VDQWxBQ0RsY0JCeHNH&room=35。思路应该是把气泡里的房间号改到地址栏然后回车,不断改不断回车,注意观察下面气泡文字的变化。可以使用下面的代码不断运行。
    2. F12,console中运行以下代码
    var search = location.search;
    location.search = search.replace(/room=d*/, function( ) {
    return "room=" + jQuery("#next-room").text();
    });
    3. 重复运行第二步的代码,会看到聊天气泡中的文字在不断变化,如下图

    继续重复运行代码,会看到他一个字一个字的告诉你下一关的链接了,注意要记下来,比如我的:/quiz3/index.php?t=ZTlkZDVhOWV1dmhvY0tBVkFHQkFaVFdnVlJVeFVD,然后把个t参数复制到地址栏,回车,第六关就开始了。

    注:是不是有更好的办法?

     

    第六关

     

    这一关需要清除掉X的指纹信息,无视此处的输入框,方法同第一关 (搞不明白通关方法一样的话,那设置此关有何意义?)。

     ——————————————————

    以上为第三季,下面贴一个第二季的,有兴趣的可以玩玩。http://ued.taobao.com/quiz2/

    转载请注明出处:http://www.cnblogs.com/youryida  欢迎留言或qq交流(1140215489)
  • 相关阅读:
    idea配置web项目启动的详细说明
    mybatis如何防止sql注入(1)
    SQL基础(3)
    SQL基础(2)
    SQL基础(1)
    SpringMVC—对Ajax的处理(含 JSON 类型)(3)
    SpringMVC 之URL请求到Action的映射(1)
    Oracle 多表查询(2)
    Oracle 多表查询(1)
    mysql查询最近30天、7天、每天、昨天、上个月的记录
  • 原文地址:https://www.cnblogs.com/youryida/p/3260685.html
Copyright © 2011-2022 走看看