了解了事件，动画，再来学习一下继承。
先来看一个demo:
代码如下。
<html>
<head>
<title>pixi.js入门-继承</title>
<script type="text/javascript" src="../pixi.js"></script>
<script type="text/javascript">
var frameRate=30;
var renderer;
var stage;
var tf;
var fps=0;
var ticker;
window.onload = function() {
renderer = new PIXI.WebGLRenderer(600, 400);
document.body.appendChild(renderer.view);
stage = new PIXI.Container();
//console.log(renderer);
//
var mySp=new HSprite();
mySp.name="bunny";
mySp.x=200;
mySp.y=200;
stage.addChild(mySp);
var sprite = new PIXI.Sprite.fromImage('bunny.png');
mySp.addChild(sprite);
mySp.interactive = true;
mySp.addListener("click",function(e){
mySp.sayHello();
});
tf = new PIXI.Text("fps:0", {
font: '24px Arial',
fill: 0xff1010,
align: 'left'
});
stage.addChild(tf);
refresh();
setInterval(showFps, 1000);
}
function showFps(){
tf.text="fps:"+fps;
fps=0;
}
function refresh(){
fps++;
var t=new Date().getTime();
renderer.render(stage);
t=new Date().getTime()-t;
var delay=1000/frameRate;
if(t>=delay){
refresh();
}
else{
setTimeout(refresh,delay-t);
}
}
function HSprite(){
PIXI.Sprite.call(this);
this._speed=10;
this._name="";
}
HSprite.prototype = Object.create(PIXI.Sprite.prototype);
HSprite.prototype.constructor = HSprite;
//module.exports = HSprite;
Object.defineProperties(HSprite.prototype, {
speed:{
get:function(){
return this._speed;
},
set:function(value){
this._speed=value;
}
},
name:{
get:function(){
return this._name;
},
set:function(value){
this._name=value;
}
}
});
HSprite.prototype.sayHello = function (){
alert("Hello, I'm HSprite-"+this.name+".\n"+"My speed is "+this.speed);
}
</script>
</head>
<body>
</body>
</html>实现继承主要用下面这几句：
function HSprite(){
PIXI.Sprite.call(this);
}
HSprite.prototype = Object.create(PIXI.Sprite.prototype);
HSprite.prototype.constructor = HSprite;可以自己百度一下Object.create、Object.defineProperties，我也不是很了解。定义get/set的方式和c#很像。
实现的效果如下，可以试试点击中间的小兔子。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。