首页 > 代码库 > 用仿ActionScript的语法来编写html5——第七篇，自定义按钮

用仿ActionScript的语法来编写html5——第七篇，自定义按钮

2024-08-15 23:08:48   212人阅读

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：用仿ActionScript的语法来编写html5——第七篇，自定义按钮

第七篇，自定义按钮


这次弄个简单点的，自定义按钮。
其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。
下面是添加按钮的代码，

[javascript] view plain copy
 
  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] view plain copy
 
  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.   
  15.     self.bitmap_over.visible = false;  
  16.     self.bitmap_up.visible = true;  
  17.     LGlobal.buttonList.push(self);  
  18. }  
  19.   
  20.   
  21. LButton.prototype.buttonModeChange = function (){  
  22.     var self = this;  
  23.     var cood={x:0,y:0};  
  24.     var parent = self.parent;  
  25.     while(parent != "root"){  
  26.         cood.x += parent.x;  
  27.         cood.y += parent.y;  
  28.         parent = parent.parent;  
  29.     }  
  30.     if(self.ismouseon(LGlobal.mouseMoveEvent,cood)){  
  31.         self.bitmap_up.visible = false;  
  32.         self.bitmap_over.visible = true;  
  33.     }else{  
  34.         self.bitmap_over.visible = false;  
  35.         self.bitmap_up.visible = true;  
  36.     }  
  37. }  
  38. LButton.prototype.die = function (){  
  39.     var self = this;  
  40.     arguments.callee.super.die.call(this);  
  41.     for(var i=0;i<LGlobal.buttonList.length;i++){  
  42.         if(LGlobal.buttonList[i].objectindex == self.objectindex){  
  43.             LGlobal.buttonList.splice(i,1);  
  44.             break;  
  45.         }  
  46.     }  
  47. }  




看一下成果吧,看不到效果的请下载支持HTML5的浏览器

http://fsanguo.comoj.com/html5/jstoas06/index.html

用仿ActionScript的语法来编写html5——第七篇，自定义按钮


联系
我们