1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
define(function (require) {
"use strict";
var activity = require('sugar-web/activity/activity'),
createjs = require('easel'),
Tween = require('tween'),
Preload = require('preload'),
$ = require('jquery');
// Manipulate the DOM only when it is ready.
require(['domReady!'], function (doc) {
// Initialize the activity.
activity.setup();
var canvas = doc.getElementById('gameZone'),
stage = new createjs.Stage(canvas),
toolbar_height = $('.toolbar').height(),
win_dim = new Array($(window).width(), $(window).height()),
gameZone_dim = new Array(win_dim[0], win_dim[1]-toolbar_height);
/*
I assume that we won't draw outside game zone.
Removing overflow, even auto, remove size overhead, so that the background is applied to the whole game zone area.
*/
$("#canvas").css("overflow", "hidden");
var canvasContext = $("#gameZone")[0].getContext("2d");
canvasContext.canvas.width = gameZone_dim[0];
canvasContext.canvas.height = gameZone_dim[1];
// Builds the background
var background = new createjs.Shape();
background.graphics.beginFill("#CCC").drawRect(0, 0, gameZone_dim[0], gameZone_dim[1]);
var loadingQueue = new createjs.LoadQueue(false);
loadingQueue.on("complete", handleLoadingComplete);
loadingQueue.loadManifest([
{id:"wb", src:"../pictures/wb.png"}
]);
function handleLoadingComplete(){
console.log("loaded image");
var image = loadingQueue.getResult("wb").result;
stage.addChild(new createjs.Bitmap(image));
stage.update();
}
stage.addChild(background);
stage.update();
});
});
|
