HTML5技术

仿AS语法来写HTML5—第7章,自定义按钮

字号+ 作者:lufy 来源: 2014-11-16 21:26 我要评论( )

这次弄个简单点的,自定义按钮。 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。 下面是添加按钮的代码: JavaScript Code 复制内容到剪贴板 function gameInit(event){ backL

 这次弄个简单点的,

  1. function gameInit(event){  
  2.         backLayer = new LSprite();  
  3.         addChild(backLayer);  
  4.           
  5.         btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));  
  6.         btn01.x = 76;  
  7.         btn01.y = 50;  
  8.         backLayer.addChild(btn01);  
  9.           
  10.         btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"])));  
  11.         btn02.x = 76;  
  12.         btn02.y = 100;  
  13.         backLayer.addChild(btn02);  
  14.           
  15.         btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01);  
  16.         btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02);  
  17. }  
  18. function onmousedown01(event){  
  19.         alert("btn01 on click");  
  20. }  
  21. function onmousedown02(event){  
  22.         alert("btn02 on click");  
  23. }  


原理:建立一个继承自LSprite的LButton类,给按钮设定两个图片,然后侦听鼠标位置,当鼠标移动到按钮上的时候,变换按钮状态,就是一个简单的按钮。

这里,我用mousemove来侦听鼠标位置,给LGlobal类添加一个buttonList数组,当创建按钮的时候,把按钮加入到buttonList,然后当移动鼠标的时候,就可以从buttonList数组判断鼠标是否在按钮上,然后当按钮被删除后,将按钮从buttonList数组中删除。

一些修改:
1,修改LSprite类,添加die方法,每个LSprite当被removeChild的时候,调用自己的die方法,die方法里放一些被移除是必需处理的事件,比如这次的按钮,要从buttonList中删除。
2,给每个构造器添加objectindex,用来区分每个对象。
3,修改addChild方法,添加DisplayObject.parent = self,就是给每个自对象指定父级对象。

准备完毕,开始创建按钮类LButton。

JavaScript Code复制内容到剪贴板
  1. function LButton(bitmap_up,bitmap_over){  
  2.         base(this,LSprite,[]);  
  3.         var self = this;  
  4.         self.type = "LButton";  
  5.         self.bitmap_up = bitmap_up;  
  6.         self.addChild(bitmap_up);  
  7.         if(bitmap_over == null){  
  8.                 bitmap_over = bitmap_up;  
  9.         }else{  
  10.                 self.addChild(bitmap_over);  
  11.         }  
  12.         self.bitmap_over = bitmap_over;  
  13.   
  14.         self.bitmap_over.visible = false;  
  15.         self.bitmap_up.visible = true;  
  16.         LGlobal.buttonList.push(self);  
  17. }  
  18.   
  19. LButton.prototype.buttonModeChange = function (){  
  20.         var self = this;  
  21.         var cood={x:0,y:0};  
  22.         var parent = self.parent;  
  23.         while(parent != "root"){  
  24.                 cood.x += parent.x;  
  25.                 cood.y += parent.y;  
  26.                 parent = parent.parent;  
  27.         }  
  28.         if(self.ismouseon(LGlobal.mouseMoveEvent,cood)){  
  29.                 self.bitmap_up.visible = false;  
  30.                 self.bitmap_over.visible = true;  
  31.         }else{  
  32.                 self.bitmap_over.visible = false;  
  33.                 self.bitmap_up.visible = true;  
  34.         }  
  35. }  
  36. LButton.prototype.die = function (){  
  37.         var self = this;  
  38.         arguments.callee.super.die.call(this);  
  39.         for(var i=0;i<LGlobal.buttonList.length;i++){  
  40.                 if(LGlobal.buttonList[i].objectindex == self.objectindex){  
  41.                         LGlobal.buttonList.splice(i,1);  
  42.                         break;  
  43.                 }  
  44.         }  
  45. }  
复制代码

看一下成果吧
http://fsanguo.comoj.com/html5/jstoas06/index.html

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5开发的翻页效果

    HTML5开发的翻页效果

    2014-11-16 21:26

  • 仿AS语法来写HTML5-终篇LegendForHtml5Programming

    仿AS语法来写HTML5-终篇LegendForHtml5Programming

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第9章,URLLoader读取文件

    仿AS语法来写HTML5—第9章,URLLoader读取文件

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第8章,图片处理+粒子

    仿AS语法来写HTML5—第8章,图片处理+粒子

    2014-11-16 21:26

网友点评
精彩导读
热门资讯
关注我们
关注微信公众号,了解最新精彩内容

>