xml地图|网站地图|网站标签 [设为首页] [加入收藏]
仙剑奇侠传的web移植版,Web开荒者需知的十五个
分类:web前端

仙剑奇侠传的web移植版

2015/10/06 · HTML5 · 1 评论 · 仙剑奇侠传

初稿出处: 刘骥(@刘骥-JimLiu)   

Web开采者需知的14个HTML5画布应用

2011/07/18 · HTML5 · HTML5

下边介绍16个html5画布应用,那一个图片方面包车型地铁选用能够很好的扶持开垦者。

1. SketchPad

Sketchpad 是二个完美的HTML5应用 能够支持客商用 Javascript 画布工具创立有用的图案应用. Sketchpad’s 画图工具备笔刷,铅笔,填充,文字 也提供 spirographs, 常用的 shapes 和stamps.

图片 1

2. Canvas Color Cycling

其一动用能够应用部分滤镜效果

图片 2

3. Threshold Filter

能够把图片转产生高相比或是非图片.

图片 3

4. Reflections
能够用特意的纹理和阴影管理3D应用.

图片 4

5. 3D Planet Viewer

可以查阅U.S.A.航天局的图片,旋转或放大.

图片 5

6. Music Visualisation with SoundManager2

那或者是第叁个HTML5音乐可视化应用

图片 6

7. Water Ripples

选拔画布原始创制互动水纹效果

图片 7

8. Strange Attraction

那是二个例外的demo,通过修改设置能够生出区别的作用

图片 8

9. CloudKick

能够来得云端服务期的事态,cpu,内存使用情况等等。

图片 9

10. Liquid Particles

那是三个有意思的液体demo,当你鼠标移动时元素会随着你的鼠标走。

图片 10

11. Canvas Sphere

由小球组成的3d球状体

图片 11

12. jTenorian

当您点亮分歧的开关组合,会撰写出分歧的交相辉映的声音.

图片 12

13. Dynamic Image Collage

那是多个美不可言的在线的幽默的在线拼图,通过搜索找到图片,点击图片就能在画布上海展览中心示,组成有趣的拼图

图片 13

14. iGrapher

iGrapher 是个免费的经济图表工具,能够来得证券等金融市镇的生势图.

图片 14

15. Tiler 3D

展现一个3d的图样幻灯片.

图片 15

 

赞 收藏 评论

图片 16

JavaScript 多种持续方式

2017/06/20 · JavaScript · 继承

原著出处: Xuthus Blog   

大浪涛沙是面向对象编制程序中又一百般主要的概念,JavaScript扶植促成持续,不匡助接口承袭,完毕一而再首要信任原型链来完成的。

0. 前言

那是三个坑了太久太久的档案的次序,久到自身早已不记得挖那个坑是怎么着时候了。大致是13年的伏季啊,笔者挖了这么些坑,然后信心满满的在当场十一长假宅了N天(作者还相比清楚的回忆那时正是WOW开拓围攻奥格瑞玛别本的级差),写下了整套框架,以至最基本的黄金年代局地代码,然后,就平昔不然后了。

大概一年后,小编又翻出来了那几个坑,重构了汪洋的代码,可是速度差不多从不实质性的腾飞,以至因为重构而有所倒退- -“,然而因为读了《游戏引擎架构》那本书,小编对这一个坑又有了新的认知,对于那几个程序到底要怎么写心里有谱多了。

本来安顿是在当年夏日搞出来,那样可以赶过仙剑20周年(一九九四年八月)发布,可是不用想也知道迟早是继承坑了。

磕磕绊绊到未来,总算是把嬉戏的繁荣富强体化达成度拉到了叁个比较能见人的水准,于是本身以为依旧赶紧揭橥的好,免得又变今生今世了。

原型链

首先得要精通怎么是原型链,在黄金年代篇作品看懂proto和prototype的涉及及界别中讲得不得了详尽

原型链继承基本考虑正是让二个原型对象指向另一个品种的实例

function SuperType() { this.property = true } SuperType.prototype.getSuperValue = function () { return this.property } function SubType() { this.subproperty = false } SubType.prototype = new SuperType() SubType.prototype.getSubValue = function () { return this.subproperty } var instance = new SubType() console.log(instance.getSuperValue()) // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function () {
  return this.subproperty
}
var instance = new SubType()
console.log(instance.getSuperValue()) // true

代码定义了五个类型SuperType和SubType,每种品种分别有壹本性质和叁个方法,SubType承接了SuperType,而一而再是经过创办SuperType的实例,并将该实例赋给SubType.prototype达成的。

落到实处的本来面目是重写原型对象,代之以二个新品类的实例,那么存在SuperType的实例中的全体属性和章程,现在也存在于SubType.prototype中了。

咱们知道,在开立三个实例的时候,实例对象中会有贰个里头指针指向创立它的原型,进行关联起来,在那地代码SubType.prototype = new SuperType(),也会在SubType.prototype制造贰当中间指针,将SubType.prototype与SuperType关联起来。

之所以instance指向SubType的原型,SubType的原型又指向SuperType的原型,进而在instance在调用getSuperValue()方法的时候,会顺着那条链一赞佩上找。

加多格局

在给SubType原型加多方法的时候,要是,父类上也是有同黄金年代的名字,SubType将会覆盖这么些主意,达到重新的目标。 可是那几个措施还是留存于父类中。

牢记不能够以字面量的格局丰盛,因为,上面说过通超过实际例承继本质上正是重写,再利用字面量格局,又是一回重写了,但这一次重写未有跟父类有别的涉及,所以就能够促成原型链截断。

function SuperType() { this.property = true } SuperType.prototype.getSuperValue = function () { return this.property } function SubType() { this.subproperty = false } SubType.prototype = new SuperType() SubType.prototype = { getSubValue:function () { return this.subproperty } } var instance = new SubType() console.log(instance.getSuperValue()) // error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype = {
  getSubValue:function () {
   return this.subproperty
  }
}
var instance = new SubType()
console.log(instance.getSuperValue())  // error

问题

仅仅的利用原型链承袭,首要难点源于满含援引类型值的原型。

function SuperType() { this.colors = ['red', 'blue', 'green'] } function SubType() { } SubType.prototype = new SuperType() var instance1 = new SubType() var instance2 = new SubType() instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"] console.log(instance2.colors) // ["red", "blue", "green", "black"]

1
2
3
4
5
6
7
8
9
10
11
function SuperType() {
  this.colors = ['red', 'blue', 'green']
}
function SubType() {
}
SubType.prototype = new SuperType()
var instance1 = new SubType()
var instance2 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors)  // ["red", "blue", "green", "black"]
console.log(instance2.colors) // ["red", "blue", "green", "black"]

在SuperType构造函数定义了贰个colors属性,当SubType通过原型链继承后,这些性子就能够产出SubType.prototype中,就跟专门创设了SubType.prototype.colors同样,所以会促成SubType的具有实例都会分享那个性格,所以instance1修改colors那么些引用类型值,也会展现到instance第22中学。

1. 无图言屌

优酷录像——有摄像有JB!

图片 17图片 18

图片 19

图片 20

图片 21

图片 22

图片 23

图片 24

图片 25

借用构造函数

此措施为了化解原型中包涵引用类型值所带来的标题。

这种措施的思辨就是在子类构造函数的内部调用父类构造函数,能够依靠apply()和call()方法来更改指标的执行上下文

function SuperType() { this.colors = ['red', 'blue', 'green'] } function SubType() { // 继承SuperType SuperType.call(this) } var instance1 = new SubType() var instance2 = new SubType() instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"] console.log(instance2.colors) // ["red", "blue", "green"]

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType() {
  this.colors = ['red', 'blue', 'green']
}
function SubType() {
  // 继承SuperType
  SuperType.call(this)
}
var instance1 = new SubType()
var instance2 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors)  // ["red", "blue", "green", "black"]
console.log(instance2.colors) // ["red", "blue", "green"]

在新建SubType实例是调用了SuperType构造函数,那样以来,就能在新SubType目的上实施SuperType函数中定义的具有目的初步化代码。

结果,SubType的种种实例就能够有所自身的colors属性的别本了。

传递参数

信任构造函数还会有一个优势正是足以传递参数

function SuperType(name) { this.name = name } function SubType() { // 继承SuperType SuperType.call(this, 'Jiang') this.job = 'student' } var instance = new SubType() console.log(instance.name) // Jiang console.log(instance.job) // student

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType(name) {
  this.name = name
}
function SubType() {
  // 继承SuperType
  SuperType.call(this, 'Jiang')
 
  this.job = 'student'
}
var instance = new SubType()
console.log(instance.name)  // Jiang
console.log(instance.job)   // student

问题

假设风度翩翩味依附构造函数,方法都在构造函数中定义,由此函数不可能直达复用

2. 自问自答的FAQ

结缘承接(原型链+构造函数)

结合承继是将原型链承袭和构造函数结合起来,进而发挥两岸之长的意气风发种格局。

思路正是行使原型链完成对原型属性和章程的持续,而通过借用构造函数来兑现对实例属性的后续。

那样,既通过在原型上定义方法完毕了函数复用,又能够确定保证种种实例都有它谐和的本性。

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] } SuperType.prototype.sayName = function () { console.log(this.name) } function SubType(name, job) { // 承袭属性 SuperType.call(this, name) this.job = job } // 承袭方法 SubType.prototype = new SuperType() SubType.prototype.constructor = SuperType SubType.prototype.sayJob = function() { console.log(this.job) } var instance1 = new SubType('Jiang', 'student') instance1.colors.push('black') console.log(instance1.colors) //["red", "blue", "green", "black"] instance1.sayName() // 'Jiang' instance1.sayJob() // 'student' var instance2 = new SubType('J', 'doctor') console.log(instance2.colors) // //["red", "blue", "green"] instance2.sayName() // 'J' instance2.sayJob() // 'doctor'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承方法
SubType.prototype = new SuperType()
SubType.prototype.constructor = SuperType
SubType.prototype.sayJob = function() {
  console.log(this.job)
}
var instance1 = new SubType('Jiang', 'student')
instance1.colors.push('black')
console.log(instance1.colors) //["red", "blue", "green", "black"]
instance1.sayName() // 'Jiang'
instance1.sayJob()  // 'student'
var instance2 = new SubType('J', 'doctor')
console.log(instance2.colors) // //["red", "blue", "green"]
instance2.sayName()  // 'J'
instance2.sayJob()  // 'doctor'

这种情势幸免了原型链和构造函数承继的欠缺,融合了他们的独特之处,是最常用的大器晚成种持续方式。

2.1. 能玩吗?

。但在GitHub repo里并不会包蕴游戏的能源文件,于是要求团结去找(嘿嘿mq2x)。由于不散发游戏财富文件,且思考到体量,小编也不会提供二个在线娱乐的版本。所以基本上独有开拓者可能入手本领强的同桌技术玩上它了(假如你真正想玩……)

不思虑境遇BUG(无数个)造成游戏一直罢工的情事下(当然就是笔者的自己是能够相当熟习地避过那几个BUG的233333),曾经得以从新开游戏一向玩到大结局了,並且笔者曾经通过海关两一回了XD

原型式承袭

依靠原型能够依照已有的对象创制新目的,同期还不用因而创建自定义类型。

function object(o) { function F() {} F.prototype = o return new F() }

1
2
3
4
5
function object(o) {
  function F() {}
  F.prototype = o
  return new F()
}

在object函数内部,先创制二个有的时候的构造函数,然后将盛传的靶子作为这些构造函数的原型,最终回到那个不经常类型的一个新实例。

本质上来讲,object对传播在那之中的目的实施了二次浅复制。

var person = { name: 'Jiang', friends: ['Shelby', 'Court'] } var anotherPerson = object(person) console.log(anotherPerson.friends) // ['Shelby', 'Court']

1
2
3
4
5
6
var person = {
  name: 'Jiang',
  friends: ['Shelby', 'Court']
}
var anotherPerson = object(person)
console.log(anotherPerson.friends)  // ['Shelby', 'Court']

这种格局要去你无法不有一个对象作为另八个对象的功底。

在这里个事例中,person作为另三个对象的基础,把person传入object中,该函数就能回到一个新的靶子。

本条新指标将person作为原型,所以它的原型中就含有三在这之中央类型和三个征引类型。

进而意味着假使还恐怕有别的多个指标关系了person,anotherPerson修改数组friends的时候,也会呈现在这里个指标中。

Object.create()方法

ES5因此Object.create()方法则范了原型式承接,还可以五个参数,贰个是用作新对象原型的目的和二个可选的为新对象定义额外属性的靶子,行为等同,基本用法和方面包车型大巴object同样,除了object不能够承受第一个参数以外。

var person = { name: 'Jiang', friends: ['Shelby', 'Court'] } var anotherPerson = Object.create(person) console.log(anotherPerson.friends) // ['Shelby', 'Court']

1
2
3
4
5
6
var person = {
  name: 'Jiang',
  friends: ['Shelby', 'Court']
}
var anotherPerson = Object.create(person)
console.log(anotherPerson.friends)  // ['Shelby', 'Court']

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:仙剑奇侠传的web移植版,Web开荒者需知的十五个

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文