写在前面

不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
然后star一下,多谢支持:)。

前几天发了篇向ES6靠齐的Class.js,当初jr为什么不把父类的实例暴露给子类,其原因还是为了延续原型继承的习惯,子类重写就会覆盖掉父类的方法,父类的方法就会丢,如下面的代码,就堆栈溢出了:


var Parent = function () {
}
Parent.prototype.a = function () {
}
var Child = function () {
}
Child.prototype = new Parent();
Child.prototype.a = function () {
    this.a();
}
var child = new Child();
child.a();

而jr的Class.js可以让你通过this._super访问父类同类方法,修复了原型继承同名无法访问父类的弱点,当然也可以hack一下,先赋给变量或者某个属性。如:


var Parent = function () {
}
Parent.prototype.a = function () {
    alert(1)
}
var Child = function () {
}
Child.prototype = new Parent();
Child.prototype.parentA = Child.prototype.a;
Child.prototype.a = function () {
    this.parentA();
}
var child = new Child();
child.a();

但是这样的话,代码不就很丑陋了吗!?
所以AlloyRenderingEngine选择使用了JR的Class.js,然后在其基础之上扩展了静态方法和属性,以及静态构造函数

所以就变成了这样:


var Person = Class.extend({
  statics:{
   //静态构造函数会直接被Class.js执行
   ctor:function(){
      //这里的this相当于Person
   },
   Version:"1.0.0",
   GetVersion:function(){
     return Person.Version;
   }
  },
  ctor: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});
var Ninja = Person.extend({
  ctor: function(){
    this._super( false );
  },
  dance: function(){
    // Call the inherited version of dance()
    return this._super();
  },
  swingSword: function(){
    return true;
  }
});

AlloyRenderingEngine继承

AlloyRenderingEngine内置了Container对象,用来管理元素,Stage对象也是继承自Container对象,
还有,Container对象继承自DisplayObject,所以Container对象也能够设置scale、x、y、alpha、rotation、compositeOperation…等,设置的属性能够叠加到子元素上。

x、y、rotation、scaleX、scaleY、skewX、skewY…等直接矩阵叠加,也就是子元素的呈现跟父容器、父容器的父容器、父容器的父容器的父容器…都有关系;
其实alpha是乘法叠加(如:容器的透明度是0.5,容器内部的元素透明度为0.9,最后容器内部元素呈现的透明度就是0.45);;
compositeOperation先查找自己,自己没定义,再向上查找,直到找到定义了compositeOperation的,就使用该compositeOperation,有点类似决定定位元素找父容器的感觉。
很多情况下,我们需要继承Container对象来封装一些自定义的对象。
比如封装一个按钮:


var Button = Container.extend({
    ctor: function (image) {
        this._super();
        this.bitmap = new Bitmap(image);
        this.bitmap.originX = this.bitmap.originY = 0.5;
        this.add(this.bitmap);
        //鼠标指针的形状
        this.cursor = "pointer";
        this._bindEvent();
    },
    _bindEvent: function () {
        this.onHover(function () {
            this.scale = 1.1;
        }, function () {
            this.scale = 1.0;
        })
        this.onMouseDown(function () {
            this.scale = 0.9;
        })
        this.onMouseUp(function () {
            this.scale = 1.1;
        })
    }
});

使用这个button就很方便了:


var  stage = new Stage("#ourCanvas");
var button = new Button("button.png");
button.x = 100;
button.y = 100;
button.onClick(function () {
    console.log("你点击我了");
})
stage.add(button);

简单吧!

在线演示

地址

Class.js:https://github.com/AlloyTeam/AlloyGameEngine/blob/master/src/are/base.js
AlloyGameEngine:https://github.com/AlloyTeam/AlloyGameEngine

AlloyRenderingEngine继承的更多相关文章

  1. AlloyRenderingEngine燃烧的进度条

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine HTML 5新增了progress标签,那么再去使用AlloyRenderingEn ...

  2. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  3. AlloyRenderingEngine

    AlloyRenderingEngine燃烧的进度条 写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine HTML 5新增了progre ...

  4. javaScript的原型继承与多态性

    1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...

  5. JavaScript的继承实现方式

    1.使用call或apply方法,将父对象的构造函数绑定在子对象上 function A(){ this.name = 'json'; } function B(){ A.call(this); } ...

  6. javascript中的继承与深度拷贝

    前言 本篇适合前端新人,下面开始...... 对于前端新手来说(比如博主),每当对js的对象做操作时,都是一种痛苦,原因就是在于对象的赋值是引用的传递,并非值的传递,虽然看上去后者赋值给了前者,他们就 ...

  7. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. JS继承类相关试题

    题目一: //有关于原型继承的代码如下:function Person(name) {   this.name = name;}Person.prototype = {     getName : f ...

  9. JS继承之寄生类继承

    原型式继承 其原理就是借助原型,可以基于已有的对象创建新对象.节省了创建自定义类型这一步(虽然觉得这样没什么意义). 模型 function object(o){ function W(){ } W. ...

随机推荐

  1. jenkins无法重启tomcat的原因

    在使用Hudson的执行sh脚本的时候,如果sh脚本是一个后台进程,如 Tomcat 这样的服务.如果使用Hudson的默认配置,会发现这些sh 进程有启动的过程,但是不会常驻后台,看Hudson 输 ...

  2. 【一起学OpenFOAM】系列由来

    1 为什么要学习OpenFOAM 掐指算起来,接触CFD也差不多有十个年头了,其间一直使用的商用CFD软件,有Fluent.CFX.StarCCM+等,这些商用软件各有其优缺点,都能较好的解决常规的工 ...

  3. 智能头盔 "Livall携全球首款智能骑行头盔亮相CES"

    LIVALL是全球首创集音乐.通讯.智能灯光为一体的智能骑行头盔的研发者,日前Livall携旗下智能骑行头盔BH 100和BH 60参展CES 2017,这也是目前世全球首款智能骑行头盔类产品,同时亮 ...

  4. 认识ASP.NET 5项目结构和项目文件xproj

    ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...

  5. Netty实现高性能RPC服务器优化篇之消息序列化

    在本人写的前一篇文章中,谈及有关如何利用Netty开发实现,高性能RPC服务器的一些设计思路.设计原理,以及具体的实现方案(具体参见:谈谈如何使用Netty开发实现高性能的RPC服务器).在文章的最后 ...

  6. NoSql1 在Linux(CentOS)上安装memcached及使用

    前言:       今天是初五,生活基本要从过年的节奏中回归到正常的生活了,所以想想也该想想与工作有关的事情了.我之前在工作中会经常使用memcached和redis,但是自己一直没有时间系统的好好看 ...

  7. 使用CSS3的box-shadow实现双透明遮罩层对话框

    box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...

  8. python 三元运算

    C:\Users\Administrator>pythonPython 3.6.0 (v3.6.0:41df79263a11, Dec 23 2016, 08:06:12) [MSC v.190 ...

  9. 【转】string.Format对C#字符串格式化

    转自:http://blog.csdn.net/samsone/article/details/7556781 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) str ...

  10. 设计模式(六):控制台中的“命令模式”(Command Pattern)

    今天的博客中就来系统的整理一下“命令模式”.说到命令模式,我就想起了控制台(Console)中的命令.无论是Windows操作系统(cmd.exe)还是Linux操作系统(命令行式shell(Comm ...