ホームページ >ウェブフロントエンド >H5 チュートリアル >ActionScript のような構文を使用して html5 を作成する - パート 7、カスタム ボタン
その7、カスタムボタン
今回は、よりシンプルなカスタムボタンを作ります。
実際、LSprite、LBitmap、および以前に定義されたその他のクラスを使用すると、ボタンを定義するのが非常に便利です。
以下はボタンを追加するコードです
function gameInit(event){ backLayer = new LSprite(); addChild(backLayer); btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"]))); btn01.x = 76; btn01.y = 50; backLayer.addChild(btn01); btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"]))); btn02.x = 76; btn02.y = 100; backLayer.addChild(btn02); btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01); btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02); } function onmousedown01(event){ alert("btn01 on click"); } function onmousedown02(event){ alert("btn02 on click"); }
原理: LSprite から継承した LButton クラスを作成し、ボタンに 2 つの画像を設定し、マウスの位置をリッスンしてボタンに移動すると、ボタンを変更します。状態、つまり単純なボタンです。
ここでは、mousemoveを使用してマウスの位置をリッスンし、LGlobalクラスにbuttonList配列を追加します。ボタンを作成するときに、ボタンをbuttonListに追加します。その後、マウスが移動されたかどうかを判断できます。ボタンを buttonList 配列に追加し、ボタンが削除されると、buttonList 配列からボタンを削除します。
いくつかの変更: 1. LSprite クラスを変更し、die メソッドを追加します。各 LSprite は、今回のように、削除時に処理する必要があるいくつかのイベントを呼び出します。 buttonList から削除されるボタン。
2. 各オブジェクトを区別するために、各コンストラクターに objectindex を追加します。
3. addChild メソッドを変更し、DisplayObject.parent = self を追加します。これは、親オブジェクトを各 self オブジェクトに割り当てることを意味します。
準備が整ったので、ボタン クラス LButton の作成を開始します。
function LButton(bitmap_up,bitmap_over){ base(this,LSprite,[]); var self = this; self.type = "LButton"; self.bitmap_up = bitmap_up; self.addChild(bitmap_up); if(bitmap_over == null){ bitmap_over = bitmap_up; }else{ self.addChild(bitmap_over); } self.bitmap_over = bitmap_over; self.bitmap_over.visible = false; self.bitmap_up.visible = true; LGlobal.buttonList.push(self); } LButton.prototype.buttonModeChange = function (){ var self = this; var cood={x:0,y:0}; var parent = self.parent; while(parent != "root"){ cood.x += parent.x; cood.y += parent.y; parent = parent.parent; } if(self.ismouseon(LGlobal.mouseMoveEvent,cood)){ self.bitmap_up.visible = false; self.bitmap_over.visible = true; }else{ self.bitmap_over.visible = false; self.bitmap_up.visible = true; } } LButton.prototype.die = function (){ var self = this; arguments.callee.super.die.call(this); for(var i=0;i<LGlobal.buttonList.length;i++){ if(LGlobal.buttonList[i].objectindex == self.objectindex){ LGlobal.buttonList.splice(i,1); break; } } }上記は、ActionScript のような構文を使用して html5 を記述することです - パート 7、カスタム ボタンのコンテンツ 詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。