使用Phaser有一段时间的,越来越喜欢这个游戏引擎，但是它不像egret那样有专业的公司和团队去维护，并提供大量的工具，所以Phaser没有那么多的工具，但是真的很好用。

      在做游戏登录界面的时候，发现Phaser没有提供TextBox的控件，在官方的论坛进行搜索以后得到了如下的结论

     大部分的情况都是采用DOM的方式来去实现textbox。

     本文采用DOM的方式实现了可以自适应Phaser画布的TextBox，效果图如下：

实现步骤如下：

1.自适应屏幕的程序在Phaser提供的模板里，具体可以到Phaser的官网上下载最新的源码，在源码里找到temple文件夹里面的fullscreen工程，因为该工程实现了屏幕的自适应缩放。

2.创建一个名为的js文件

3.在该文件中定义function HtmlTextBox(game,x,y,width,height,text,style)，作为使用类

4.实现主要内容

this.game = game;this.parentElement = game.canvas.parentNode;//创建一个inputElementthis.textBoxElement = document.createElement('input');this.textBoxElement.style.position = 'absolute';this.textBoxElement.style.left = x+'px';this.textBoxElement.style.top = y+'px';this.textBoxElement.style.width = width;this.textBoxElement.style.height = height;this.parentElement.insertBefore(this.textBoxElement,game.canvas);

上述代码添加了一个html的input。

//更新函数，用来重新计算TextBox的位置HtmlTextBox.prototype.update  = function(){    var canvas = this.game.canvas;    var canvasX = canvas.offsetLeft;    var canvasY =  canvas.offsetTop;    var canvasWidth = canvas.offsetWidth;    var canvasHeight = canvas.offsetHeight;    if(this.oldCanvasWidth == canvasWidth && this.oldCanvasHeight == canvasHeight        && this.oldCanvasX == canvasX && this.oldCanvasY == canvasY)return;    var gameWidth = this.game.world.width;    var gameHeight = this.game.world.height;    var widthScanle = canvasWidth/gameWidth;    var heightScanle = canvasHeight/gameHeight;    var xScanle = this._x/gameWidth;    var yScanle = this._y/gameHeight;    var newX = canvasX + canvasWidth * xScanle;    var newY = canvasY + canvasHeight * yScanle;    var newWidth = this._width * widthScanle;    var newHeight = this._height * heightScanle;    this.setX(newX);    this.setY(newY);    this.setWidth(newWidth);    this.setHeight(newHeight);    this.oldCanvasWidth = canvasWidth;    this.oldCanvasHeight = canvasHeight;    this.oldCanvasX = canvasX;    this.oldCanvasY = canvasY;}