前端突击队宣传banner
去年 CodeStar 第一季《前端特工》带来的热潮还没完全过去,3 月 21 号,短短几个月后 AlloyTeam 团队又强势推出了 CodeStar 第二季《前端突击队》,这次又将会给各位前端 er 带来什么视觉、体验和智力挑战上的盛宴?
可还记得去年的《前端特工》?你扮演着一个想要潜入腾讯窃取机密的前端特工,需要凭借自己的前端知识积累来解决一个个难关,最后获取到腾讯未发布新产品的源代码。漫画的风格,新奇的剧情,还有一个个融入剧情的前端谜题,给你一种新颖的在线解谜游戏的体验。
 QQ20140325-3@2x
这一次,AlloyTeam 团队大胆创新,不再沿用之前的套路,直接奉上一款精美的前端闯关游戏。如果说《前端特工》是在线解谜游戏体验,那《前端突击队》则是在线 ARPG 的体验!
游戏中,你不用再束缚于规定死的剧情、常见的线性答题,你可以开着自己的坦克在宽阔的地图上自由驰骋,树木、房子、茅草屋、小河、树桩,欣赏风景的同时可以随意地轰炸(喂喂,编剧,你是不是 bug 没改完,压力太大了。。)。路上散落着一个个宝箱等你去发现,好东西当然不容易获得,你需要解开宝箱上的前端谜题,才能获得宝箱中的物品。而宝箱中的物品,又是你进入下一个大地图的关键。
当然,最最重要的是,我们还有漂亮迷人的教官 Julia 一路相伴:
《前端突击队》教官Julia
终点没有对手的痕迹,但我已经轰炸过(= = 这又是什么歪句)。别再寂寞地码着代码,这个展现前端能力的舞台等着你的到来!

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2014/03/runningcoders/

  1. rose1988c 2014 年 6 月 14 日

    找宝箱费时!费时!费时!费时!费时!费时!费时!

  2. LALA 2014 年 5 月 31 日

    话说,不用兼容 IE9 以下就应该注明一下。。。那个 第一关那个让第二个子元素占满整行剩余空间的题

    让人想爆了最后用了个 display:flex;…. 完全无视大部分 IE,这里要面试的是专职 HTML5 开发工程师,麻烦注明一下。。

    • fdfd 2014 年 6 月 9 日

      运行环境
      IE10 W7(64) 位, 不能玩里面的游戏,求更正。

  3. 星幻飞鱼 2014 年 5 月 21 日

    编剧呀编剧既然给了宝箱无限重开的 BUG 为什么到了最后宝箱不开完不能进腾讯呢。。。。让我们走捷径的怎么活呀。。。。走捷径也是一种艺术啊!!!

  4. 李资明 2014 年 5 月 20 日

    前端只会一点点。。。坑爹呢。。。敢不敢来后端的

  5. shenwa12 2014 年 4 月 21 日

    界面缩小到 25% 会不停的左右切换……

  6. wislov 2014 年 4 月 4 日

    第一关那个让第二个子元素占满整行剩余空间的题,我的代码在本地通过,但提交却是错误。代码如下:

    Untitled Document

    #container {
    border:1px solid #000;
    background-color:#CCC;
    padding:15px;
    }
    #parent {
    border:1px solid #000;
    background-color:#999;
    padding:10px;
    }
    #child1,#child2 {
    border:1px solid #000;
    background-color:#666;
    }
    #child1 {
    float:left;
    }

    子元素 1
    子元素 2

  7. 祝梓毅 2014 年 4 月 3 日

    最后炸掉 TNT,根本不不听使唤,呵呵~

    • teen 2014 年 4 月 21 日

      怎么砸掉 tnt

      • teen 2014 年 4 月 21 日

        我发现子弹可以转弯,然后就把 TNT 干掉了

  8. aaa 2014 年 4 月 2 日

    还是很想喷你们 腐蚀的画 这题, 这句话真不会对做法产生歧义? 对 rgb 的四个信息,想办法让它变成 0 和 1, 好这办法不是一般的多:

    1. 将 rgb 的信息转换成 2 进制

    2. 将 rgb 进行灰度变换后计算所有像素的灰度平均值, 大于平均值的取 1 小于取 0

    3, 将图片所有的 rgb 值相加, 然后除以所有 rgb 的数量, 大于平均值的取 1 小于取 0

    4.rgb 3 通道相加除以 3, 然后 r 大于这个值取 1 小于取 0,g b 类似

    5…..

    而且 0 和 1 还可以交换位置

    所有我觉得这题真没问题么

    • aaa 2014 年 4 月 2 日

      1. 情况是指 rgb 通道的值转换, 比如 255 255 255 转换成 11111111 11111111 11111111

      • 冷月无声 2014 年 4 月 4 日

        我转了很多次,每次都让浏览器崩掉了!

  9. 蓝莓 2014 年 4 月 2 日

    都已经通关了,为什么还是打不开 TNT,左下角显示 2/3,右上角还是有一个隐藏的宝箱,过去打开还是加载失败。

    • 听世界 2014 年 5 月 28 日

      so do i

  10. wayne 2014 年 4 月 1 日

    发现晚了,估计很多人通关了

    • whyuds 2014 年 4 月 2 日

      是啊,不知道还会不会有笔试

  11. whyuds 2014 年 4 月 1 日

    终于通关了。目前有多少人通关了啊。能进面试了吗

  12. Secbone 2014 年 3 月 31 日

    话说地图右上角有个位置没有宝箱,移动过去也会提示 “按空格解锁宝箱”。。。

  13. whyuds 2014 年 3 月 31 日

    想确认一下我的答案提交之后是如何判断这个答案是否正确的,例如我现在卡在了高叉大魔王那里,在控制台里操作我完全可以解决这个问题,包括同步,但是在提交上出现问题了,不管我增加减少个 “;” 或者把自己获取元素对象的语句也加上,或者把 “;” 换成空格,提交后都是 false。
    就是想明确一下判断答案正确与否的规则,实在是不想在试答案上面花这么多时间。

    • TAT.老教授

      TAT.weber 2014 年 3 月 31 日

      最简单的,你截个图就可以看出是否步调一致了
      注意左下角那个哦

  14. whyuds 2014 年 3 月 31 日

    高叉的那个到底用不用同步

  15. 王玉东 2014 年 3 月 31 日

    反馈一下,你说你那个 iphone 网页键盘那个,我加引号竟然是错的。

  16. iCH1990 2014 年 3 月 31 日

    我想问一下,为什么做完之后没有提示啊… 我不是一次做完的,难道有影响么-0-

  17. 六间房 2014 年 3 月 30 日

    这个游戏好玩。

  18. Jed 2014 年 3 月 30 日

    获得核武器之后要怎么办呢,TNT 怎么都打不到啊。。。。

    • whyer 2014 年 3 月 30 日

      alloyImage 那条怎么搞

      • Jed 2014 年 3 月 30 日

        就是题目描述的那样,但是别被自己的思维束缚。重点是第二步。我只能说那么多了。。

    • 比企鹅 2014 年 3 月 30 日

      4 号武器是跟踪鼠标的跟踪弹 请到地图最上方慢慢射吧(由于判定坑爹,还是挺难的)

      • whyer 2014 年 3 月 30 日

        高叉那条提交没反应是怎么一回事

        • TAT.老教授

          TAT.weber 2014 年 3 月 30 日

          那应该是你提交的方式不对,不然会提示你答对或打错哦

          • whyer 2014 年 3 月 30 日

            高叉已经搞定

            • 祝梓毅 2014 年 4 月 3 日

              抓狂啊,射 TNT~

              • shen100 2014 年 4 月 9 日

                。。。

  19. moe 2014 年 3 月 29 日

    同卡在了 AlloyImage 上了,始终没有找到这几个字母,有人给点提示吗?

    • whyer 2014 年 3 月 30 日

      同卡,你解决没?

      • TAT.老教授

        TAT.weber 2014 年 3 月 30 日

        你可以试试关掉重开,会换一张图,有两张比较坑人

  20. HEHE 2014 年 3 月 29 日

    终于喜闻乐见地卡在了 ALLOYIMAGE 上将上面的 01 数据 8 位截取变成 ASCII 字符是什么意思啊,求大神们给个详细的解释啊。
    另求金馆长如何提交。。

    • skip 2014 年 3 月 30 日

      我是直接用这个提交的
      window.parent.postMessage({
      type : ‘checkAnswer’,
      data : {answer:answers}
      }, ‘*’);

      ALLOYIMAGE 那题还是没想明白!?

      • TAT.老教授

        TAT.weber 2014 年 3 月 30 日

        考各种转化,进制转 ASCII 很好搜的,按照步骤来还是不难

        • 王玉东 2014 年 3 月 31 日

          但是就是没有 ALLOYIMAGE 啊

发表评论到 wuaiyi