JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.3.0.min.js"></script>
<canvas id="Landscape" width="640" height="400"></canvas>
JavaScript
var stage = new createjs.Stage(document.getElementById('Landscape'));
stage.mouseEventsEnabled = true;
createjs.Ticker.addListener(stage);
createjs.Ticker.setFPS(30);
createjs.Ticker.useRAF = true;
var assets = 0,
stack = {};
var BitmapImage = function(param) {
assets++;
var obj = new Image();
for (var x in param) {
obj.setAttribute(x, param[x]);
}
obj.addEventListener("load", BitmapImageLoaded, false);
obj.addEventListener("error", BitmapImageError, false);
return obj;
};
var BitmapImageLoaded = function() {
assets--, ref = stack[this.getAttribute("name")] = new createjs.Bitmap(this);
if (this.getAttribute("x")) {
ref.x = parseInt(this.getAttribute("x"));
}
if (this.getAttribute("y")) {
ref.y = this.getAttribute("y");
}
if (this.getAttribute("alpha")) {
ref.alpha = this.getAttribute("alpha");
}
stage.addChild(ref);
stage.update();
if (!assets) {
MoveCloud();
}
};
var BitmapImageError = function() {
console.error(arguments);
};
var MoveCloud = function() {
console.log("MoveCloud()");
createjs.Tween.get(stack["cloud"]).to({"x": 25}, 1000).call(test);
};
var test = function() {
console.log("test");
}
var bg = new BitmapImage({
"src": "http://www.hakoniemi.net/labs/createjs-test/assets/bg.jpg",
"name": "bg"
});
var cloud = new BitmapImage({
"src": "http://www.hakoniemi.net/labs/createjs-test/assets/cloud.png",
"name": "cloud",
"x": 150,
"y": 75
});