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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
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];
/*
Computing the least game zone dimension,
and the ratio of pieces images size.
*/
var minDim = gameZone_dim[0] < gameZone_dim[1] ?
gameZone_dim[0] : gameZone_dim[1];
var boardOffset = 10;
var effectiveDim = minDim - 2*boardOffset;
var cellDim = effectiveDim/8;
var picturesSizeRatio = cellDim/1000.0;
// Load images asynchronously
var piecesImages = {};
var loadingQueue = new createjs.LoadQueue(false);
loadingQueue.on("fileload", handleFileLoaded);
loadingQueue.on("complete", handleLoadingComplete);
loadingQueue.loadManifest([
{id:"wp", src:"../pictures/wp.png"},
{id:"wn", src:"../pictures/wn.png"},
{id:"wb", src:"../pictures/wb.png"},
{id:"wr", src:"../pictures/wr.png"},
{id:"wq", src:"../pictures/wq.png"},
{id:"wk", src:"../pictures/wk.png"},
{id:"bp", src:"../pictures/bp.png"},
{id:"bn", src:"../pictures/bn.png"},
{id:"bb", src:"../pictures/bb.png"},
{id:"br", src:"../pictures/br.png"},
{id:"bq", src:"../pictures/bq.png"},
{id:"bk", src:"../pictures/bk.png"}
]);
function handleFileLoaded(file){
var image = new createjs.Bitmap(file.item.src);
image.scaleX = picturesSizeRatio;
image.scaleY = picturesSizeRatio;
piecesImages[file.item.id] = image;
}
function handleLoadingComplete(){
drawEmptyBoard();
var img1 = piecesImages["wb"].clone();
var img1Pos = getCellPos(2,3);
img1.x = img1Pos[0];
img1.y = img1Pos[1];
stage.addChild(img1);
var img2 = piecesImages["bq"].clone();
var img2Pos = getCellPos(6,7);
img2.x = img2Pos[0];
img2.y = img2Pos[1];
stage.addChild(img2);
stage.update();
}
/*
Parameters : file then rank (0 to 7).
Return value : (file_pos, rank_pos)
*/
function getCellPos(file, rank){
return [
boardOffset + cellDim * file,
boardOffset + cellDim * (7 - rank)
];
}
function drawEmptyBoard(){
for (var rank = 0; rank < 8; rank++){
for (var file = 0; file < 8; file++){
var color;
if ((rank+file) % 2 !== 0) color = "#FFDB58";
else color = "#6F4E37";
var pos = getCellPos(file, rank);
var rectangle = new createjs.Shape();
rectangle.graphics.beginFill(color).drawRect(
pos[0], pos[1], cellDim, cellDim
);
stage.addChild(rectangle);
}
}
stage.update();
}
});
});
|
