共计 1343 个字符，预计需要花费 4 分钟才能阅读完成。
本想按照 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 — 为游戏开发深感自豪
