-
Notifications
You must be signed in to change notification settings - Fork 0
/
tile.js
83 lines (70 loc) · 2.04 KB
/
tile.js
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
//Tiles fill the grid. They're always there.
//But their value can change.
//The start with value "", but that changes if something is placed there.
function Tile(x, y, width, height, row, column) {
this.value = "";
this.filled = false;
this.row = row;
this.column = column;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = emptyTileColor;
this.ctx = ctx;
}
Tile.prototype.changeValue = function (val) {
this.filled = true;
this.value = val;
this.color = filledTileColor;
//Tile
this.ctx.beginPath();
this.ctx.rect(this.x, this.y, this.width, this.height);
this.ctx.fillStyle = this.color;
this.ctx.fill();
this.ctx.closePath();
//Text Inside Tile
this.ctx.font = "30px Arial";
this.ctx.textAlign = "center";
this.ctx.fillStyle = "black";
this.ctx.fillText(this.value, this.x+this.width/2, this.y+this.height/2 + 5);
};
Tile.prototype.flashRemoval = function () {
this.color = tileRemovalColor;
//Tile
this.ctx.beginPath();
this.ctx.rect(this.x, this.y, this.width, this.height);
this.ctx.fillStyle = this.color;
this.ctx.fill();
this.ctx.closePath();
//Text Inside Tile
this.ctx.font = "30px Arial";
this.ctx.textAlign = "center";
this.ctx.fillStyle = tileRemovalText;
this.ctx.fillText(this.value, this.x+this.width/2, this.y+this.height/2 + 5);
// this.drawEmptyTile();
var self = this;
setTimeout(function(){
self.drawEmptyTile();
userScore += 1;
showScore();
}
, 500);
};
Tile.prototype.drawEmptyTile = function () {
this.filled = false;
this.value = "";
this.color = emptyTileColor;
this.ctx.beginPath();
this.ctx.rect(this.x, this.y, this.width, this.height);
this.ctx.fillStyle = this.color;
this.ctx.fill();
this.ctx.closePath();
this.ctx.beginPath();
this.ctx.rect(this.x - grid.spaceBetween/2, this.y - grid.spaceBetween/2,
this.width + grid.spaceBetween, this.height + grid.spaceBetween);
this.ctx.lineWidth="5";
this.ctx.strokeStyle = gridBorderColor;
this.ctx.stroke();
this.ctx.closePath();
};