了解了事件,动画,再来学习一下继承。
先来看一个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#很像。
实现的效果如下,可以试试点击中间的小兔子。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。