JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js"></script>
<div id="game-div"></div>
JavaScript
var CANVAS_WIDTH = 600;
var CANVAS_HEIGHT = 400;
var game = new Phaser.Game(CANVAS_WIDTH, CANVAS_HEIGHT, Phaser.AUTO, 'game-area', { create: create, update: update, render: render });
var _cursor = {};
var _chatbox = {};
var _input = {};
var _screen = {};
var _BACKSPACE,
_ENTER;
var word = "phaser";
function create(){
//special keys
//http://phaser.io/docs/2.6.1/Phaser.KeyCode.html
//
_BACKSPACE = game.input.keyboard.addKey(Phaser.KeyCode.BACKSPACE);
_ENTER = game.input.keyboard.addKey(Phaser.KeyCode.ENTER);
//create UI
_chatbox.sprite = fakeSprite_NoFill(0, 350, 600, 50, '#00FF00');
_screen.bmd = game.add.bitmapData(600, 350);
_screen.bmd.addToWorld(0, 0);
_screen.bmd.context.font = '46px Arial';
_screen.bmd.context.fillStyle = '#ffffff';
_screen.data = 'Guesswork';
_screen.bmd.context.fillText(_screen.data, 0, 50);
_input.bmd = game.add.bitmapData(600, 80);
_input.bmd.addToWorld(8, 328);
_input.bmd.context.font = '46px Arial';
_input.bmd.context.fillStyle = '#ffffff';
_input.data = '';
_input.bmd.context.fillText(_input.data, 64, 64);
_cursor.bmd = game.add.bitmapData(20, 40);
_cursor.color1 = fakeSprite(200, 200, 10, 40, '#0000FF');
_cursor.color2 = fakeSprite(200, 100, 10, 40, '#FFFFFF');
_cursor.bmd.draw(_cursor.color1,0,0);
_cursor.bmd.draw(_cursor.color2,10,0);
_cursor.color1.kill();
_cursor.color2.kill();
game.cache.addSpriteSheet('dynamic', '', _cursor.bmd.canvas, 10, 40, 2);
_cursor.sprite = game.add.sprite(8, 355, 'dynamic', 2);
_cursor.sprite.animations.add('animation');
_cursor.sprite.animations.play('animation', 2, true);
// Capture all key presses
game.input.keyboard.addCallbacks(this, null, null, keyPress);
}
function update(){
if (_ENTER.isDown){
_screen.bmd.cls();
if (_input.data != ''){
_screen.data = _input.data;
if (_input.data == word)...