JSFiddle - React, Tailwind, and code Playground

by Luiz Carlos Vieira

HTML

<body onLoad="init();">

    <canvas id="gameCanvas" width="800" height="400">
        O seu navegador não suporta HTML5. (<i>Your browser does not support HTML5.</i>)
    </canvas>
    
</body>

CSS

body {
	margin: 0;
	padding: 7px;
	background-color: rgba(255, 255, 255, 0);

	font-family: Arial, Verdana, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #333;
}

canvas {
	border: solid 1px rgba(0, 0, 0, 0.05);
	background-color: rgba(39, 40, 34, 1);
}

JavaScript

// ==================================
// FILE bot.js
// ==================================

/**
 * Bot class inherited from createjs.Sprite.
 * @author Luiz C. Vieira
 * @version 1.0
 */

// BEGIN - Anonymous wrapper function to keep from polluting the global scope
(function(){

	/**
	 * Class constructor.
	 * @param oSpriteSheetImage Image object with the sprite sheet to be used when drawing the Bot.
	 */
	var Bot = function(oSpriteSheetImage) {
		/**
		 * Private method to generate random names.
		 * @return String with the name generated.
		 */
		function genRandomName() {
			var sChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
			var iNameLen = 10;
			var sName = '';
			for(var i = 0; i < iNameLen; i++) {
				var iPos = Math.floor(Math.random() * sChars.length);
				sName += sChars.substring(iPos, iPos+1);
			}
			return sName;
		}

		/** Bot name. */
		this.name = genRandomName();

		this.toString = function() {
			return this.name;
		}

		// Initialize the class
		this.initialize(oSpriteSheetImage);		
	}

	Bot.prototype = new createjs.Sprite(); // Apply the inheritance
	Bot.prototype.Sprite_initialize = Bot.prototype.initialize; // Save the original 'initialize' method

	/**
	 * Redefinition of the 'initialize' method, in order to receive an image instance.
	 * @param oSpriteSheetImage Image object with the sprite sheet to be used to draw the Bot.
	 */
	Bot.prototype.initialize = function(oSpriteSheetImage) {
		console.debug("Initializing Bot [" + this.name + "]...");

		// Create a sprite sheet from the given image
		var oSpriteSheet = new createjs.SpriteSheet({
			images: [oSpriteSheetImage],
			frames: {width: 128, height: 128, regX: 64, regY: 64},
			animations: {
				walk:  [0, 4, "walk"]
			}
		});

		// Call the original initialize method passing the created sprite sheet as parameter
	    this.Sprite_initialize(oSpriteSheet);

	    // Set the initial animation
	    this.gotoAndStop("walk");
	}

	// Assign the class to the...