JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="testbench" width="320" height="200"></canvas>
JavaScript
// Extract from articles by David Rousset available on http://blogs.msdn.com/davrous
// Monster.js source code
(function (window) {
// contentManager is an instance described in ContentMananger.js
// enableShadows is a boolean indicating if you'd like to enable shadows on each sprite or not
// x_end, y_end are the size of the canvas/stage where the sprites will be drawn
function Monster(contentManager, enableShadows, x_end, y_end) {
this.initialize(contentManager, enableShadows, x_end, y_end);
}
Monster.prototype = new createjs.BitmapAnimation();
// public properties:
Monster.prototype.IDLEWAITTIME = 40;
Monster.prototype.bounds = 0; //visual radial size
Monster.prototype.hit = 0; //average radial disparity
// constructor:
Monster.prototype.BitmapAnimation_initialize = Monster.prototype.initialize; //unique to avoid overiding base class
// variable members to handle the idle state
// and the time to wait before walking again
this.isInIdleMode = false;
this.idleWaitTicker = 0;
var quaterFrameSize;
// There is 4 types of monsters available A, B, C, D
var possibleLetters = "ABCD";
// function to randomly return a monster of type A, B, C or D
Monster.prototype.chooseMonsterType = function () {
var monsterName = "";
var monsterImage;
monsterName = "Monster" + possibleLetters.charAt(Math.floor(Math.random() * possibleLetters.length));
switch (monsterName) {
case "MonsterA":
monsterImage = this.contentManager.imgMonsterA;
break;
case "MonsterB":
monsterImage = this.contentManager.imgMonsterB;
break;
case "MonsterC":
monsterImage = this.contentManager.imgMonsterC;
break;
case "MonsterD":
monsterImage = this.contentManager.imgMonsterD;
break;
}
return {
...