User prompt
Don't add grid container x,y to position
User prompt
Fix Bug: 'ReferenceError: Can't find variable: squareSize' in this line: 'self.x = x * squareSize;' Line Number: 15
User prompt
Fix Bug: 'ReferenceError: Can't find variable: squareSize' in this line: 'self.x = x * squareSize;' Line Number: 15
User prompt
remove squareSize from game
User prompt
Remove squareSize from game class
User prompt
Fix Bug: 'ReferenceError: Can't find variable: gridSize' in this line: 'var squares = new Array(gridSize).fill().map(() => new Array(gridSize).fill(null));' Line Number: 26
User prompt
Fix Bug: 'ReferenceError: Can't find variable: gridSize' in this line: 'var squares = new Array(gridSize).fill().map(() => new Array(gridSize).fill(null));' Line Number: 26
User prompt
Instead of setting the position of tiles right away, set a targetX and targetY variable, then use tick to animate the tile to it's position
User prompt
Don't have a tick method inside tile, instead have a move method that is called from a tick handler in the game class
User prompt
In moveTiles perform the check recursively until no changes where made
User prompt
In the tile move class, return true or false based on if the tile has reached it's final destination
User prompt
The move method seems to take a long time to return true. Set a threshold value for when the tile is at it's true location
User prompt
Only allow me to Initiate swipe is tiles are not currently moving
User prompt
Update movement of tiles to accelerate in the direction of the target position
User prompt
In move tile, add the merge logic of tiles from 2048
User prompt
Add a set value method to Tile
User prompt
in moveTile add the logic from 2048 that merges tiles
User prompt
Fix Bug: 'TypeError: null is not an object (evaluating 'squares[i][j].value')' in this line: 'moved = true;' Line Number: 90
User prompt
Fix Bug: 'TypeError: null is not an object (evaluating 'squares[i][j].value')' in this line: 'moved = true;' Line Number: 90
User prompt
Add a set value method to tile
User prompt
When moving tiles, if the tile occupying the position of the tile has the same value as the current tile. Merge them together like 2048
User prompt
Fix Bug: 'TypeError: null is not an object (evaluating 'squares[i][j].value')' in this line: 'moved = true;' Line Number: 97
User prompt
After animations are done from the last swipe, insert a new 2 tile at random empty position
User prompt
Tiles should only be able to merge once per move
User prompt
When inserting a new tile, move it to it's target position right away
var Tile = Container.expand(function (value) {
var self = Container.call(this);
self.value = value || 2;
var tileGraphics = self.createAsset('tile', 'Tile Graphics', 0, 0);
var tileLabel = new Text2(self.value.toString(), {
size: 300,
fill: '#ffffff',
font: 'bold'
});
tileLabel.anchor.set(0.5, 0.5);
tileLabel.x = tileGraphics.width / 2;
tileLabel.y = tileGraphics.height / 2;
tileGraphics.addChild(tileLabel);
self.setPosition = function (x, y) {
self.x = x * squareSize;
self.y = y * squareSize;
};
});
var Game = Container.expand(function () {
var self = Container.call(this);
LK.stageContainer.setBackgroundColor(0xD3D3D3);
var gridContainer = new Container();
gridContainer.x = 44;
gridContainer.y = 200;
self.addChild(gridContainer);
var gridSize = 4;
var squares = new Array(gridSize).fill().map(() => new Array(gridSize).fill(null));
var squareSize = 500;
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
squares[i][j] = null;
}
}
var initialTiles = 2;
for (var i = 0; i < initialTiles; i++) {
var x, y;
do {
x = Math.floor(Math.random() * gridSize);
y = Math.floor(Math.random() * gridSize);
} while (squares[x][y] !== null);
var square = new Tile();
square.setPosition(x, y);
squares[x][y] = square;
gridContainer.addChild(square);
}
var swipeStart = {
x: 0,
y: 0
};
var swipeEnd = {
x: 0,
y: 0
};
self.moveTiles = function (direction) {
var dx = (direction === 'right') - (direction === 'left');
var dy = (direction === 'down') - (direction === 'up');
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
var x = i + dx;
var y = j + dy;
if (x >= 0 && x < gridSize && y >= 0 && y < gridSize && squares[i][j] !== null && squares[x][y] === null) {
squares[x][y] = squares[i][j];
squares[i][j] = null;
squares[x][y].setPosition(x, y);
}
}
}
};
stage.on('down', function (obj) {
var pos = obj.event.getLocalPosition(self);
swipeStart = {
x: pos.x,
y: pos.y
};
});
stage.on('up', function (obj) {
var pos = obj.event.getLocalPosition(self);
swipeEnd = {
x: pos.x,
y: pos.y
};
var dx = swipeEnd.x - swipeStart.x;
var dy = swipeEnd.y - swipeStart.y;
var threshold = 50;
if (Math.abs(dx) > threshold || Math.abs(dy) > threshold) {
if (Math.abs(dx) > Math.abs(dy)) {
if (dx > 0) {
self.moveTiles('right');
} else {
self.moveTiles('left');
}
} else {
if (dy > 0) {
self.moveTiles('down');
} else {
self.moveTiles('up');
}
}
}
});
});