ES6 开发经典 Pong 游戏

2017-04-01 23:25

前言

随着 ES6 标准的正式成立,JavaScript 的光芒越来越显眼。在当前 Web 应用复杂化、多样化、跨平台化的背景下,JavaScript 本身的弱点被无限放大,前端有很多的轮子正是为了解决 JavaScript 本身的问题。我很佩服过去那些前辈们卓越的智慧,戴着枷锁跳舞,运用各种技巧规避 JavaScript 的缺点,榨 干JavaScript 的性能,构建出如此多彩的 Web 时代。但是,到了现在,我们终于可以用一种更加规范化、可接受的思路与语法开发 Web 应用了。

此篇文章梳理了用 ES6 语法开发经典的 Pong 游戏的技术要点。整个游戏其实挺简单,左边是玩家控制的挡板,右边是电脑控制的挡板。一个小球在场景内弹来弹去,两边挡板将小球接住并弹到对方区域中,以此往复。直到一方没有接到小球,那么没接到球的一方输掉一局,然后游戏重新开始。此游戏使用到的 ES6 语法在最新主流浏览器(Chrome、Firefox、Edge)中已经原生支持,如果要运行在兼容性差的浏览器中,请使用转换工具将其转化成 ES5 的代码,推荐使用 Babel

ES6 要点

其他要点

canvas.addEventListener('mousemove', event => {
    // when canvas is resized, build the relationship to event responce
    const scaler = event.offsetY / event.target.getBoundingClientRect().height;
    pong.players[0].pos.y = canvas.height * scaler;
});

number.jpg

效果展示

pong.jpg

链接

源码 效果演示

后记

《周易》中说“穷则变,变则通,通则久”。现在也是 JavaScript 需要变化的时候了,作为一名靠这门语言吃饭的人来说,及时地拥抱这种变化,并将其正确地应用到合适的地方,才是长久之道。