本想按照PHASER的HTML Dom元素官方例項:http://labs.phaser.io/index.h… Canvas來建立HTML DOM元素,但this.add.dom 一直提示錯誤,無奈直接用HTML5的語法來建立DOM元素,然後在Phaser內獲取該DOM元素,也不用再使用第三方的Phaser Html Input外掛Plugin,還是挺方便快捷的。
按照這個思路,還可以建立listView,ScrollView等一系列HTML Dom元素,然後再在Phaser內操作其對應的div ID就可以了,而至於BUTTON元素則用addEventListerner監聽即可。
HTML程式碼
<div id=`gameBetZone` class="gameBetZone">
<div class="row rowPadding" id="rowBet">
<div class="col-xs-3">數量:</div>
<div class="col-xs-6"><input id="amount" type="number" value="10"></div>
<div class="col-xs-3"><button id="betButton">提交</button></div>
</div>
<div class="row" id="rowSearching">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="pendingTxt">搜尋中...</div>
</div>
<div class="col-xs-4"></div>
</div>
</div>
PHASER 程式碼
//MARK:-- create element
createBetElement: function () {
document.getElementById(`gameBetZone`).style.display = `none`; // block
document.getElementById(`rowBet`).style.display = `block`;
document.getElementById(`rowSearching`).style.display = `none`;
}
// 取得輸入框 amount的值
this.amountEle = document.getElementById(`amount`);
this.betButton = document.getElementById(`betButton`);
me.betButton.addEventListener(`click`, myClickEvent, false);
function myClickEvent() {
// REMOVE EXISTING BUTTON EVENT;
me.betButton.removeEventListener(`click`, myClickEvent, false);
//TODO:sending this value to server;
console.log(`me.amountEle.value$`, me.amountEle.value);
}
更多遊戲教程:www.iFIERO.com — 為遊戲開發深感自豪