schooluk-2048 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/favicon.ico ADDED
Binary file
package/index.html ADDED
@@ -0,0 +1,126 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <!-- Google tag (gtag.js) -->
6
+ <script async src="https://www.googletagmanager.com/gtag/js?id=G-D1D7WGSDYH"></script>
7
+ <script>
8
+ window.dataLayer = window.dataLayer || [];
9
+ function gtag(){dataLayer.push(arguments);}
10
+ gtag('js', new Date());
11
+ gtag('config', 'G-D1D7WGSDYH');
12
+ </script>
13
+ <meta charset="utf-8">
14
+ <title>2048</title>
15
+
16
+ <link href="style/main.css" rel="stylesheet" type="text/css">
17
+ <link rel="shortcut icon" href="favicon.ico">
18
+ <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
19
+ <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
20
+ <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
21
+ <meta name="apple-mobile-web-app-capable" content="yes">
22
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
23
+
24
+ <meta name="HandheldFriendly" content="True">
25
+ <meta name="MobileOptimized" content="320">
26
+ <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
27
+ </head>
28
+ <body>
29
+ <div class="container">
30
+ <div class="heading">
31
+ <h1 class="title">2048</h1>
32
+ <div class="scores-container">
33
+ <div class="score-container">0</div>
34
+ <div class="best-container">0</div>
35
+ </div>
36
+ </div>
37
+
38
+ <div class="above-game">
39
+ <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
40
+ <a class="restart-button">New Game</a>
41
+ </div>
42
+
43
+ <div class="game-container">
44
+ <div class="game-message">
45
+ <p></p>
46
+ <div class="lower">
47
+ <a class="keep-playing-button">Keep going</a>
48
+ <a class="retry-button">Try again</a>
49
+ </div>
50
+ </div>
51
+
52
+ <div class="grid-container">
53
+ <div class="grid-row">
54
+ <div class="grid-cell"></div>
55
+ <div class="grid-cell"></div>
56
+ <div class="grid-cell"></div>
57
+ <div class="grid-cell"></div>
58
+ </div>
59
+ <div class="grid-row">
60
+ <div class="grid-cell"></div>
61
+ <div class="grid-cell"></div>
62
+ <div class="grid-cell"></div>
63
+ <div class="grid-cell"></div>
64
+ </div>
65
+ <div class="grid-row">
66
+ <div class="grid-cell"></div>
67
+ <div class="grid-cell"></div>
68
+ <div class="grid-cell"></div>
69
+ <div class="grid-cell"></div>
70
+ </div>
71
+ <div class="grid-row">
72
+ <div class="grid-cell"></div>
73
+ <div class="grid-cell"></div>
74
+ <div class="grid-cell"></div>
75
+ <div class="grid-cell"></div>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="tile-container">
80
+
81
+ </div>
82
+ </div>
83
+
84
+ <p class="game-explanation">
85
+ <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
86
+ </p>
87
+ </div>
88
+
89
+ <script src="js/bind_polyfill.js"></script>
90
+ <script src="js/classlist_polyfill.js"></script>
91
+ <script src="js/animframe_polyfill.js"></script>
92
+ <script src="js/keyboard_input_manager.js"></script>
93
+ <script src="js/html_actuator.js"></script>
94
+ <script src="js/grid.js"></script>
95
+ <script src="js/tile.js"></script>
96
+ <script src="js/local_storage_manager.js"></script>
97
+ <script src="js/game_manager.js"></script>
98
+ <script src="js/application.js"></script>
99
+ <link rel="stylesheet" href="../../navbar.css">
100
+ <script src="../../navbar.js"></script>
101
+ <script src="../../scripts/panic-button.js"></script>
102
+ <script src="tabCloak.js"></script>
103
+ <script>
104
+ // Apply cloak on page load
105
+ window.addEventListener('load', function() {
106
+ const savedCloak = localStorage.getItem('tabCloak');
107
+ if (savedCloak) {
108
+ const cloak = JSON.parse(savedCloak);
109
+ const existingFavicon = document.querySelector("link[rel*='icon']");
110
+ if (existingFavicon) {
111
+ existingFavicon.remove();
112
+ }
113
+ const newFavicon = document.createElement('link');
114
+ newFavicon.rel = 'icon';
115
+ newFavicon.type = 'image/x-icon';
116
+ newFavicon.href = cloak.icon;
117
+ document.head.appendChild(newFavicon);
118
+ document.title = cloak.title;
119
+ }
120
+ });
121
+ </script>
122
+ <script src="/checkAccess.js"></script>
123
+
124
+ </body>
125
+
126
+ </html>
@@ -0,0 +1,28 @@
1
+ (function () {
2
+ var lastTime = 0;
3
+ var vendors = ['webkit', 'moz'];
4
+ for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
5
+ window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
6
+ window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
7
+ window[vendors[x] + 'CancelRequestAnimationFrame'];
8
+ }
9
+
10
+ if (!window.requestAnimationFrame) {
11
+ window.requestAnimationFrame = function (callback) {
12
+ var currTime = new Date().getTime();
13
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
14
+ var id = window.setTimeout(function () {
15
+ callback(currTime + timeToCall);
16
+ },
17
+ timeToCall);
18
+ lastTime = currTime + timeToCall;
19
+ return id;
20
+ };
21
+ }
22
+
23
+ if (!window.cancelAnimationFrame) {
24
+ window.cancelAnimationFrame = function (id) {
25
+ clearTimeout(id);
26
+ };
27
+ }
28
+ }());
@@ -0,0 +1,4 @@
1
+ // Wait till the browser is ready to render the game (avoids glitches)
2
+ window.requestAnimationFrame(function () {
3
+ new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
4
+ });
@@ -0,0 +1,9 @@
1
+ Function.prototype.bind = Function.prototype.bind || function (target) {
2
+ var self = this;
3
+ return function (args) {
4
+ if (!(args instanceof Array)) {
5
+ args = [args];
6
+ }
7
+ self.apply(target, args);
8
+ };
9
+ };
@@ -0,0 +1,71 @@
1
+ (function () {
2
+ if (typeof window.Element === "undefined" ||
3
+ "classList" in document.documentElement) {
4
+ return;
5
+ }
6
+
7
+ var prototype = Array.prototype,
8
+ push = prototype.push,
9
+ splice = prototype.splice,
10
+ join = prototype.join;
11
+
12
+ function DOMTokenList(el) {
13
+ this.el = el;
14
+ // The className needs to be trimmed and split on whitespace
15
+ // to retrieve a list of classes.
16
+ var classes = el.className.replace(/^\s+|\s+$/g, '').split(/\s+/);
17
+ for (var i = 0; i < classes.length; i++) {
18
+ push.call(this, classes[i]);
19
+ }
20
+ }
21
+
22
+ DOMTokenList.prototype = {
23
+ add: function (token) {
24
+ if (this.contains(token)) return;
25
+ push.call(this, token);
26
+ this.el.className = this.toString();
27
+ },
28
+ contains: function (token) {
29
+ return this.el.className.indexOf(token) != -1;
30
+ },
31
+ item: function (index) {
32
+ return this[index] || null;
33
+ },
34
+ remove: function (token) {
35
+ if (!this.contains(token)) return;
36
+ for (var i = 0; i < this.length; i++) {
37
+ if (this[i] == token) break;
38
+ }
39
+ splice.call(this, i, 1);
40
+ this.el.className = this.toString();
41
+ },
42
+ toString: function () {
43
+ return join.call(this, ' ');
44
+ },
45
+ toggle: function (token) {
46
+ if (!this.contains(token)) {
47
+ this.add(token);
48
+ } else {
49
+ this.remove(token);
50
+ }
51
+
52
+ return this.contains(token);
53
+ }
54
+ };
55
+
56
+ window.DOMTokenList = DOMTokenList;
57
+
58
+ function defineElementGetter(obj, prop, getter) {
59
+ if (Object.defineProperty) {
60
+ Object.defineProperty(obj, prop, {
61
+ get: getter
62
+ });
63
+ } else {
64
+ obj.__defineGetter__(prop, getter);
65
+ }
66
+ }
67
+
68
+ defineElementGetter(HTMLElement.prototype, 'classList', function () {
69
+ return new DOMTokenList(this);
70
+ });
71
+ })();
@@ -0,0 +1,272 @@
1
+ function GameManager(size, InputManager, Actuator, StorageManager) {
2
+ this.size = size; // Size of the grid
3
+ this.inputManager = new InputManager;
4
+ this.storageManager = new StorageManager;
5
+ this.actuator = new Actuator;
6
+
7
+ this.startTiles = 2;
8
+
9
+ this.inputManager.on("move", this.move.bind(this));
10
+ this.inputManager.on("restart", this.restart.bind(this));
11
+ this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
12
+
13
+ this.setup();
14
+ }
15
+
16
+ // Restart the game
17
+ GameManager.prototype.restart = function () {
18
+ this.storageManager.clearGameState();
19
+ this.actuator.continueGame(); // Clear the game won/lost message
20
+ this.setup();
21
+ };
22
+
23
+ // Keep playing after winning (allows going over 2048)
24
+ GameManager.prototype.keepPlaying = function () {
25
+ this.keepPlaying = true;
26
+ this.actuator.continueGame(); // Clear the game won/lost message
27
+ };
28
+
29
+ // Return true if the game is lost, or has won and the user hasn't kept playing
30
+ GameManager.prototype.isGameTerminated = function () {
31
+ return this.over || (this.won && !this.keepPlaying);
32
+ };
33
+
34
+ // Set up the game
35
+ GameManager.prototype.setup = function () {
36
+ var previousState = this.storageManager.getGameState();
37
+
38
+ // Reload the game from a previous game if present
39
+ if (previousState) {
40
+ this.grid = new Grid(previousState.grid.size,
41
+ previousState.grid.cells); // Reload grid
42
+ this.score = previousState.score;
43
+ this.over = previousState.over;
44
+ this.won = previousState.won;
45
+ this.keepPlaying = previousState.keepPlaying;
46
+ } else {
47
+ this.grid = new Grid(this.size);
48
+ this.score = 0;
49
+ this.over = false;
50
+ this.won = false;
51
+ this.keepPlaying = false;
52
+
53
+ // Add the initial tiles
54
+ this.addStartTiles();
55
+ }
56
+
57
+ // Update the actuator
58
+ this.actuate();
59
+ };
60
+
61
+ // Set up the initial tiles to start the game with
62
+ GameManager.prototype.addStartTiles = function () {
63
+ for (var i = 0; i < this.startTiles; i++) {
64
+ this.addRandomTile();
65
+ }
66
+ };
67
+
68
+ // Adds a tile in a random position
69
+ GameManager.prototype.addRandomTile = function () {
70
+ if (this.grid.cellsAvailable()) {
71
+ var value = Math.random() < 0.9 ? 2 : 4;
72
+ var tile = new Tile(this.grid.randomAvailableCell(), value);
73
+
74
+ this.grid.insertTile(tile);
75
+ }
76
+ };
77
+
78
+ // Sends the updated grid to the actuator
79
+ GameManager.prototype.actuate = function () {
80
+ if (this.storageManager.getBestScore() < this.score) {
81
+ this.storageManager.setBestScore(this.score);
82
+ }
83
+
84
+ // Clear the state when the game is over (game over only, not win)
85
+ if (this.over) {
86
+ this.storageManager.clearGameState();
87
+ } else {
88
+ this.storageManager.setGameState(this.serialize());
89
+ }
90
+
91
+ this.actuator.actuate(this.grid, {
92
+ score: this.score,
93
+ over: this.over,
94
+ won: this.won,
95
+ bestScore: this.storageManager.getBestScore(),
96
+ terminated: this.isGameTerminated()
97
+ });
98
+
99
+ };
100
+
101
+ // Represent the current game as an object
102
+ GameManager.prototype.serialize = function () {
103
+ return {
104
+ grid: this.grid.serialize(),
105
+ score: this.score,
106
+ over: this.over,
107
+ won: this.won,
108
+ keepPlaying: this.keepPlaying
109
+ };
110
+ };
111
+
112
+ // Save all tile positions and remove merger info
113
+ GameManager.prototype.prepareTiles = function () {
114
+ this.grid.eachCell(function (x, y, tile) {
115
+ if (tile) {
116
+ tile.mergedFrom = null;
117
+ tile.savePosition();
118
+ }
119
+ });
120
+ };
121
+
122
+ // Move a tile and its representation
123
+ GameManager.prototype.moveTile = function (tile, cell) {
124
+ this.grid.cells[tile.x][tile.y] = null;
125
+ this.grid.cells[cell.x][cell.y] = tile;
126
+ tile.updatePosition(cell);
127
+ };
128
+
129
+ // Move tiles on the grid in the specified direction
130
+ GameManager.prototype.move = function (direction) {
131
+ // 0: up, 1: right, 2: down, 3: left
132
+ var self = this;
133
+
134
+ if (this.isGameTerminated()) return; // Don't do anything if the game's over
135
+
136
+ var cell, tile;
137
+
138
+ var vector = this.getVector(direction);
139
+ var traversals = this.buildTraversals(vector);
140
+ var moved = false;
141
+
142
+ // Save the current tile positions and remove merger information
143
+ this.prepareTiles();
144
+
145
+ // Traverse the grid in the right direction and move tiles
146
+ traversals.x.forEach(function (x) {
147
+ traversals.y.forEach(function (y) {
148
+ cell = { x: x, y: y };
149
+ tile = self.grid.cellContent(cell);
150
+
151
+ if (tile) {
152
+ var positions = self.findFarthestPosition(cell, vector);
153
+ var next = self.grid.cellContent(positions.next);
154
+
155
+ // Only one merger per row traversal?
156
+ if (next && next.value === tile.value && !next.mergedFrom) {
157
+ var merged = new Tile(positions.next, tile.value * 2);
158
+ merged.mergedFrom = [tile, next];
159
+
160
+ self.grid.insertTile(merged);
161
+ self.grid.removeTile(tile);
162
+
163
+ // Converge the two tiles' positions
164
+ tile.updatePosition(positions.next);
165
+
166
+ // Update the score
167
+ self.score += merged.value;
168
+
169
+ // The mighty 2048 tile
170
+ if (merged.value === 2048) self.won = true;
171
+ } else {
172
+ self.moveTile(tile, positions.farthest);
173
+ }
174
+
175
+ if (!self.positionsEqual(cell, tile)) {
176
+ moved = true; // The tile moved from its original cell!
177
+ }
178
+ }
179
+ });
180
+ });
181
+
182
+ if (moved) {
183
+ this.addRandomTile();
184
+
185
+ if (!this.movesAvailable()) {
186
+ this.over = true; // Game over!
187
+ }
188
+
189
+ this.actuate();
190
+ }
191
+ };
192
+
193
+ // Get the vector representing the chosen direction
194
+ GameManager.prototype.getVector = function (direction) {
195
+ // Vectors representing tile movement
196
+ var map = {
197
+ 0: { x: 0, y: -1 }, // Up
198
+ 1: { x: 1, y: 0 }, // Right
199
+ 2: { x: 0, y: 1 }, // Down
200
+ 3: { x: -1, y: 0 } // Left
201
+ };
202
+
203
+ return map[direction];
204
+ };
205
+
206
+ // Build a list of positions to traverse in the right order
207
+ GameManager.prototype.buildTraversals = function (vector) {
208
+ var traversals = { x: [], y: [] };
209
+
210
+ for (var pos = 0; pos < this.size; pos++) {
211
+ traversals.x.push(pos);
212
+ traversals.y.push(pos);
213
+ }
214
+
215
+ // Always traverse from the farthest cell in the chosen direction
216
+ if (vector.x === 1) traversals.x = traversals.x.reverse();
217
+ if (vector.y === 1) traversals.y = traversals.y.reverse();
218
+
219
+ return traversals;
220
+ };
221
+
222
+ GameManager.prototype.findFarthestPosition = function (cell, vector) {
223
+ var previous;
224
+
225
+ // Progress towards the vector direction until an obstacle is found
226
+ do {
227
+ previous = cell;
228
+ cell = { x: previous.x + vector.x, y: previous.y + vector.y };
229
+ } while (this.grid.withinBounds(cell) &&
230
+ this.grid.cellAvailable(cell));
231
+
232
+ return {
233
+ farthest: previous,
234
+ next: cell // Used to check if a merge is required
235
+ };
236
+ };
237
+
238
+ GameManager.prototype.movesAvailable = function () {
239
+ return this.grid.cellsAvailable() || this.tileMatchesAvailable();
240
+ };
241
+
242
+ // Check for available matches between tiles (more expensive check)
243
+ GameManager.prototype.tileMatchesAvailable = function () {
244
+ var self = this;
245
+
246
+ var tile;
247
+
248
+ for (var x = 0; x < this.size; x++) {
249
+ for (var y = 0; y < this.size; y++) {
250
+ tile = this.grid.cellContent({ x: x, y: y });
251
+
252
+ if (tile) {
253
+ for (var direction = 0; direction < 4; direction++) {
254
+ var vector = self.getVector(direction);
255
+ var cell = { x: x + vector.x, y: y + vector.y };
256
+
257
+ var other = self.grid.cellContent(cell);
258
+
259
+ if (other && other.value === tile.value) {
260
+ return true; // These two tiles can be merged
261
+ }
262
+ }
263
+ }
264
+ }
265
+ }
266
+
267
+ return false;
268
+ };
269
+
270
+ GameManager.prototype.positionsEqual = function (first, second) {
271
+ return first.x === second.x && first.y === second.y;
272
+ };
package/js/grid.js ADDED
@@ -0,0 +1,117 @@
1
+ function Grid(size, previousState) {
2
+ this.size = size;
3
+ this.cells = previousState ? this.fromState(previousState) : this.empty();
4
+ }
5
+
6
+ // Build a grid of the specified size
7
+ Grid.prototype.empty = function () {
8
+ var cells = [];
9
+
10
+ for (var x = 0; x < this.size; x++) {
11
+ var row = cells[x] = [];
12
+
13
+ for (var y = 0; y < this.size; y++) {
14
+ row.push(null);
15
+ }
16
+ }
17
+
18
+ return cells;
19
+ };
20
+
21
+ Grid.prototype.fromState = function (state) {
22
+ var cells = [];
23
+
24
+ for (var x = 0; x < this.size; x++) {
25
+ var row = cells[x] = [];
26
+
27
+ for (var y = 0; y < this.size; y++) {
28
+ var tile = state[x][y];
29
+ row.push(tile ? new Tile(tile.position, tile.value) : null);
30
+ }
31
+ }
32
+
33
+ return cells;
34
+ };
35
+
36
+ // Find the first available random position
37
+ Grid.prototype.randomAvailableCell = function () {
38
+ var cells = this.availableCells();
39
+
40
+ if (cells.length) {
41
+ return cells[Math.floor(Math.random() * cells.length)];
42
+ }
43
+ };
44
+
45
+ Grid.prototype.availableCells = function () {
46
+ var cells = [];
47
+
48
+ this.eachCell(function (x, y, tile) {
49
+ if (!tile) {
50
+ cells.push({ x: x, y: y });
51
+ }
52
+ });
53
+
54
+ return cells;
55
+ };
56
+
57
+ // Call callback for every cell
58
+ Grid.prototype.eachCell = function (callback) {
59
+ for (var x = 0; x < this.size; x++) {
60
+ for (var y = 0; y < this.size; y++) {
61
+ callback(x, y, this.cells[x][y]);
62
+ }
63
+ }
64
+ };
65
+
66
+ // Check if there are any cells available
67
+ Grid.prototype.cellsAvailable = function () {
68
+ return !!this.availableCells().length;
69
+ };
70
+
71
+ // Check if the specified cell is taken
72
+ Grid.prototype.cellAvailable = function (cell) {
73
+ return !this.cellOccupied(cell);
74
+ };
75
+
76
+ Grid.prototype.cellOccupied = function (cell) {
77
+ return !!this.cellContent(cell);
78
+ };
79
+
80
+ Grid.prototype.cellContent = function (cell) {
81
+ if (this.withinBounds(cell)) {
82
+ return this.cells[cell.x][cell.y];
83
+ } else {
84
+ return null;
85
+ }
86
+ };
87
+
88
+ // Inserts a tile at its position
89
+ Grid.prototype.insertTile = function (tile) {
90
+ this.cells[tile.x][tile.y] = tile;
91
+ };
92
+
93
+ Grid.prototype.removeTile = function (tile) {
94
+ this.cells[tile.x][tile.y] = null;
95
+ };
96
+
97
+ Grid.prototype.withinBounds = function (position) {
98
+ return position.x >= 0 && position.x < this.size &&
99
+ position.y >= 0 && position.y < this.size;
100
+ };
101
+
102
+ Grid.prototype.serialize = function () {
103
+ var cellState = [];
104
+
105
+ for (var x = 0; x < this.size; x++) {
106
+ var row = cellState[x] = [];
107
+
108
+ for (var y = 0; y < this.size; y++) {
109
+ row.push(this.cells[x][y] ? this.cells[x][y].serialize() : null);
110
+ }
111
+ }
112
+
113
+ return {
114
+ size: this.size,
115
+ cells: cellState
116
+ };
117
+ };