Taobao FED

分类:Web开发

D2 论坛淘宝 FED 展台游戏「氪金弹头」制作始末

「氪金弹头」游戏,是淘宝 FED 团队互动小组为 D2 开发的展台游戏,也是互动技术的一片试验田。这款游戏的设计类似经典的「坦克大战」,每个玩家控制一辆坦克,在一篇草丛中作战(互相攻击)。基本玩法是,使用一台大屏电视显示战场和坦克,玩家使用手机扫码登录,手机「变身」为遥控器,控制大屏幕上属于自己的坦克。目前,这款游戏已经部署在淘宝 FED 博客上,亲可以点击下面的按钮进入游戏。 D2 当天,承

近几年前端技术盘点以及 2016 年技术发展方向

Web 发展了几十个春秋,风起云涌,千变万化。我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走。Web 技术发展的速度让人感觉那几乎不是继承式的迭代,而是一次又一次的变革,一次又一次的创造。这几年的前端,更为之甚! 我从 12 年底开始接触前端,12 年之前的前端发展情况只能从上一辈的笔触中领会。本文会盘点从 09 年开始到 15 年间前端技术的革新,同时也会从多个角度,解读近几年前端技术发展的潜在因素,其中穿插了若干对前端演进的拙见,难免会有错误和疏漏,望读者可以补充和斧正。

小火车是怎么跑起来的

前言 淘宝玩法平台 由淘宝 FED 团队互动小组开发和维护,是一款为运营/视觉同学提供自主搭建/定制游戏玩法服务的平台,平台提供丰富的游戏模板,和超级可定制能力,分分钟就可自己搭建出个性十足的游戏玩法。 淘宝玩法平台的版头动画,是由我们的视觉设计师 @鲍龙 设计,由我实现的。 点击 Demo 观看实际效果。 版头动画中,跑着一列小火车。这销魂的路线,确实能给人「眼前一亮」的感觉,也有一些同学

WebGL 技术储备指南

WebGL 是 HTML 5 草案的一部分,可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用,但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物,花点时间整理出来与大家分享。 示例WebGL 很酷,有以下 demos 为证: 寻找奥兹国赛车游戏划船的男孩(Goo Engine Demo) 本文的目标本文的预期读者是:不熟悉图形学,熟悉前端,希望了解或系统学习

Velocity New York 2015 - 前端篇

这是一篇迟到的总结。2015 年 10 月有幸代表淘宝前端参加了 Velocity New York 性能大会,回来后马不停蹄的忙完双十一、双十二两个大促,终于有时间完成这篇总结。阿里每年都会参加将近 30 场国外会议,和前端相关的主要就是 Velocity(纽约)和 QCon(旧金山)了。这次纽约之行我们一共五人,分别来自 5 个不同的部门和岗位:前端、运维、中间件、测试、云计算。为期三天的会

Math.random() 二三事

随机数随机数是统计学领域的一个重要概念,对于游戏来说同样意义非凡,用好随机数,可以使你的游戏更真实、更人性、富有魅力。 举例子来说:一个打靶游戏,子弹每次都命中准心所示位置是不科学的,加上抖动误差,会使真实感更加强烈;再如,抽奖大转盘程序,每当转盘停止转动时,指针恰好都指向奖品图片的正中点,人们会觉得这个转盘很不自然,指向一个随机位置效果要好得多。 学过 JavaScript 的人都知道,应用随

骨骼动画原理与前端实现浅谈

人的运动——走,跑,跳,是由骨骼带动躯干和四肢完成的。「骨骼动画」,顾名思义,就是模拟骨骼运动的机制而制作的动画。比如下面这条奔跑的小龙。参考 Demo。 素材来自开源骨骼动画编辑器 Dragonbones 用到的素材,额,其实是他大卸八块后的样子。 骨骼动画主要被用游戏场景中,做 Logo 、彩蛋也不错(比如 2014 年双 11 的喵喵舞就是天猫的同学基于骨骼动画原理实现的)。其实,在

记一次淘宝首页奇葩的渲染问题

或许你曾经在 Chrome 浏览器上碰到过这样让人瞠目结舌的问题: hover 触发一个层展示,hover 离开后,这个层还遗留残影 浏览器没有清理一个元素渲染的上一个状态,导致页面多出一个错位的跟该元素一模一样的影子 交互时突然出现一个方形色块,覆盖在元素上 或者还有更奇葩的…… 以上列举到的三个问题,我在维护淘宝首页的时候都遇到过。这些都是浏览器渲染页面时,因为渲染引擎的 bug 导致

ES7 Decorator 装饰者模式

1、装饰模式设计模式大家都有了解,网上有很多系列教程。 这里只分享 装饰者模式 以及如何使用 ES7 的 decorator 概念。 1.1、装饰模式 v.s. 适配器模式装饰模式和适配器模式都是 包装模式 (Wrapper Pattern),它们都是通过封装其他对象达到设计的目的的,但是它们的形态有很大区别。 适配器模式我们使用的场景比较多,比如连接不同数据库的情况,你需要包装现有的模块接口

如何评价页面的性能

引言前端页面的性能一直都是一个热议的话题,从老早的“军规”开始我们就一直在关注页面的性能问题。 在前面巨人们的身后每个人也有自己的一些页面性能的经验,本文主要是介绍如何评估页面加载完成之后的性能。 浏览器如何渲染一个页面先附上一张图片: 这是在网上找的一张图,虽然是用来描述 performance 的 API 但是也很好的描述了浏览器是怎么处理一个页面渲染的。 这是我们在 PC 时代考虑的浏览