User prompt
Add a 3-second countdown after the player and computer make their choices, then display the results on the screen.
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot set properties of undefined (setting 'fill')' in or related to this line: 'resultText.style.fill = "#00ff00";' Line Number: 87
User prompt
Create a simple Rock-Paper-Scissors game. The user chooses rock, paper, or scissors. The computer randomly chooses one too. Determine the winner and display the result.
User prompt
Rock Paper Scissors Showdown
Initial prompt
Create a simple Rock-Paper-Scissors game. The user chooses rock, paper, or scissors. The computer randomly chooses one too. Determine the winner and display the result.
/**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // --- Rock Paper Scissors Game Variables --- var choices = ['rock', 'paper', 'scissors']; var playerChoice = null; var computerChoice = null; var resultText = null; var playerScore = 0; var computerScore = 0; // --- Create GUI Score Display --- var scoreDisplay = new Text2('0/10 - 0/10', { size: 100, fill: 0xFFFFFF }); scoreDisplay.anchor.set(0.5, 0); LK.gui.top.addChild(scoreDisplay); // --- Create Result Text --- resultText = new Text2('', { size: 120, fill: 0xFFFFFF }); resultText.anchor.set(0.5, 0.5); LK.gui.center.addChild(resultText); // --- Create Choice Buttons --- var buttonSize = 350; var buttonSpacing = 120; var buttonY = 1800; var buttonStartX = (2048 - (buttonSize * 3 + buttonSpacing * 2)) / 2 + buttonSize / 2; var buttons = []; for (var i = 0; i < 3; i++) { var btn = new Container(); var btnAsset; if (choices[i] === 'rock') { btnAsset = LK.getAsset('Rock', { width: buttonSize, height: buttonSize, anchorX: 0.5, anchorY: 0.5 }); } else if (choices[i] === 'paper') { btnAsset = LK.getAsset('Paper', { width: buttonSize, height: buttonSize, anchorX: 0.5, anchorY: 0.5 }); } else { if (choices[i] === 'scissors') { btnAsset = LK.getAsset('Scissors', { width: buttonSize, height: buttonSize, anchorX: 0.5, anchorY: 0.5 }); } else { btnAsset = LK.getAsset('rps_' + choices[i], { width: buttonSize, height: buttonSize, anchorX: 0.5, anchorY: 0.5 }); } } btn.addChild(btnAsset); // Add label var label = new Text2(choices[i].toUpperCase(), { size: 70, fill: 0xFFFFFF }); label.anchor.set(0.5, 0); label.y = buttonSize / 2 + 20; btn.addChild(label); btn.x = buttonStartX + i * (buttonSize + buttonSpacing); btn.y = buttonY; btn.choice = choices[i]; btn.interactive = true; btn.buttonMode = true; buttons.push(btn); game.addChild(btn); } // --- Button Event Handlers --- for (var i = 0; i < buttons.length; i++) { (function (btn) { btn.down = function (x, y, obj) { if (playerChoice !== null) return; // Prevent double tap playerChoice = btn.choice; playRound(); }; })(buttons[i]); } // --- Play a Round --- function playRound() { // Prevent play if someone already won if (playerScore >= 10 || computerScore >= 10) { return; } // Computer random choice computerChoice = choices[Math.floor(Math.random() * 3)]; // Show countdown before revealing computer's choice and result var countdown = 3; resultText.setText(countdown.toString()); resultText.setStyle({ fill: 0xFFFFFF }); // Create a dedicated countdownText for displaying the countdown numbers if (!game.countdownText) { game.countdownText = new Text2('', { size: 220, fill: 0xFFFFFF }); game.countdownText.anchor.set(0.5, 0.5); LK.gui.center.addChild(game.countdownText); } game.countdownText.setText(countdown.toString()); game.countdownText.visible = true; var countdownInterval = null; function updateCountdown() { countdown--; if (countdown > 0) { game.countdownText.setText(countdown.toString()); game.countdownText.visible = true; } else if (countdown === 0) { game.countdownText.setText('0'); game.countdownText.visible = true; } else { // Countdown finished, hide countdown text if (countdownInterval) { LK.clearInterval(countdownInterval); countdownInterval = null; } game.countdownText.visible = false; resultText.setText(''); // Show computer's choice after countdown disappears showChoices(); // Show result after a short delay for dramatic effect LK.setTimeout(function () { var result = getResult(playerChoice, computerChoice); if (result === 'win') { playerScore++; resultText.setText(''); resultText.setStyle({ fill: 0xFFFFFF }); } else if (result === 'lose') { computerScore++; resultText.setText(''); resultText.setStyle({ fill: 0xFFFFFF }); } else { resultText.setText(''); resultText.setStyle({ fill: 0xFFFFFF }); } scoreDisplay.setText(playerScore + '/10 - ' + computerScore + '/10'); // Check for win condition if (playerScore >= 10 || computerScore >= 10) { // Show winner and prevent further play if (playerScore >= 10 && computerScore >= 10) { resultText.setText('Draw'); resultText.setStyle({ fill: 0xFFFFFF }); } else if (playerScore >= 10) { resultText.setText('Player Won'); resultText.setStyle({ fill: 0xFFFFFF }); } else if (computerScore >= 10) { resultText.setText('Computer Won'); resultText.setStyle({ fill: 0xFFFFFF }); } // Do not reset round, keep result visible return; } // Reset for next round after a short delay LK.setTimeout(function () { resetRound(); }, 1200); }, 500); // 0.5s delay to show computer's choice before result } } countdownInterval = LK.setInterval(updateCountdown, 1000); } // --- Show Choices (Visual Feedback) --- function showChoices() { for (var i = 0; i < buttons.length; i++) { var btn = buttons[i]; if (btn.choice === playerChoice) { btn.alpha = 1.0; LK.effects.flashObject(btn, 0x00ff00, 400); } else { btn.alpha = 0.4; } } // Show computer choice as a temporary overlay in the center if (game.computerChoiceSprite) { game.computerChoiceSprite.destroy(); game.computerChoiceSprite = null; } var compSprite; if (computerChoice === 'rock') { compSprite = LK.getAsset('Rock', { width: 400, height: 400, anchorX: 0.5, anchorY: 0.5 }); } else if (computerChoice === 'paper') { compSprite = LK.getAsset('Paper', { width: 400, height: 400, anchorX: 0.5, anchorY: 0.5 }); } else if (computerChoice === 'scissors') { compSprite = LK.getAsset('Scissors', { width: 400, height: 400, anchorX: 0.5, anchorY: 0.5 }); } else { compSprite = LK.getAsset('rps_' + computerChoice, { width: 400, height: 400, anchorX: 0.5, anchorY: 0.5 }); } compSprite.x = 2048 / 2; compSprite.y = 1100; game.addChild(compSprite); game.computerChoiceSprite = compSprite; } // --- Reset for Next Round --- function resetRound() { playerChoice = null; computerChoice = null; resultText.setText(''); for (var i = 0; i < buttons.length; i++) { buttons[i].alpha = 1.0; } if (game.computerChoiceSprite) { game.computerChoiceSprite.destroy(); game.computerChoiceSprite = null; } } // --- Determine Result --- function getResult(player, computer) { if (player === computer) return 'draw'; if (player === 'rock' && computer === 'scissors' || player === 'paper' && computer === 'rock' || player === 'scissors' && computer === 'paper') { return 'win'; } return 'lose'; }
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x000000
});
/****
* Game Code
****/
// --- Rock Paper Scissors Game Variables ---
var choices = ['rock', 'paper', 'scissors'];
var playerChoice = null;
var computerChoice = null;
var resultText = null;
var playerScore = 0;
var computerScore = 0;
// --- Create GUI Score Display ---
var scoreDisplay = new Text2('0/10 - 0/10', {
size: 100,
fill: 0xFFFFFF
});
scoreDisplay.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreDisplay);
// --- Create Result Text ---
resultText = new Text2('', {
size: 120,
fill: 0xFFFFFF
});
resultText.anchor.set(0.5, 0.5);
LK.gui.center.addChild(resultText);
// --- Create Choice Buttons ---
var buttonSize = 350;
var buttonSpacing = 120;
var buttonY = 1800;
var buttonStartX = (2048 - (buttonSize * 3 + buttonSpacing * 2)) / 2 + buttonSize / 2;
var buttons = [];
for (var i = 0; i < 3; i++) {
var btn = new Container();
var btnAsset;
if (choices[i] === 'rock') {
btnAsset = LK.getAsset('Rock', {
width: buttonSize,
height: buttonSize,
anchorX: 0.5,
anchorY: 0.5
});
} else if (choices[i] === 'paper') {
btnAsset = LK.getAsset('Paper', {
width: buttonSize,
height: buttonSize,
anchorX: 0.5,
anchorY: 0.5
});
} else {
if (choices[i] === 'scissors') {
btnAsset = LK.getAsset('Scissors', {
width: buttonSize,
height: buttonSize,
anchorX: 0.5,
anchorY: 0.5
});
} else {
btnAsset = LK.getAsset('rps_' + choices[i], {
width: buttonSize,
height: buttonSize,
anchorX: 0.5,
anchorY: 0.5
});
}
}
btn.addChild(btnAsset);
// Add label
var label = new Text2(choices[i].toUpperCase(), {
size: 70,
fill: 0xFFFFFF
});
label.anchor.set(0.5, 0);
label.y = buttonSize / 2 + 20;
btn.addChild(label);
btn.x = buttonStartX + i * (buttonSize + buttonSpacing);
btn.y = buttonY;
btn.choice = choices[i];
btn.interactive = true;
btn.buttonMode = true;
buttons.push(btn);
game.addChild(btn);
}
// --- Button Event Handlers ---
for (var i = 0; i < buttons.length; i++) {
(function (btn) {
btn.down = function (x, y, obj) {
if (playerChoice !== null) return; // Prevent double tap
playerChoice = btn.choice;
playRound();
};
})(buttons[i]);
}
// --- Play a Round ---
function playRound() {
// Prevent play if someone already won
if (playerScore >= 10 || computerScore >= 10) {
return;
}
// Computer random choice
computerChoice = choices[Math.floor(Math.random() * 3)];
// Show countdown before revealing computer's choice and result
var countdown = 3;
resultText.setText(countdown.toString());
resultText.setStyle({
fill: 0xFFFFFF
});
// Create a dedicated countdownText for displaying the countdown numbers
if (!game.countdownText) {
game.countdownText = new Text2('', {
size: 220,
fill: 0xFFFFFF
});
game.countdownText.anchor.set(0.5, 0.5);
LK.gui.center.addChild(game.countdownText);
}
game.countdownText.setText(countdown.toString());
game.countdownText.visible = true;
var countdownInterval = null;
function updateCountdown() {
countdown--;
if (countdown > 0) {
game.countdownText.setText(countdown.toString());
game.countdownText.visible = true;
} else if (countdown === 0) {
game.countdownText.setText('0');
game.countdownText.visible = true;
} else {
// Countdown finished, hide countdown text
if (countdownInterval) {
LK.clearInterval(countdownInterval);
countdownInterval = null;
}
game.countdownText.visible = false;
resultText.setText('');
// Show computer's choice after countdown disappears
showChoices();
// Show result after a short delay for dramatic effect
LK.setTimeout(function () {
var result = getResult(playerChoice, computerChoice);
if (result === 'win') {
playerScore++;
resultText.setText('');
resultText.setStyle({
fill: 0xFFFFFF
});
} else if (result === 'lose') {
computerScore++;
resultText.setText('');
resultText.setStyle({
fill: 0xFFFFFF
});
} else {
resultText.setText('');
resultText.setStyle({
fill: 0xFFFFFF
});
}
scoreDisplay.setText(playerScore + '/10 - ' + computerScore + '/10');
// Check for win condition
if (playerScore >= 10 || computerScore >= 10) {
// Show winner and prevent further play
if (playerScore >= 10 && computerScore >= 10) {
resultText.setText('Draw');
resultText.setStyle({
fill: 0xFFFFFF
});
} else if (playerScore >= 10) {
resultText.setText('Player Won');
resultText.setStyle({
fill: 0xFFFFFF
});
} else if (computerScore >= 10) {
resultText.setText('Computer Won');
resultText.setStyle({
fill: 0xFFFFFF
});
}
// Do not reset round, keep result visible
return;
}
// Reset for next round after a short delay
LK.setTimeout(function () {
resetRound();
}, 1200);
}, 500); // 0.5s delay to show computer's choice before result
}
}
countdownInterval = LK.setInterval(updateCountdown, 1000);
}
// --- Show Choices (Visual Feedback) ---
function showChoices() {
for (var i = 0; i < buttons.length; i++) {
var btn = buttons[i];
if (btn.choice === playerChoice) {
btn.alpha = 1.0;
LK.effects.flashObject(btn, 0x00ff00, 400);
} else {
btn.alpha = 0.4;
}
}
// Show computer choice as a temporary overlay in the center
if (game.computerChoiceSprite) {
game.computerChoiceSprite.destroy();
game.computerChoiceSprite = null;
}
var compSprite;
if (computerChoice === 'rock') {
compSprite = LK.getAsset('Rock', {
width: 400,
height: 400,
anchorX: 0.5,
anchorY: 0.5
});
} else if (computerChoice === 'paper') {
compSprite = LK.getAsset('Paper', {
width: 400,
height: 400,
anchorX: 0.5,
anchorY: 0.5
});
} else if (computerChoice === 'scissors') {
compSprite = LK.getAsset('Scissors', {
width: 400,
height: 400,
anchorX: 0.5,
anchorY: 0.5
});
} else {
compSprite = LK.getAsset('rps_' + computerChoice, {
width: 400,
height: 400,
anchorX: 0.5,
anchorY: 0.5
});
}
compSprite.x = 2048 / 2;
compSprite.y = 1100;
game.addChild(compSprite);
game.computerChoiceSprite = compSprite;
}
// --- Reset for Next Round ---
function resetRound() {
playerChoice = null;
computerChoice = null;
resultText.setText('');
for (var i = 0; i < buttons.length; i++) {
buttons[i].alpha = 1.0;
}
if (game.computerChoiceSprite) {
game.computerChoiceSprite.destroy();
game.computerChoiceSprite = null;
}
}
// --- Determine Result ---
function getResult(player, computer) {
if (player === computer) return 'draw';
if (player === 'rock' && computer === 'scissors' || player === 'paper' && computer === 'rock' || player === 'scissors' && computer === 'paper') {
return 'win';
}
return 'lose';
}