JSFiddle - React, Tailwind, and code Playground

by stot

HTML

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);

// Code to create referenced objects
var redShape = new createjs.Shape().set({
    x: 50,
    y: 50
});
redShape.graphics.f("#f00").dc(0, 0, 25);
var greenShape = new createjs.Shape().set({
    x: 50,
    y: 150
});
greenShape.graphics.f("#0f0").dc(0, 0, 25);
stage.addChild(redShape, greenShape);

// team monster attack counter (invisible)
var counter = new createjs.Text('*', 'bold 32px Arial', '#FF0');
counter.x = 100; // index * playa.conf.imgIconWidth; 
counter.y = 340; // 
counter.shadow = new createjs.Shadow("#000", 0, 0, 3);
stage.addChild(counter);

countTween = createjs.Tween.get(counter)
    .to({
    y: 35
}, 650, createjs.Ease.quadOut)
    .to({
    y: 50
}, 100, createjs.Ease.quadIn);
countTween2 = createjs.Tween.get(counter)
    .to({
    x: 200
}, 750).
set({
    visible: false
});

greenTween = createjs.Tween.get(greenShape, {
    paused: true
})
    .to({
    x: 300
}, 2000)
    .to({
    x: 50
}, 2000);

redTween = createjs.Tween.get(redShape)
    .to({
    x: 300
}, 2000)
    .play(greenTween)
    .to({
    x: 300
}, 0)
    .to({
    x: 50
}, 2000);

var text = new createjs.Text('0', 'bold 32px Arial', '#000');
text.x = 200; // index * playa.conf.imgIconWidth; 
text.y = 50; // 
text.visible = false;
stage.addChild(text);

var textTween = createjs.Tween.get(text, {
    paused: true
})
    .to({
        score: 0,visible:true
})
    .to({
    y: 25,
    score: 50
}, 350, createjs.Ease.quadOut)
    .to({
    y: 50,
    score: 100
}, 350, createjs.Ease.quadIn);
textTween.on("change", function (evt, data) {
    text.text = Math.ceil(text.score);
}, null, false, this);

countTween.play(textTween);

function tick(event) {
    stage.update();
}