Drawing a line in easeljs
Check out this rudimentary snake game I made in jsfiddle. Note: you'll need to click into the bottom right window to gain focus and use the arrow keys to control the snake. With easeljs, you'll need to subscribe to the model of using DisplayObjects to construct your game environment. The DisplayObject is the building block for all UI content. In this case, I am using a Shape object which is a child class of DisplayObject, and is used to draw vector content. You'll also want to familiarize yourself with the Graphics class in easeljs. Each shape has a graphics property on which you will make all your drawing api calls.
var line = new createjs.Shape();
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startY++;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
Updating the stage in real time
In order to achieve the line movement, you will need listen to the "tick" event of Ticker object. In the jsfiddle example, I've added the both the stage as a listener, and a window scoped function where the line drawing will occur.
createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", tick);
You will also notice I've added a onkeydown listener to the window to set our key modifiers which control the direction of the snake.
window.onkeydown = function(e){
color = createjs.Graphics.getRGB(0xFFFFFF * Math.random(), 1);
switch(e.which){
case 38:
wPressed = false;
ePressed = false;
sPressed = false;
nPressed = true;
break;
case 39:
nPressed = false;
sPressed = false;
wPressed = false;
ePressed = true;
break;
case 40:
wPressed = false;
ePressed = false;
nPressed = false;
sPressed = true;
break;
case 37:
nPressed = false;
sPressed = false;
ePressed = false;
wPressed = true;
break;
}
}
Finally, in the tick function, you will make your drawing calls and update the x/y position based on the current direction. Remember the tick function gets called every frame, based on your current frames per second which is set using this static function.
function tick(){
if(nPressed)
{
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startY--;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
}
if(ePressed)
{
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startX++;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
}
if(wPressed)
{
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startX--;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
}
if(sPressed)
{
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startY++;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
}
}