User prompt
Remove the strike and add a black drop shadow instead, also remove the , from the win tet
User prompt
Update the speed of move of tiles such that it takes a fixed amount of time to reach the target position
User prompt
when calling setPosition calculate speedX and speedY such that it takes a fixed amount of frames to reach the target position
User prompt
Make animation complete in 15 frames
User prompt
Don't add speedx and y before we have tested if the tile has reached it's target
User prompt
set win condition to 2048
User prompt
Create a rainbow of colors with 15 colors, and use them to tint the tile background based on the value of the tile
User prompt
Create a set tint method on tile
User prompt
Create a method that sets the tint of tileGraphics
User prompt
tint should also update when updateToRealValue is called, create a method that sets the tint color based on value rather than having this code twice
User prompt
when setting tint, remember that value is an exponential, normalize this to an index
User prompt
Update the color rainbow to be bright pastel colors
Code edit (2 edits merged)
Please save this source code
User prompt
also update tint when calling updateToRealValue, use a single method to set tint to prevent having this code twice
User prompt
call self.setTint rather than setting tint directly in updateToRealValue
User prompt
in set tint factor in that value is an exponential
User prompt
Make the tile colors a bright pastel rainbow with 32 colors in total
User prompt
Set tile text color to #332d28
User prompt
Don't add label to tileGraphics, add it directly to Tile
User prompt
Move up tile label by 30px
User prompt
Make new tiles have a random value of 2 or 4
User prompt
When a tole gets a new value it should become bigger then animate back to it's normal size
User prompt
Set anchor point of tileGraphics to .5,.5
User prompt
set anchor point of tileLabel to .5,.5
User prompt
when setting position of tile, add 250 to both x and y
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.setValue = function (value) {
self.newValue = value;
};
self.updateToRealValue = function () {
if (self.newValue) {
self.value = self.newValue;
tileLabel.setText(self.value.toString());
var textScale = Math.min(1, 400 / (tileLabel.width / tileLabel.scale.x));
tileLabel.scale.set(textScale);
self.newValue = null;
}
};
self.targetX = 0;
self.targetY = 0;
self.isMoving = false;
self.merged = false;
self.setPosition = function (x, y, instant) {
self.targetX = x * 500;
self.targetY = y * 500;
if (instant) {
self.x = self.targetX;
self.y = self.targetY;
}
};
self.move = function () {
var dx = self.targetX - self.x;
var dy = self.targetY - self.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance > 100) {
self.isMoving = true;
self.x += dx / distance * 100;
self.y += dy / distance * 100;
return false;
}
self.isMoving = false;
self.x = self.targetX;
self.y = self.targetY;
return true;
};
});
var Game = Container.expand(function () {
var self = Container.call(this);
var toBeRemoved = [];
self.addRandomTile = function () {
var emptyPositions = [];
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
if (squares[i][j] === null) {
emptyPositions.push({
x: i,
y: j
});
}
}
}
if (emptyPositions.length > 0) {
var randomPosition = emptyPositions[Math.floor(Math.random() * emptyPositions.length)];
var square = new Tile();
square.setPosition(randomPosition.x, randomPosition.y, true);
squares[randomPosition.x][randomPosition.y] = square;
gridContainer.addChild(square);
}
};
self.mergeTiles = function (x1, y1, x2, y2) {
if (squares[x1][y1] !== null && squares[x2][y2] !== null && squares[x1][y1].value === squares[x2][y2].value && !squares[x1][y1].merged && !squares[x2][y2].merged) {
squares[x2][y2].setValue(squares[x2][y2].value * 2, true);
squares[x2][y2].merged = true;
squares[x1][y1].targetX = squares[x2][y2].targetX;
squares[x1][y1].targetY = squares[x2][y2].targetY;
toBeRemoved.push(squares[x1][y1]);
squares[x1][y1] = null;
gridContainer.removeChild(squares[x2][y2]);
gridContainer.addChild(squares[x2][y2]);
return true;
}
return false;
};
var gridSize = 4;
LK.stageContainer.setBackgroundColor(0xD3D3D3);
var gridContainer = new Container();
gridContainer.x = 44;
gridContainer.y = 200;
self.addChild(gridContainer);
var squares = new Array(gridSize).fill().map(() => new Array(gridSize).fill(null));
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, true);
squares[x][y] = square;
gridContainer.addChild(square);
}
var swipeStart = {
x: 0,
y: 0
};
var swipeEnd = {
x: 0,
y: 0
};
var boardChanged = false;
var winMessageShown = false;
self.moveTiles = function (direction) {
var dx = (direction === 'right') - (direction === 'left');
var dy = (direction === 'down') - (direction === 'up');
var moved = false;
do {
moved = false;
var iStart = dx > 0 ? gridSize - 1 : 0;
var iEnd = dx > 0 ? -1 : gridSize;
var iStep = dx > 0 ? -1 : 1;
var jStart = dy > 0 ? gridSize - 1 : 0;
var jEnd = dy > 0 ? -1 : gridSize;
var jStep = dy > 0 ? -1 : 1;
for (var i = iStart; i !== iEnd; i += iStep) {
for (var j = jStart; j !== jEnd; j += jStep) {
var x = i + dx;
var y = j + dy;
if (x >= 0 && x < gridSize && y >= 0 && y < gridSize && squares[i][j] !== null) {
if (squares[x][y] === null) {
squares[x][y] = squares[i][j];
squares[i][j] = null;
squares[x][y].setPosition(x, y);
moved = true;
boardChanged = true;
} else if (squares[x][y] !== null && squares[i][j] !== null && squares[x][y].value === squares[i][j].value) {
moved = self.mergeTiles(i, j, x, y);
if (moved) boardChanged = true;
}
}
}
}
} while (moved);
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
if (squares[i][j] !== null) {
squares[i][j].merged = false;
}
}
}
};
stage.on('down', function (obj) {
var anyTileMoving = squares.some(row => row.some(tile => tile && tile.isMoving));
if (!anyTileMoving) {
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');
}
}
}
});
LK.on('tick', function () {
var allTilesStopped = true;
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
if (squares[i][j] !== null) {
if (!squares[i][j].move()) {
allTilesStopped = false;
}
}
}
}
for (var i = 0; i < toBeRemoved.length; i++) {
if (!toBeRemoved[i].move()) {
allTilesStopped = false;
} else {
toBeRemoved[i].destroy();
toBeRemoved.splice(i, 1);
i--;
}
}
if (allTilesStopped) {
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize; j++) {
if (squares[i][j] !== null && squares[i][j].newValue) {
squares[i][j].updateToRealValue();
if (squares[i][j].value === 8 && !winMessageShown) {
var winMessage = new Text2('Congratulations\n you win!', {
size: 100,
fill: '#ffffff',
font: 'bold',
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 6,
align: 'center'
});
winMessage.anchor.set(0.5, 0.5);
LK.gui.center.addChild(winMessage);
winMessageShown = true;
LK.setTimeout(function () {
LK.gui.center.removeChild(winMessage);
}, 5000);
}
}
}
}
if (boardChanged) {
self.addRandomTile();
boardChanged = false;
}
}
});
});