User prompt
Please fix the bug: 'Uncaught TypeError: Cannot set properties of undefined (setting 'fill')' in or related to this line: 'currentPlayerText.style.fill = currentPlayer === 'X' ? '#ff6b9d' : '#64b5f6';' Line Number: 360
Code edit (1 edits merged)
Please save this source code
User prompt
Cosmic Connection
Initial prompt
Make me a unique, futuristic, X-O game on a date
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var GridCell = Container.expand(function (row, col) {
var self = Container.call(this);
self.row = row;
self.col = col;
self.occupied = false;
self.piece = null;
// Create invisible clickable area
var cellArea = LK.getAsset('gridBackground', {
width: 180,
height: 180,
alpha: 0.01,
anchorX: 0.5,
anchorY: 0.5
});
self.addChild(cellArea);
self.down = function (x, y, obj) {
if (!self.occupied && !gameWon) {
self.placePiece();
}
};
self.placePiece = function () {
if (self.occupied) return;
self.occupied = true;
if (currentPlayer === 'X') {
self.piece = self.addChild(LK.getAsset('xPiece', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 0.1,
scaleY: 0.1,
alpha: 0,
rotation: Math.PI / 4
}));
} else {
self.piece = self.addChild(LK.getAsset('oPiece', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 0.1,
scaleY: 0.1,
alpha: 0
}));
}
// Animate piece appearance
tween(self.piece, {
scaleX: 1,
scaleY: 1,
alpha: 1
}, {
duration: 300,
easing: tween.easeOut
});
// Add glow effect
LK.effects.flashObject(self.piece, 0x00ffff, 500);
// Play sound
LK.getSound('placeMove').play();
// Create particles
createParticles(self.x, self.y);
// Update game board
gameBoard[self.row][self.col] = currentPlayer;
// Check for win
if (checkWin()) {
handleWin();
} else if (checkDraw()) {
handleDraw();
} else {
// Switch players
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
updateCurrentPlayerDisplay();
}
};
return self;
});
var Particle = Container.expand(function (x, y) {
var self = Container.call(this);
var particle = self.attachAsset('particle', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 1
});
self.x = x;
self.y = y;
// Random velocity
self.vx = (Math.random() - 0.5) * 4;
self.vy = (Math.random() - 0.5) * 4;
self.life = 60;
self.update = function () {
self.x += self.vx;
self.y += self.vy;
self.life--;
particle.alpha = self.life / 60;
if (self.life <= 0) {
self.destroy();
var index = particles.indexOf(self);
if (index > -1) {
particles.splice(index, 1);
}
}
};
return self;
});
var Star = Container.expand(function () {
var self = Container.call(this);
var star = self.attachAsset('star', {
anchorX: 0.5,
anchorY: 0.5
});
self.x = Math.random() * 2048;
self.y = Math.random() * 2732;
self.baseAlpha = Math.random() * 0.8 + 0.2;
star.alpha = self.baseAlpha;
self.update = function () {
// Twinkling effect
star.alpha = self.baseAlpha + Math.sin(LK.ticks * 0.05 + self.x) * 0.3;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x0a0a1a
});
/****
* Game Code
****/
// Game state variables
var currentPlayer = 'X';
var gameBoard = [['', '', ''], ['', '', ''], ['', '', '']];
var gameWon = false;
var xScore = 0;
var oScore = 0;
var gridCells = [];
var particles = [];
var stars = [];
// Create starfield background
for (var i = 0; i < 100; i++) {
var star = new Star();
stars.push(star);
game.addChild(star);
}
// Create grid background
var gridBg = game.addChild(LK.getAsset('gridBackground', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
alpha: 0.3
}));
// Create grid lines
var vertLine1 = game.addChild(LK.getAsset('gridLine', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 - 100,
y: 2732 / 2
}));
var vertLine2 = game.addChild(LK.getAsset('gridLine', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 + 100,
y: 2732 / 2
}));
var horizLine1 = game.addChild(LK.getAsset('gridLine', {
width: 600,
height: 8,
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2 - 100
}));
var horizLine2 = game.addChild(LK.getAsset('gridLine', {
width: 600,
height: 8,
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2 + 100
}));
// Create grid cells
for (var row = 0; row < 3; row++) {
gridCells[row] = [];
for (var col = 0; col < 3; col++) {
var cell = new GridCell(row, col);
cell.x = 2048 / 2 + (col - 1) * 200;
cell.y = 2732 / 2 + (row - 1) * 200;
gridCells[row][col] = cell;
game.addChild(cell);
}
}
// Create UI elements
var titleText = new Text2('Cosmic Connection', {
size: 80,
fill: '#00ffff'
});
titleText.anchor.set(0.5, 0);
titleText.x = 0;
titleText.y = 50;
LK.gui.top.addChild(titleText);
var currentPlayerText = new Text2("Player X's Turn", {
size: 50,
fill: '#ff6b9d'
});
currentPlayerText.anchor.set(0.5, 0);
currentPlayerText.x = 0;
currentPlayerText.y = 150;
LK.gui.top.addChild(currentPlayerText);
var scoreText = new Text2('X: 0 | O: 0', {
size: 40,
fill: '#ffffff'
});
scoreText.anchor.set(0.5, 1);
scoreText.x = 0;
scoreText.y = -50;
LK.gui.bottom.addChild(scoreText);
var resetText = new Text2('Tap anywhere to play again', {
size: 30,
fill: '#888888',
alpha: 0
});
resetText.anchor.set(0.5, 1);
resetText.x = 0;
resetText.y = -100;
LK.gui.bottom.addChild(resetText);
// Functions
function createParticles(x, y) {
for (var i = 0; i < 8; i++) {
var particle = new Particle(x, y);
particles.push(particle);
game.addChild(particle);
}
}
function checkWin() {
// Check rows
for (var i = 0; i < 3; i++) {
if (gameBoard[i][0] !== '' && gameBoard[i][0] === gameBoard[i][1] && gameBoard[i][1] === gameBoard[i][2]) {
return true;
}
}
// Check columns
for (var i = 0; i < 3; i++) {
if (gameBoard[0][i] !== '' && gameBoard[0][i] === gameBoard[1][i] && gameBoard[1][i] === gameBoard[2][i]) {
return true;
}
}
// Check diagonals
if (gameBoard[0][0] !== '' && gameBoard[0][0] === gameBoard[1][1] && gameBoard[1][1] === gameBoard[2][2]) {
return true;
}
if (gameBoard[0][2] !== '' && gameBoard[0][2] === gameBoard[1][1] && gameBoard[1][1] === gameBoard[2][0]) {
return true;
}
return false;
}
function checkDraw() {
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
if (gameBoard[i][j] === '') {
return false;
}
}
}
return true;
}
function handleWin() {
gameWon = true;
// Update score
if (currentPlayer === 'X') {
xScore++;
} else {
oScore++;
}
updateScoreDisplay();
// Show winner
currentPlayerText.setText('Player ' + currentPlayer + ' Wins!');
currentPlayerText.fill = currentPlayer === 'X' ? '#ff6b9d' : '#64b5f6';
// Play celebration sound
LK.getSound('winCelebration').play();
// Create celebration effect
LK.effects.flashScreen(0x00ffff, 1000);
// Create heart particles
createCelebrationHearts();
// Show reset message
tween(resetText, {
alpha: 1
}, {
duration: 1000
});
// Auto reset after 3 seconds
LK.setTimeout(function () {
resetGame();
}, 3000);
}
function handleDraw() {
gameWon = true;
currentPlayerText.setText("It's a Draw!");
currentPlayerText.fill = '#ffff00';
tween(resetText, {
alpha: 1
}, {
duration: 1000
});
LK.setTimeout(function () {
resetGame();
}, 3000);
}
function createCelebrationHearts() {
for (var i = 0; i < 20; i++) {
var heart = game.addChild(LK.getAsset('heart', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 + (Math.random() - 0.5) * 400,
y: 2732 / 2 + 300,
alpha: 1
}));
var targetY = 2732 / 2 - 400 + Math.random() * 200;
var targetX = heart.x + (Math.random() - 0.5) * 200;
tween(heart, {
x: targetX,
y: targetY,
alpha: 0,
scaleX: 2,
scaleY: 2
}, {
duration: 2000,
easing: tween.easeOut,
onFinish: function onFinish() {
if (heart && heart.parent) {
heart.destroy();
}
}
});
}
}
function updateCurrentPlayerDisplay() {
currentPlayerText.setText("Player " + currentPlayer + "'s Turn");
currentPlayerText.fill = currentPlayer === 'X' ? '#ff6b9d' : '#64b5f6';
}
function updateScoreDisplay() {
scoreText.setText('X: ' + xScore + ' | O: ' + oScore);
}
function resetGame() {
// Reset game state
gameWon = false;
currentPlayer = 'X';
gameBoard = [['', '', ''], ['', '', ''], ['', '', '']];
// Reset grid cells
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
var cell = gridCells[row][col];
if (cell.piece) {
cell.piece.destroy();
cell.piece = null;
}
cell.occupied = false;
}
}
// Reset UI
updateCurrentPlayerDisplay();
tween(resetText, {
alpha: 0
}, {
duration: 500
});
}
game.down = function (x, y, obj) {
if (gameWon && resetText.alpha > 0.5) {
resetGame();
}
};
game.update = function () {
// Update particles
for (var i = particles.length - 1; i >= 0; i--) {
particles[i].update();
}
// Update stars
for (var i = 0; i < stars.length; i++) {
stars[i].update();
}
// Animate grid lines with subtle glow
var glowIntensity = 0.8 + Math.sin(LK.ticks * 0.02) * 0.2;
vertLine1.alpha = glowIntensity;
vertLine2.alpha = glowIntensity;
horizLine1.alpha = glowIntensity;
horizLine2.alpha = glowIntensity;
};
// Start ambient music
LK.playMusic('ambientSpace'); /****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var GridCell = Container.expand(function (row, col) {
var self = Container.call(this);
self.row = row;
self.col = col;
self.occupied = false;
self.piece = null;
// Create invisible clickable area
var cellArea = LK.getAsset('gridBackground', {
width: 180,
height: 180,
alpha: 0.01,
anchorX: 0.5,
anchorY: 0.5
});
self.addChild(cellArea);
self.down = function (x, y, obj) {
if (!self.occupied && !gameWon) {
self.placePiece();
}
};
self.placePiece = function () {
if (self.occupied) return;
self.occupied = true;
if (currentPlayer === 'X') {
self.piece = self.addChild(LK.getAsset('xPiece', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 0.1,
scaleY: 0.1,
alpha: 0,
rotation: Math.PI / 4
}));
} else {
self.piece = self.addChild(LK.getAsset('oPiece', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 0.1,
scaleY: 0.1,
alpha: 0
}));
}
// Animate piece appearance
tween(self.piece, {
scaleX: 1,
scaleY: 1,
alpha: 1
}, {
duration: 300,
easing: tween.easeOut
});
// Add glow effect
LK.effects.flashObject(self.piece, 0x00ffff, 500);
// Play sound
LK.getSound('placeMove').play();
// Create particles
createParticles(self.x, self.y);
// Update game board
gameBoard[self.row][self.col] = currentPlayer;
// Check for win
if (checkWin()) {
handleWin();
} else if (checkDraw()) {
handleDraw();
} else {
// Switch players
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
updateCurrentPlayerDisplay();
}
};
return self;
});
var Particle = Container.expand(function (x, y) {
var self = Container.call(this);
var particle = self.attachAsset('particle', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 1
});
self.x = x;
self.y = y;
// Random velocity
self.vx = (Math.random() - 0.5) * 4;
self.vy = (Math.random() - 0.5) * 4;
self.life = 60;
self.update = function () {
self.x += self.vx;
self.y += self.vy;
self.life--;
particle.alpha = self.life / 60;
if (self.life <= 0) {
self.destroy();
var index = particles.indexOf(self);
if (index > -1) {
particles.splice(index, 1);
}
}
};
return self;
});
var Star = Container.expand(function () {
var self = Container.call(this);
var star = self.attachAsset('star', {
anchorX: 0.5,
anchorY: 0.5
});
self.x = Math.random() * 2048;
self.y = Math.random() * 2732;
self.baseAlpha = Math.random() * 0.8 + 0.2;
star.alpha = self.baseAlpha;
self.update = function () {
// Twinkling effect
star.alpha = self.baseAlpha + Math.sin(LK.ticks * 0.05 + self.x) * 0.3;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x0a0a1a
});
/****
* Game Code
****/
// Game state variables
var currentPlayer = 'X';
var gameBoard = [['', '', ''], ['', '', ''], ['', '', '']];
var gameWon = false;
var xScore = 0;
var oScore = 0;
var gridCells = [];
var particles = [];
var stars = [];
// Create starfield background
for (var i = 0; i < 100; i++) {
var star = new Star();
stars.push(star);
game.addChild(star);
}
// Create grid background
var gridBg = game.addChild(LK.getAsset('gridBackground', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
alpha: 0.3
}));
// Create grid lines
var vertLine1 = game.addChild(LK.getAsset('gridLine', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 - 100,
y: 2732 / 2
}));
var vertLine2 = game.addChild(LK.getAsset('gridLine', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 + 100,
y: 2732 / 2
}));
var horizLine1 = game.addChild(LK.getAsset('gridLine', {
width: 600,
height: 8,
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2 - 100
}));
var horizLine2 = game.addChild(LK.getAsset('gridLine', {
width: 600,
height: 8,
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2 + 100
}));
// Create grid cells
for (var row = 0; row < 3; row++) {
gridCells[row] = [];
for (var col = 0; col < 3; col++) {
var cell = new GridCell(row, col);
cell.x = 2048 / 2 + (col - 1) * 200;
cell.y = 2732 / 2 + (row - 1) * 200;
gridCells[row][col] = cell;
game.addChild(cell);
}
}
// Create UI elements
var titleText = new Text2('Cosmic Connection', {
size: 80,
fill: '#00ffff'
});
titleText.anchor.set(0.5, 0);
titleText.x = 0;
titleText.y = 50;
LK.gui.top.addChild(titleText);
var currentPlayerText = new Text2("Player X's Turn", {
size: 50,
fill: '#ff6b9d'
});
currentPlayerText.anchor.set(0.5, 0);
currentPlayerText.x = 0;
currentPlayerText.y = 150;
LK.gui.top.addChild(currentPlayerText);
var scoreText = new Text2('X: 0 | O: 0', {
size: 40,
fill: '#ffffff'
});
scoreText.anchor.set(0.5, 1);
scoreText.x = 0;
scoreText.y = -50;
LK.gui.bottom.addChild(scoreText);
var resetText = new Text2('Tap anywhere to play again', {
size: 30,
fill: '#888888',
alpha: 0
});
resetText.anchor.set(0.5, 1);
resetText.x = 0;
resetText.y = -100;
LK.gui.bottom.addChild(resetText);
// Functions
function createParticles(x, y) {
for (var i = 0; i < 8; i++) {
var particle = new Particle(x, y);
particles.push(particle);
game.addChild(particle);
}
}
function checkWin() {
// Check rows
for (var i = 0; i < 3; i++) {
if (gameBoard[i][0] !== '' && gameBoard[i][0] === gameBoard[i][1] && gameBoard[i][1] === gameBoard[i][2]) {
return true;
}
}
// Check columns
for (var i = 0; i < 3; i++) {
if (gameBoard[0][i] !== '' && gameBoard[0][i] === gameBoard[1][i] && gameBoard[1][i] === gameBoard[2][i]) {
return true;
}
}
// Check diagonals
if (gameBoard[0][0] !== '' && gameBoard[0][0] === gameBoard[1][1] && gameBoard[1][1] === gameBoard[2][2]) {
return true;
}
if (gameBoard[0][2] !== '' && gameBoard[0][2] === gameBoard[1][1] && gameBoard[1][1] === gameBoard[2][0]) {
return true;
}
return false;
}
function checkDraw() {
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
if (gameBoard[i][j] === '') {
return false;
}
}
}
return true;
}
function handleWin() {
gameWon = true;
// Update score
if (currentPlayer === 'X') {
xScore++;
} else {
oScore++;
}
updateScoreDisplay();
// Show winner
currentPlayerText.setText('Player ' + currentPlayer + ' Wins!');
currentPlayerText.fill = currentPlayer === 'X' ? '#ff6b9d' : '#64b5f6';
// Play celebration sound
LK.getSound('winCelebration').play();
// Create celebration effect
LK.effects.flashScreen(0x00ffff, 1000);
// Create heart particles
createCelebrationHearts();
// Show reset message
tween(resetText, {
alpha: 1
}, {
duration: 1000
});
// Auto reset after 3 seconds
LK.setTimeout(function () {
resetGame();
}, 3000);
}
function handleDraw() {
gameWon = true;
currentPlayerText.setText("It's a Draw!");
currentPlayerText.fill = '#ffff00';
tween(resetText, {
alpha: 1
}, {
duration: 1000
});
LK.setTimeout(function () {
resetGame();
}, 3000);
}
function createCelebrationHearts() {
for (var i = 0; i < 20; i++) {
var heart = game.addChild(LK.getAsset('heart', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 + (Math.random() - 0.5) * 400,
y: 2732 / 2 + 300,
alpha: 1
}));
var targetY = 2732 / 2 - 400 + Math.random() * 200;
var targetX = heart.x + (Math.random() - 0.5) * 200;
tween(heart, {
x: targetX,
y: targetY,
alpha: 0,
scaleX: 2,
scaleY: 2
}, {
duration: 2000,
easing: tween.easeOut,
onFinish: function onFinish() {
if (heart && heart.parent) {
heart.destroy();
}
}
});
}
}
function updateCurrentPlayerDisplay() {
currentPlayerText.setText("Player " + currentPlayer + "'s Turn");
currentPlayerText.fill = currentPlayer === 'X' ? '#ff6b9d' : '#64b5f6';
}
function updateScoreDisplay() {
scoreText.setText('X: ' + xScore + ' | O: ' + oScore);
}
function resetGame() {
// Reset game state
gameWon = false;
currentPlayer = 'X';
gameBoard = [['', '', ''], ['', '', ''], ['', '', '']];
// Reset grid cells
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
var cell = gridCells[row][col];
if (cell.piece) {
cell.piece.destroy();
cell.piece = null;
}
cell.occupied = false;
}
}
// Reset UI
updateCurrentPlayerDisplay();
tween(resetText, {
alpha: 0
}, {
duration: 500
});
}
game.down = function (x, y, obj) {
if (gameWon && resetText.alpha > 0.5) {
resetGame();
}
};
game.update = function () {
// Update particles
for (var i = particles.length - 1; i >= 0; i--) {
particles[i].update();
}
// Update stars
for (var i = 0; i < stars.length; i++) {
stars[i].update();
}
// Animate grid lines with subtle glow
var glowIntensity = 0.8 + Math.sin(LK.ticks * 0.02) * 0.2;
vertLine1.alpha = glowIntensity;
vertLine2.alpha = glowIntensity;
horizLine1.alpha = glowIntensity;
horizLine2.alpha = glowIntensity;
};
// Start ambient music
LK.playMusic('ambientSpace');