-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (85 loc) · 3.37 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backing">
<div class="container" id="container"></div>
</div>
<script type="text/javascript" src="2048.js"></script>
<script type="text/javascript" src="userInput.js"></script>
<script type="text/javascript" src="theme.js"></script>
<script type="text/javascript" defer>
const initialBlocks = 1;
const cellSize = 50;
const cellMargins = 2;
var container = document.getElementById("container");
var state = []; // {x, y, value}
function init() {
for (var i = 0; i < initialBlocks; i++) {
let obj = generateNewObject();
obj = createNewTileHtmlElement(obj);
state.push(obj);
}
}
function update() {
if (!hasKey()) {
state.forEach(animateCell);
}
else {
// received user input
state.forEach(endAnimation);
var dir = extractKey();
var dirVector = dirStringToVector(dir);
var enumerate = enumerateCells(dir);
var anyMoved = false;
enumerate.forEach(function (pos) {
var curr = getCellAt(pos);
if (curr == null) return;
var other = nextFrom(addVector(pos, dirVector), dirVector);
if (other == null) {
while (inBounds(addVector(pos, dirVector)))
pos = addVector(pos, dirVector);
if (curr.x !== pos[0] || curr.y !== pos[1])
anyMoved = true;
curr.anim = makeAnimation(curr, pos[0], pos[1], curr.value);
curr.x = pos[0];
curr.y = pos[1];
}
else if (other.anim.endVal != other.value || other.value != curr.value) {
var newx = other.x - dirVector[0];
var newy = other.y - dirVector[1];
if (curr.x !== newx || curr.y !== newy)
anyMoved = true;
curr.anim = makeAnimation(curr, newx, newy, curr.value);
curr.x = newx;
curr.y = newy;
}
else {
anyMoved = true;
other.anim.endVal = 0;
curr.anim = makeAnimation(curr, other.x, other.y, curr.value * 2);
curr.x = other.x;
curr.y = other.y;
}
});
let countAlive = 0;
state.forEach(item => {
if (item.anim == null || item.anim.endVal != 0) {
countAlive++;
}
});
if (anyMoved && countAlive < 16) {
let obj = generateNewObject();
obj = createNewTileHtmlElement(obj);
state.push(obj);
}
}
setTimeout(update, 16);
}
init();
update();
</script>
</body>
</html>