Random Walks with EaselJS

Create neon green random walks!

by Andy Novocin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/EaselJS/0.7.1/easeljs.min.js"></script>
<div class="canvasHolder">
    <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>

CSS

#gameCanvas {
    background-color : black;
}

JavaScript

//var bitmap = new createjs.Bitmap("http://opengameart.org/sites/default/files/styles/watermarked/public/box_1.png");
//bitmap.image.crossOrigin = "Anonymous";
var shape = new createjs.Shape();
//shape.graphics.beginFill("#0000ff").drawRect(0,0,100,100);
shape.graphics.beginFill("#000000").drawCircle(300,300,10);

var stage = new createjs.Stage("gameCanvas");
createjs.Ticker.addEventListener("tick", handleTick);
stage.addChild(shape);
shape.addEventListener("click", function(){alert(shape.x);});

function handleClick(event){
     alert("clicked");
}

function handleTick(event) {
    for (var i = 0; i < 10; i++){
    shape.x += Math.floor(Math.random()*3)-1;
    shape.y += Math.floor(Math.random()*3)-1;
    trail2 = new createjs.Shape();
    trail2.graphics.beginFill("#00ff00").drawCircle(300 + shape.x, 300 + shape.y,1);
    stage.addChild(trail2);
    }
    stage.update();
}