智勇大闯关——心得

首先先上连接http://t.cn/zQRFjtd，（请使用chrome）这个淘宝招聘前端的热身赛

接着来说说自己做这个的心得，先声明本人学习前端的时间才半年，这里谈的心得也只是从一个入门者的角度来谈，如顺便推荐一下，昨天是看这个通关的https://gist.github.com/ourai/6239347 ，本文中通关的代码都是参考他的

首先是第一关，

最开始，以为是平时常见的密室逃脱的游戏，在页面上乱按一同，后来才想起查看源码。有提示，调用powder.blow()查看指纹。虽说是最简单的第一关，但自己由于从来没用过chrome的js代码调试功能，一直用的firefox,谷歌学习了半天才过关，

网上的另一种解法是

location.href = atob( document.getElementById("page").getAttribute("data-t") );

location的介绍

是window对象的一部分，包含当前url信息 (下面代码来自http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2012/0319/25335.html)

对于一个完全的URL，其为：
http://localhost:88/RQLibrary/development-bundle/index.jsp？module=a&arg1=b＃abcd
则用js时，
window.location.href -? 获取全部URL
window.location.protocol - 获取和谈 输出为 “http:”
window.location.host - 输出为 “localhost”
window.location.port - 输出为 “port”
window.location.pathname - 输出为 “/RQLibrary/development-bundle/index.jsp”
window.location.search - 输出为“？module=a&arg1=b”
window.location.hash - 输出为＃abcd

getAttribute() 在找到指定元素后，用getAttribute()方法把它的各种属性的值查询出来

data-t是自定义的属性，其中的内容被编码过，所以要使用atob()方法解码，atob()将已经被base64编码过的数据进行解码，具体可参见https://developer.mozilla.org/en-US/docs/Web/API/window.atob 这是第一关。

第二关

这关是属于调试css,图中的原理是中学学过的光的反射，但在css是要调节两个小镜子的位置，-webkit-transform:rotate(...deg)

WebKit是Safari浏览器和Google Chrome的渲染引擎

transform是css3的属性，transform的字面含义是：改变，使...变形，转换

1 //transform的语法
2 transformation ：none | <transform-function>[<transform-fuction>]*
3 //也就是
4 transform: rotate | scale | skew | translate |matrix

transform的属性有rotate()---旋转，单位deg例如 rotate(180deg)

skew()---扭曲，单位deg

scale()---缩放,大于1放大，小于1缩小

translate()---移动

matrix()---矩阵

具体用法细节可参见http://www.w3cplus.com/content/css3-transform/

第三关

二维码，之前没有认真观察，以为是把右下角的矩形再补上一个黑色小矩形，结果才知道是要用页面中被注释的一大段坐标

通关代码

 var str="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";
 var array = str.split(" ");
 var ctx = document.getElementById("qr-canvas").getContext("2d");
 ctx.fillStyle = "#000";
 for(var i=0; i<ctx.length;i++){
    var temp = array[i].split(",");
    ctx.fillRect(temp[0],temp[1],temp[2],temp[3]);   
}

正好前些天在学习canvas，思路很简单，将坐标存在一个数组中，循环画出每个值所对应的小方块

第四关，猜图。。做完觉得自己知道的不多，有必要开阔自己的视野

第五关，无尽的房间，

最笨的方法将url最后的数字改为next的数字，记录答案

(function() {
    var qrdata = getQrData().split(" ");
    var ctx = document.getElementById("qr-canvas").getContext("2d");

    qrdata.forEach(function( code ) {
        ctx.fillRect.apply( ctx, code.split( "," ) );
    });

    function getQrData() {
        var data;

        [].forEach.call(document.body.childNodes, function( node ) {
            if ( node.nodeType === document.COMMENT_NODE ) {
                data = node.data.replace(/\r|\n/g, "");
            }
        });

        return data;
    }
})();

第六关（未完）

var t=KISSY;
e=t.DOM;
window.location=Base64.decode(e.attr("#page","data-p"));

posted @ 2013-09-04 19:51 没头脑做前端阅读(362) 评论(0) 收藏举报

刷新页面返回顶部

酷酷的没头脑

智勇大闯关——心得

公告