<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="script.js"></script>
</head>
<body onLoad="init();">
<h1 onclick="document.getElementById('log').innerHTML = '-<br>';">CreateJS - EaselJS</h1>
<canvas id="canvas" width="670" height="470" style="background-color:#ffffff">
alternate content
</canvas>
<div id="log">debug info</div>
</body>
</html>
// Code goes here
var stage, logDiv;
function init() {
logDiv = document.getElementById("log");
logDiv.innerHTML = '-<br>';
var canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
createObjs();
//Update stage will render next frame
stage.update();
}
function createObjs() {
// create a stationary object
aim = new createjs.Shape();
aim.graphics.beginFill("#ABCDEF").drawCircle(0, 0, 50);
aim.x = aim.y = 100;
stage.addChild(aim);
// Create a movable object.
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40)
.beginFill("yellow").drawCircle(0, 0, 10);
//Set position of Shape instance.
circle.x = circle.y = 50;
circle.addEventListener("mousedown", function(event) {
var sX = Math.floor(event.stageX);
var sY = Math.floor(event.stageY);
circle.dX = sX - circle.x;
circle.dY = sY - circle.y;
logDiv.innerHTML += 'dn x:' + sX + ' y:' + sY + ', ';
});
circle.addEventListener("pressmove", function(event) {
var sX = Math.floor(event.stageX);
var sY = Math.floor(event.stageY);
circle.x = sX - circle.dX;
circle.y = sY - circle.dY;
if (circle.x > 90 && circle.x < 110 && circle.y > 90 && circle.y < 110) {
circle.x = 100;
circle.y = 100;
}
stage.update();
logDiv.innerHTML += 'mv x:' + sX + ' y:' + sY + ', ';
});
circle.addEventListener("pressup", function(event) {
var sX = Math.floor(event.stageX);
var sY = Math.floor(event.stageY);
logDiv.innerHTML += 'up x:' + sX + ' y:' + sY + '<br>';
});
//Add Shape instance to stage display list.
stage.addChild(circle);
}
/* Styles go here */
body {
background-color:#D4D4D4;
}
h1 {
cursor: pointer;
}