User prompt
when setting position of tile, add 250 to both x and y
User prompt
move up tile text by 50px
User prompt
move up tile text by 40px
User prompt
in updateToRealValue going back to normal scale should animate rather than just bounce back
User prompt
Fade in new tiles
User prompt
Fade in new tiles, fade the entire tile
User prompt
tiles should only fade in when created, not when set value is called
User prompt
Make tiles fade in 2x as fast
User prompt
in the fade in method also fade in scale from zero to one
User prompt
Make fade in 3x as fast
User prompt
In fade in, add an else statement that sets alpha and scale to 1
User prompt
in fadein make sure alpha and scale can never be larger than 1
User prompt
On the background grid, add background graphic indicators to the tile position
User prompt
set grid indicator alpha to .2
User prompt
set grid indicator alpha to .1
User prompt
Move down grid container by 120px
User prompt
Move down grid container by 220px
User prompt
Make tile movement 50% faster
User prompt
the distance check in move should test on 150
User prompt
make tiles fade in twice as fast
User prompt
update the textScale to set max width of text to 350
User prompt
Add a HSV color generator and use that to calculate the color rainbow instead
Code edit (1 edits merged)
Please save this source code
User prompt
set saturation to .5 in the hsv calculator
Code edit (1 edits merged)
Please save this source code
var Tile = Container.expand(function (value) {
var self = Container.call(this);
self.value = value || 2;
var tileGraphics = self.createAsset('tile', 'Tile Graphics', .5, .5);
var colors = [0xFFB3B3, 0xFFCCE5, 0xCC99FF, 0xCCD6FF, 0xFFFFCC, 0xFFCC99, 0xFF9999, 0xFFCCFF, 0xCCFFFF, 0xCCFFCC, 0xFFFF99, 0xFFCCCC, 0xFF99FF, 0x99FFFF, 0x99FF99, 0xFFFF66, 0xFFB3B3, 0xFF99CC, 0x99CCFF, 0x99FFCC, 0xFFFF33, 0xFF9999, 0xFF66B3, 0x6699FF, 0x66FF99, 0xFFFF00, 0xFF8080, 0xFF3399, 0x3366FF, 0x33FF66, 0xFFCC00, 0xFF6666];
self.setTint = function () {
var index = Math.log2(self.value) % colors.length;
tileGraphics.tint = colors[index];
};
self.setTint();
var tileLabel = new Text2(self.value.toString(), {
size: 300,
fill: '#332d28',
font: 'bold'
});
tileLabel.anchor.set(0.5, 0.5);
tileLabel.x = 0;
tileLabel.y = 0;
self.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.setTint();
self.newValue = null;
self.scale.set(1.2);
LK.setTimeout(function () {
self.scale.set(1);
}, 100);
}
};
self.targetX = 0;
self.targetY = 0;
self.isMoving = false;
self.merged = false;
self.setPosition = function (x, y, instant) {
self.targetX = x * 500 + 250;
self.targetY = y * 500 + 250;
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(Math.random() < 0.5 ? 2 : 4);
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 === 2048 && !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;
}
}
});
});