2011年最经典的15个 HTML5游戏

2011/05/21 · HTML5 ·
HTML5

在过去的一年内,Web 技术有着非常大的变革性的创新,取得长足的进步,特别是
HTML5 技术更为 Web 带来新鲜的血液。这将直接改变 Flash 控制着Web
游戏的局面。越来越多的开发人员开始使用 HTML5
来开发一些交互性非常强、效果非常出众的应用和游戏。

  1. Chain Reaction

  2. Biolab Disaster

  3. Bubble Trouble

  4. Runfield

  5. Sand Trap

  6. Torus

  7. Space War

  8. Google Pacman

  9. Angry Birds (仅可运行于Chrome浏览器)

图片 1

  10. RGB Invaders

图片 2

  11. Canvas Rider

图片 3

  12. Blinkwang

图片 4

  13.
CoverFire

图片 5

  14. HTML5
Helicopter

图片 6

  15. Blobby
Volley

图片 7

  原文:True
Logic    译文:oschina

 

赞 1 收藏
评论

图片 8

一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

2018/08/02 · JavaScript
· 继承

原文出处:
这是你的玩具车吗   

说实在话,以前我只需要知道“寄生组合继承”是最好的,有个祖传代码模版用就行。最近因为一些事情,几个星期以来一直心心念念想整理出来。本文以《JavaScript高级程序设计》上的内容为骨架,补充了ES6
Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,希望大家能有所收获。

SVG 实现复杂线条动画

2016/12/29 · HTML5 ·
SVG,
动画

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画:《Web动画:SVG
线条动画入门》

当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多。

很多时候,我们无法人工去画出一些十分复杂动画的线条,这个时候,就要借助前端好帮手
PS 和 AI,而本文就是介绍如何导出复杂的 SVG 路径。:

图片 9

好了,假定我们现在要制作下图 GIF 这样的一个 loading 图:

图片 10

上面这个 SVG
线条动画的路径 path ,如果靠自己手工一个点一个点定位调试画出来的话,嘿嘿嘿你去试试。

图片 11

1. 继承分类

先来个整体印象。如图所示,JS中继承可以按照是否使用object函数(在下文中会提到),将继承分成两部分(Object.create是ES5新增的方法,用来规范化这个函数)。

其中,原型链继承和原型式继承有一样的优缺点,构造函数继承与寄生式继承也相互对应。寄生组合继承基于Object.create,
同时优化了组合继承,成为了完美的继承方式。ES6 Class
Extends的结果与寄生组合继承基本一致,但是实现方案又略有不同。

下面马上进入正题。

图片 12

使用 PS 导出路径

估计靠手工能画出来,也没了大半条命。好,轮到工具上场,看看我们的原图在
PS 下长什么样子(支持透明通道的 PNG、GIF 为佳):

图片 13

好,选中选框工具,按下 CTRL 选中图层, 再选择建立工作路径:

图片 14

这个时候会弹出一个设定容差大小的选择,可以用不同大小的容差多试几次,直到得到一个自己满意的路径。

图片 15

容差是什么?可以理解为一种精确度,在选取颜色时所设置的选取范围,容差越大,选取的范围也越大,其数值是在0-255之间。

好,这个时候,路径算是建立完成了,可以把图层的透明度设置为 0
,就能清晰的看到路径长啥样:

图片 16

港真,长得挺帅的。图片 17

好,到了 PS 中的最后一步,点击文件选项,导出路径到 illustrator
,看图,照着操作就好:

图片 18

2. 继承方式

上图上半区的原型链继承,构造函数继承,组合继承,网上内容比较多,本文不作详细描述,只指出重点。这里给出了我认为最容易理解的一篇《JS中的继承(上)》。如果对上半区的内容不熟悉,可以先看这篇文章,再回来继续阅读;如果已经比较熟悉,这部分可以快速略过。另,上半区大量借用了yq前端的一篇继承文章[1]。

在 illustrator 中生成 SVG 文件

打开 AI ,打开刚刚用 PS 导出的 *.ai 文件。

没有 AI ?身为前端居然连 AI 也没装( ̄△ ̄;) 额,其实我也是因为 SVG
才上手的,赶紧下一个吧,我的版本是 Adobe illustrator CC 2014。

可能你看到的是一片空白,别慌,使用选择工具选一个矩形,就能选中路径啦。

图片 19

如果你是 PS 钢笔工具小能手,还可以继续对路径进行修改,直到自己满意为止。

OK,接下来就是调整画布大小,最好是路径左上角和画布左上角对齐,然后选中存储为
SVG 文件。

图片 20

好,其实 AI 也没做什么,路径是使用 PS 生成的,为什么不直接用 PS
生成 *.svg 文件呢?因为我用的版本 PS 还没支持直接存储为 SVG
格式。然后其实也可以直接在 AI
上绘制路径,这个就看设计师或者你对哪个工具更熟悉了。

2.1 原型式继承

核心:将父类的实例作为子类的原型

SubType.prototype = new SuperType() //
所有涉及到原型链继承的继承方式都要修改子类构造函数的指向,否则子类实例的构造函数会指向SuperType。
SubType.prototype.constructor = SubType;

1
2
3
SubType.prototype = new SuperType()
// 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向,否则子类实例的构造函数会指向SuperType。
SubType.prototype.constructor = SubType;

优点:父类方法可以复用

缺点:

  • 父类的引用属性会被所有子类实例共享
  • 子类构建实例时不能向父类传递参数

获取 SVG 的 path 路径

OK,最后把刚刚保存的 *.svg 路径的文件用浏览器打开,一片空白是正常的,右键查看网页源代码:

图片 21

大功告成,这里面, 路径就是我们需要的路径了!

图片 22

好,把我们要的 “ 整个拿出来,运用上一篇文章的线条动画知识,给它赋予简单的动画效果就好:

See the Pen GNbwYV by Chokcoco
(@Chokcoco) on
CodePen.

发表评论

电子邮件地址不会被公开。 必填项已用*标注