playa reward screen
by stot
HTML
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<div style="background-color:gray">
<h1>something</h1>
<canvas id="jewels2" width="192" height="320" style="border:1px solid white">NO CANVAS, GET A BETTER BROWSER!</canvas>
</div>
JavaScript
f = function ( canvas) {
console.log('blah');
// completion screen with header and reward texts
this.completionStage = new createjs.Stage( canvas);
var completionHeader = new createjs.Text('Completion reward', 'bold 1em Arial', '#FFF');
completionHeader.x = 10;
completionHeader.y = 10;
completionHeader.shadow = new createjs.Shadow("#000", 0, 0, 3);
this.completionStage.addChild(completionHeader);
var completionCoinLabel = new createjs.Text('Coins acquired', 'bold 0.75em Arial', '#FFF');
completionCoinLabel.x = 20;
completionCoinLabel.y = 75;
completionCoinLabel.shadow = new createjs.Shadow("#000", 0, 0, 3);
this.completionStage.addChild(completionCoinLabel);
var completionExpLabel = new createjs.Text('Exp acquired', 'bold 0.75em Arial', '#FFF');
completionExpLabel.x = 20;
completionExpLabel.y = 100;
completionExpLabel.shadow = new createjs.Shadow("#000", 0, 0, 3);
this.completionStage.addChild(completionExpLabel);
var completionMonstersText = new createjs.Text('Monster(s) acquired', 'bold 1em Arial', '#FFF');
completionMonstersText.x = 10;
completionMonstersText.y = 150;
completionMonstersText.shadow = new createjs.Shadow("#000", 0, 0, 3);
this.completionStage.addChild(completionMonstersText);
this.completionCoinsText = new createjs.Text('34560', 'bold 0.75em Arial', '#FFF');
this.completionCoinsText.x = 182;
this.completionCoinsText.y = 75;
this.completionCoinsText.textAlign = 'right';
this.completionCoinsText.shadow = new createjs.Shadow("#000", 0, 0, 3);
this.completionStage.addChild(this.completionCoinsText);
this.completionExpText = new createjs.Text('1234', 'bold 0.75em Arial', '#FFF');
this.completionExpText.x = 182;
this.completionExpText.y = 100;
this.completionExpText.textAlign = 'right';
this.completionExpText.shadow = new createjs.Shadow("#000", 0, 0, 3);
this.completionStage.addChild(this.completionExpText);
...