Skip to content

Commit 5b90395

Browse files
author
joaov
committed
animacoes finalizadas
1 parent c5a9db8 commit 5b90395

File tree

2 files changed

+194
-81
lines changed

2 files changed

+194
-81
lines changed

‎my2048_v0.2/game.js‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,26 +40,50 @@ export default function startGame(initialSize) {
4040
previousState.grid[position].fill(0);
4141
}
4242

43-
newBlock(game);
44-
newBlock(game);
45-
46-
notifyAll({ size: game.size, grid: game.grid, score: game.score });
43+
notifyAll({
44+
size: game.size, grid: game.grid, score: game.score,
45+
type: 'newGame'
46+
});
47+
48+
let position = newBlock(game);
49+
notifyAll({
50+
size: game.size, grid: game.grid, score: game.score,
51+
type: 'appear', in: { x: position.x, y: position.y}, value: game.grid[position.x][position.y]
52+
});
53+
54+
position = newBlock(game);
55+
notifyAll({
56+
size: game.size, grid: game.grid, score: game.score,
57+
type: 'appear', in: { x: position.x, y: position.y}, value: game.grid[position.x][position.y]
58+
});
59+
60+
//notifyAll({ size: game.size, grid: game.grid, score: game.score });
4761
}
4862

4963
function move(input) {
5064
let hasUpdated = false;
5165
let firstMove = true;
5266

5367
if (input == 'backspace') {
68+
notifyAll({
69+
size: game.size, grid: game.grid, score: game.score,
70+
type: 'newGame'
71+
});
72+
5473
for (let line in game.grid) {
5574
for (let column in game.grid[line]) {
5675
game.grid[line][column] = previousState.grid[line][column];
76+
77+
notifyAll({
78+
size: game.size, grid: game.grid, score: game.score,
79+
type: 'appear', in: { x: line, y: column}, value: game.grid[line][column]
80+
});
5781
}
5882
}
5983

6084
game.score = previousState.score;
6185

62-
notifyAll({ size: game.size, grid: game.grid, score: game.score });
86+
//notifyAll({ size: game.size, grid: game.grid, score: game.score });
6387
}
6488

6589
function saveState() {
@@ -89,7 +113,7 @@ export default function startGame(initialSize) {
89113

90114
notifyAll({
91115
size: game.size, grid: game.grid, score: game.score,
92-
type: 'move', from: { x: x2, y: y2 }, to: { x: x1, y: y1 }
116+
type: 'move', from: { x: x2, y: y2 }, to: { x: x1, y: y1 }, value: game.grid[x1][y1]
93117
});
94118
}
95119

@@ -106,15 +130,15 @@ export default function startGame(initialSize) {
106130

107131
notifyAll({
108132
size: game.size, grid: game.grid, score: game.score,
109-
type: 'join', to: { x: xIn, y: yIn }, from: { x: xErase, y: yErase }
133+
type: 'join', to: { x: xIn, y: yIn }, from: { x: xErase, y: yErase }, value: game.grid[xIn][yIn] - 1
110134
});
111135
}
112136

113137
if (hasUpdated) {
114138
const position = newBlock(game);
115139
notifyAll({
116140
size: game.size, grid: game.grid, score: game.score,
117-
type: 'appear', in: { x: position.x, y: position.y }
141+
type: 'appear', in: { x: position.x, y: position.y}, value: game.grid[position.x][position.y]
118142
});
119143
}
120144

‎my2048_v0.2/graphic.js‎

Lines changed: 162 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -11,66 +11,53 @@ export default function newGraphicCanvas(windowInput, canvasId) {
1111
}
1212

1313
let animationsList = [];
14-
let lastAddedAnimation = {
15-
from: 0,
16-
to: 0
17-
};
1814

1915
function stateUpdate(gameStateObj) {
20-
state.size = gameStateObj.size;
21-
state.grid = gameStateObj.grid;
16+
if (state.size != gameStateObj.size) {
17+
state.size = gameStateObj.size;
18+
19+
state.grid = new Array(state.size);
20+
}
2221

2322
if (gameStateObj.type) {
2423
const moveTypes = {
2524
move() {
26-
if (lastAddedAnimation.to.x == gameStateObj.from.x && lastAddedAnimation.to.y == gameStateObj.from.y) {
27-
animationsList.pop();
28-
29-
lastAddedAnimation = {
30-
type: gameStateObj.type,
31-
from: lastAddedAnimation.from,
32-
to: gameStateObj.to,
33-
value: state.grid[gameStateObj.to.x][gameStateObj.to.y],
34-
progress: 0
35-
};
36-
37-
animationsList.push(lastAddedAnimation);
38-
} else {
39-
lastAddedAnimation = {
40-
type: gameStateObj.type,
41-
from: gameStateObj.from,
42-
to: gameStateObj.to,
43-
value: state.grid[gameStateObj.to.x][gameStateObj.to.y],
44-
progress: 0
45-
};
46-
47-
animationsList.push(lastAddedAnimation);
48-
}
49-
50-
//console.log(`move animation registred do valor ${2**state.grid[gameStateObj.to.x][gameStateObj.to.y]} de (${gameStateObj.from.x},${gameStateObj.from.y}) para (${gameStateObj.to.x},${gameStateObj.to.y})`);
25+
animationsList.push({
26+
type: gameStateObj.type,
27+
from: gameStateObj.from,
28+
to: gameStateObj.to,
29+
value: gameStateObj.value,
30+
progress: 0
31+
});
5132
},
5233
join() {
5334
animationsList.push({
5435
type: gameStateObj.type,
5536
from: gameStateObj.from,
5637
to: gameStateObj.to,
57-
value: state.grid[gameStateObj.to.x][gameStateObj.to.y] - 1,
38+
value: gameStateObj.value,
5839
progress: 0
5940
});
60-
61-
//console.log(`join animation registred do valor ${2**(state.grid[gameStateObj.to.x][gameStateObj.to.y] - 1)} de (${gameStateObj.from.x},${gameStateObj.from.y}) para (${gameStateObj.to.x},${gameStateObj.to.y})`)
6241
},
6342
appear() {
6443
animationsList.push({
6544
type: gameStateObj.type,
6645
in: gameStateObj.in,
67-
value: state.grid[gameStateObj.in.x][gameStateObj.in.y],
46+
value: gameStateObj.value,
6847
progress: 0
6948
});
49+
},
50+
newGame() {
51+
for (let position = 0; position < state.size; position++) {
52+
state.grid[position] = new Array(state.size);
53+
state.grid[position].fill(0);
54+
}
7055
}
7156
}
7257

73-
moveTypes[gameStateObj.type]();
58+
if(moveTypes[gameStateObj.type]) {
59+
moveTypes[gameStateObj.type]();
60+
}
7461
}
7562
}
7663

@@ -80,11 +67,15 @@ export default function newGraphicCanvas(windowInput, canvasId) {
8067
screen.clearRect(0, 0, canvas.width, canvas.height);
8168

8269
const block = {
83-
size: {
84-
width: (canvas.width - (state.size * 5) - 5) / state.size,
85-
height: (canvas.height - (state.size * 5) - 5) / state.size
86-
},
87-
space: 5
70+
size: null,
71+
space: null
72+
}
73+
74+
block.space = 80 / state.size;
75+
76+
block.size = {
77+
width: (canvas.width - (state.size * block.space) - block.space) / state.size,
78+
height: (canvas.height - (state.size * block.space) - block.space) / state.size
8879
}
8980

9081
screen.textBaseline = 'middle';
@@ -108,57 +99,155 @@ export default function newGraphicCanvas(windowInput, canvasId) {
10899

109100
for (let line in state.grid) {
110101
for (let column in state.grid[line]) {
111-
let element = state.grid[line][column];
112-
113-
let printParam = {
114-
init: {
115-
x: block.space + column * (block.size.width + block.space),
116-
y: block.space + line * (block.size.height + block.space)
117-
},
118-
size: block.size,
119-
textPosition: null
120-
}
102+
printBlock(line, column, state.grid[line][column]);
103+
}
104+
}
121105

122-
printParam.textPosition = {
123-
x: printParam.init.x + (printParam.size.width / 2),
124-
y: printParam.init.y + (printParam.size.height / 2)
125-
}
106+
runAnimations();
107+
108+
function runAnimations() {
109+
const animation = animationsList[0];
110+
const animationStep = 20;
111+
112+
const moves = {
113+
move() {
114+
//printa o bloco em movimento
115+
if (animation.to.x != animation.from.x) {
116+
//vertical
117+
let progressRelation = (animation.to.x > animation.from.x) ? (animation.progress) : (100 - animation.progress);
118+
let blocksToMove = (Math.abs(animation.to.x - animation.from.x)) * (progressRelation) / 100;
119+
let absoluteBlockPosition = (animation.to.x > animation.from.x) ? (animation.from.x + blocksToMove) : (animation.to.x + blocksToMove);
126120

121+
printBlock(absoluteBlockPosition, animation.to.y, animation.value);
122+
} else {
123+
//horizontal
124+
let progressRelation = (animation.to.y > animation.from.y) ? (animation.progress) : (100 - animation.progress);
125+
let blocksToMove = (Math.abs(animation.to.y - animation.from.y)) * (progressRelation) / 100;
126+
let absoluteBlockPosition = (animation.to.y > animation.from.y) ? (animation.from.y + blocksToMove) : (animation.to.y + blocksToMove);
127127

128-
if (element != 0) {
129-
screen.fillStyle = color.notEmptyBlock(element);
130-
screen.fillRect(printParam.init.x, printParam.init.y, printParam.size.width, printParam.size.height);
128+
printBlock(animation.to.x, absoluteBlockPosition, animation.value);
129+
}
130+
},
131+
join() {
132+
//printa o bloco em movimento
133+
if (animation.to.x != animation.from.x) {
134+
//vertical
135+
let progressRelation = (animation.to.x > animation.from.x) ? (animation.progress) : (100 - animation.progress);
136+
let blocksToMove = (Math.abs(animation.to.x - animation.from.x)) * (progressRelation) / 100;
137+
let absoluteBlockPosition = (animation.to.x > animation.from.x) ? (animation.from.x + blocksToMove) : (animation.to.x + blocksToMove);
131138

132-
screen.fillStyle = color.text;
133-
if (String(2 ** element).length < 3) {
134-
screen.font = `bold ${(2 / 3) * block.size.height}px Arial`;
135-
screen.fillText(String(2 ** element), printParam.textPosition.x, printParam.textPosition.y);
139+
printBlock(absoluteBlockPosition, animation.to.y, animation.value);
136140
} else {
137-
screen.font = `bold ${(2 / String(2 ** element).length) * (2 / 3) * block.size.height}px Arial`;
138-
screen.fillText(String(2 ** element), printParam.textPosition.x, printParam.textPosition.y);
141+
//horizontal
142+
let progressRelation = (animation.to.y > animation.from.y) ? (animation.progress) : (100 - animation.progress);
143+
let blocksToMove = (Math.abs(animation.to.y - animation.from.y)) * (progressRelation) / 100;
144+
let absoluteBlockPosition = (animation.to.y > animation.from.y) ? (animation.from.y + blocksToMove) : (animation.to.y + blocksToMove);
145+
146+
printBlock(animation.to.x, absoluteBlockPosition, animation.value);
139147
}
140-
} else {
141-
screen.fillStyle = color.emptyBlock;
142-
screen.fillRect(printParam.init.x, printParam.init.y, printParam.size.width, printParam.size.height);
148+
149+
//printa o bloco novo
150+
printBlock(animation.to.x, animation.to.y, animation.value);
151+
152+
let size = block.size.width + 2 * block.space;
153+
154+
//penultimo passo
155+
if (animation.progress + (3 * animationStep) >= 100) {
156+
printBlock(animation.to.x, animation.to.y, animation.value, size, size);
157+
}
158+
159+
//ultimo passo
160+
if (animation.progress + animationStep >= 100) {
161+
162+
printBlock(animation.to.x, animation.to.y, animation.value + 1, size, size);
163+
}
164+
},
165+
appear() {
166+
let size = block.size.width * animation.progress / 100;
167+
printBlock(animation.in.x, animation.in.y, animation.value, size, size);
143168
}
144169
}
145-
}
146170

147-
runAnimations();
171+
const begin = {
172+
move(animationObj) {
173+
state.grid[animationObj.from.x][animationObj.from.y] = 0;
174+
},
175+
join(animationObj) {
176+
state.grid[animationObj.from.x][animationObj.from.y] = 0;
177+
},
178+
appear(animationObj) {
148179

149-
function runAnimations() {
150-
const animation = animationsList[0];
180+
}
181+
}
182+
183+
const finish = {
184+
move(animationObj) {
185+
state.grid[animationObj.to.x][animationObj.to.y] = animationObj.value;
186+
},
187+
join(animationObj) {
188+
state.grid[animationObj.to.x][animationObj.to.y] = animationObj.value + 1;
189+
},
190+
appear(animationObj) {
191+
state.grid[animationObj.in.x][animationObj.in.y] = animationObj.value;
192+
}
193+
}
151194

152195
if (animation) {
153-
animation.progress += 20;
196+
if (animation.progress == 0) {
197+
begin[animation.type](animation);
198+
}
199+
200+
if (moves[animation.type]) {
201+
moves[animation.type]();
202+
}
203+
204+
animation.progress += animationStep;
154205

155-
if (animation.progress == 100) {
206+
if (animation.progress >= 100) {
156207
console.log(`animated ${animationsList[0].type}`);
208+
finish[animation.type](animation);
157209
animationsList.shift();
158210
}
159211
}
160212
}
161213

214+
function printBlock(x, y, value, width = block.size.width, height = block.size.height) {
215+
let printParam = {
216+
init: {
217+
x: block.space + y * (block.size.width + block.space),
218+
y: block.space + x * (block.size.height + block.space)
219+
},
220+
size: block.size,
221+
textPosition: null
222+
}
223+
224+
printParam.textPosition = {
225+
x: printParam.init.x + (printParam.size.width / 2),
226+
y: printParam.init.y + (printParam.size.height / 2)
227+
}
228+
229+
if (value != 0) {
230+
screen.fillStyle = color.notEmptyBlock(value);
231+
232+
printParam.init.x += (block.size.width / 2) - (width / 2);
233+
printParam.init.y += (block.size.height / 2) - (height / 2);
234+
235+
screen.fillRect(printParam.init.x, printParam.init.y, width, height);
236+
237+
screen.fillStyle = color.text;
238+
if (String(2 ** value).length < 3) {
239+
screen.font = `bold ${(2 / 3) * height}px Arial`;
240+
screen.fillText(String(2 ** value), printParam.textPosition.x, printParam.textPosition.y);
241+
} else {
242+
screen.font = `bold ${(2 / String(2 ** value).length) * (2 / 3) * height}px Arial`;
243+
screen.fillText(String(2 ** value), printParam.textPosition.x, printParam.textPosition.y);
244+
}
245+
} else {
246+
screen.fillStyle = color.emptyBlock;
247+
screen.fillRect(printParam.init.x, printParam.init.y, printParam.size.width, printParam.size.height);
248+
}
249+
}
250+
162251
windowInput.requestAnimationFrame(newFrame);
163252
}
164253

0 commit comments

Comments
 (0)