Play
:quality(85)/https://cdn.frvr.ai/6829f898eba8bbd7926fb357.png)
:quality(85)/https://cdn.frvr.ai/6829f897eba8bbd7926fb356.png)
Creation History
Code edit (1 edits merged)
Please save this source code
User prompt
The message "you win" is overlapping with the letter matrix.
User prompt
the letter box is still overlapping with the title "LEtter Logic"
User prompt
the error message and the tile are displayed at the same place. the 5x6 box should be displayed below the title and the message
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot set properties of undefined (setting 'fill')' in or related to this line: 'keyText.style.fill = "#ffffff";' Line Number: 52
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot set properties of undefined (setting 'fill')' in or related to this line: 'self.letterText.style.fill = "#ffffff";' Line Number: 143
Code edit (1 edits merged)
Please save this source code
User prompt
Letter Logic
Initial prompt
Create a game like woordle
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");
/****
* Classes
****/
var KeyboardKey = Container.expand(function (letter) {
var self = Container.call(this);
var keyTile = self.attachAsset('keyTile', {
anchorX: 0.5,
anchorY: 0.5
});
self.letter = letter.toUpperCase();
self.state = 'unused'; // unused, correct, present, absent
var keyText = new Text2(self.letter, {
size: 40,
fill: 0x000000
});
keyText.style = keyText.style || {};
keyText.anchor.set(0.5, 0.5);
self.addChild(keyText);
// Special handling for backspace and enter
if (self.letter === 'BACK') {
keyTile.width = 100;
keyText.setText('⌫');
} else if (self.letter === 'ENTER') {
keyTile.width = 120;
}
self.setState = function (state) {
self.state = state;
if (state === 'correct') {
keyTile.tint = 0x6aaa64; // Green
keyText.style.fill = "#ffffff";
} else if (state === 'present') {
keyTile.tint = 0xc9b458; // Yellow
keyText.style.fill = "#ffffff";
} else if (state === 'absent') {
keyTile.tint = 0x787c7e; // Gray
keyText.style.fill = "#ffffff";
} else {
keyTile.tint = 0xcccccc; // Default gray
keyText.style.fill = "#000000";
}
};
self.down = function () {
tween(keyTile, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100
});
LK.getSound('keypress').play();
};
self.up = function () {
tween(keyTile, {
scaleX: 1,
scaleY: 1
}, {
duration: 100
});
};
return self;
});
var MessageDisplay = Container.expand(function () {
var self = Container.call(this);
var messageBg = LK.getAsset('tile', {
anchorX: 0.5,
anchorY: 0.5,
width: 600,
height: 80
});
messageBg.tint = 0x000000;
messageBg.alpha = 0.8;
self.addChild(messageBg);
var messageText = new Text2('', {
size: 40,
fill: 0xFFFFFF
});
messageText.anchor.set(0.5, 0.5);
self.addChild(messageText);
self.visible = false;
self.showMessage = function (message, duration) {
messageText.setText(message);
self.visible = true;
if (self.hideTimeout) {
LK.clearTimeout(self.hideTimeout);
}
self.hideTimeout = LK.setTimeout(function () {
self.visible = false;
}, duration || 2000);
};
return self;
});
var Tile = Container.expand(function () {
var self = Container.call(this);
var tileGraphics = self.attachAsset('tile', {
anchorX: 0.5,
anchorY: 0.5
});
self.letterText = new Text2('', {
size: 80,
fill: 0x000000
});
self.letterText.anchor.set(0.5, 0.5);
self.addChild(self.letterText);
self.letterText.style = self.letterText.style || {};
self.letter = '';
self.state = 'empty'; // empty, filled, correct, present, absent
self.setLetter = function (letter) {
self.letter = letter.toUpperCase();
self.letterText.setText(self.letter);
self.state = 'filled';
tileGraphics.tint = 0xdddddd;
};
self.clear = function () {
self.letter = '';
self.letterText.setText('');
self.state = 'empty';
tileGraphics.tint = 0xdddddd;
};
self.setState = function (state) {
self.state = state;
if (state === 'correct') {
tileGraphics.tint = 0x6aaa64; // Green
self.letterText.style.fill = "#ffffff";
} else if (state === 'present') {
tileGraphics.tint = 0xc9b458; // Yellow
self.letterText.style.fill = "#ffffff";
} else if (state === 'absent') {
tileGraphics.tint = 0x787c7e; // Gray
self.letterText.style.fill = "#ffffff";
} else if (state === 'filled') {
tileGraphics.tint = 0xdddddd; // Light gray
self.letterText.style.fill = "#000000";
} else {
// empty
tileGraphics.tint = 0xdddddd; // Light gray
self.letterText.style.fill = "#000000";
}
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf5f5f5
});
/****
* Game Code
****/
// Game constants
var WORD_LENGTH = 5;
var MAX_ATTEMPTS = 6;
var BOARD_TOP_MARGIN = 300; // Increased to avoid overlap with title and message
var TILE_SIZE = 150;
var TILE_GAP = 10;
var KEYBOARD_TOP_MARGIN = 300;
// Word list - in a real implementation this would be a much larger list
var wordList = ["ABOUT", "ABOVE", "AFTER", "AGAIN", "ALONG", "AMONG", "APPLE", "APPLY", "BASIC", "BEGIN", "BLACK", "BLOCK", "BRING", "BUILD", "CARRY", "CATCH", "CAUSE", "CHECK", "CHIEF", "CLAIM", "CLEAR", "CLOSE", "COLOR", "COULD", "COUNT", "COURT", "COVER", "CREATE", "DEATH", "DOING", "DRIVE", "EARLY", "EARTH", "ENJOY", "ENTER", "EVERY", "FIELD", "FINAL", "FIRST", "FORCE", "FOUND", "FRAME", "FRONT", "GIVEN", "GOING", "GRANT", "GROUP", "GROWN", "HAPPY", "HEARD", "HEART", "HEAVY", "HUMAN", "IDEAL", "IMAGE", "INBOX", "INDEX", "INPUT", "ISSUE", "JOINT", "JUDGE", "KNOWN", "LABEL", "LARGE", "LEARN", "LEAVE", "LEVEL", "LIGHT", "LIMIT", "LIVED", "LOCAL", "LOOKS", "LOVED", "LOWER", "LUCKY", "MAJOR", "MAKES", "MARCH", "MATCH", "MAYBE", "MEDIA", "MODEL", "MONEY", "MONTH", "MORAL", "MOVED", "MUSIC", "NEEDS", "NEVER", "NIGHT", "OFFER", "ORDER", "OTHER", "OWNER", "PANEL", "PARTY", "PHONE", "PLANE", "PLANT", "POINT", "POWER", "PRESS", "PRICE", "PRIME", "PRIOR", "PROOF", "PROUD", "QUICK", "QUITE", "RAISE", "REACH", "READY", "REFER", "RIGHT", "ROUND", "ROUGH", "SCALE", "SCORE", "SHARE", "SHOWN", "SIGHT", "SINCE", "SLEEP", "SMART", "SMILE", "SOLID", "SOUND", "SPACE", "SPARE", "SPEAK", "SPEND", "STAGE", "STAND", "START", "STATE", "STILL", "STOCK", "STONE", "STORE", "STORY", "STUDY", "STYLE", "SUGAR", "TABLE", "TAKEN", "TASTE", "THANK", "THINK", "THIRD", "THOSE", "THREE", "TIMES", "TITLE", "TOUCH", "TOWER", "TRADE", "TRAIN", "TRIAL", "TRIED", "TRUTH", "UNDER", "UNION", "UNTIL", "UPPER", "USAGE", "USUAL", "VALUE", "VIDEO", "VIRUS", "VISIT", "VOICE", "WASTE", "WATCH", "WATER", "WHERE", "WHOLE", "WOMAN", "WORLD", "WORRY", "WORTH", "WOULD", "WRONG", "YOUTH", "APPLE", "BEACH", "CLOUD", "DRAFT", "EARTH", "FLAKE", "GRAPE", "HOUSE", "INTEL", "JEANS", "KNIFE", "LEMUR", "MOUSE", "NIGHT", "OCEAN", "PIANO", "QUEEN", "RIVER", "SNAKE", "TIGER", "ULTRA", "VIRUS", "WHALE", "XEROX", "YACHT", "ZEBRA", "AUDIO", "BRAKE", "CHAIR", "DREAM"];
// Game state variables
var currentWord = '';
var targetWord = '';
var currentRow = 0;
var currentCol = 0;
var gameOver = false;
var board = [];
var keyboard = {};
var keyRows = [['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'], ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'], ['ENTER', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'BACK']];
// Create game board
function createBoard() {
for (var row = 0; row < MAX_ATTEMPTS; row++) {
board[row] = [];
for (var col = 0; col < WORD_LENGTH; col++) {
var tile = new Tile();
tile.x = 2048 / 2 - (WORD_LENGTH - 1) * (TILE_SIZE + TILE_GAP) / 2 + col * (TILE_SIZE + TILE_GAP);
tile.y = BOARD_TOP_MARGIN + row * (TILE_SIZE + TILE_GAP);
board[row][col] = tile;
game.addChild(tile);
}
}
}
// Create on-screen keyboard
function createKeyboard() {
for (var rowIndex = 0; rowIndex < keyRows.length; rowIndex++) {
var row = keyRows[rowIndex];
var rowWidth = row.length * (80 + 5) - 5; // Key width + gap
// Adjust for wider keys
if (rowIndex === 2) {
rowWidth += 60; // Account for ENTER and BACK being wider
}
var startX = 2048 / 2 - rowWidth / 2;
for (var colIndex = 0; colIndex < row.length; colIndex++) {
var letter = row[colIndex];
var key = new KeyboardKey(letter);
// Position keys with proper spacing
key.x = startX + colIndex * 85;
if (letter === 'ENTER') {
key.x += 20; // Adjust for wider key
} else if (letter === 'BACK' || colIndex > 0 && row[colIndex - 1] === 'ENTER') {
key.x += 40; // Adjust spacing after ENTER
}
key.y = BOARD_TOP_MARGIN + MAX_ATTEMPTS * (TILE_SIZE + TILE_GAP) + KEYBOARD_TOP_MARGIN + rowIndex * 90;
keyboard[letter] = key;
game.addChild(key);
// Add event handlers
key.down = function () {
if (!gameOver) {
tween(this, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100
});
LK.getSound('keypress').play();
}
};
key.up = function () {
if (!gameOver) {
tween(this, {
scaleX: 1,
scaleY: 1
}, {
duration: 100
});
handleKeyPress(this.letter);
}
};
}
}
}
// Handle key press
function handleKeyPress(key) {
if (gameOver) {
return;
}
if (key === 'BACK') {
// Delete the last letter
if (currentCol > 0) {
currentCol--;
board[currentRow][currentCol].clear();
}
} else if (key === 'ENTER') {
// Submit the word
if (currentCol === WORD_LENGTH) {
checkWord();
} else {
messageDisplay.showMessage("Not enough letters", 1500);
}
} else if (currentCol < WORD_LENGTH) {
// Add a letter
board[currentRow][currentCol].setLetter(key);
currentCol++;
}
}
// Check the current word against the target
function checkWord() {
// Build the current word
currentWord = '';
for (var col = 0; col < WORD_LENGTH; col++) {
currentWord += board[currentRow][col].letter;
}
// Check if word is in list
if (wordList.indexOf(currentWord) === -1) {
messageDisplay.showMessage("Not in word list", 1500);
return;
}
// Check letters against target word
var targetLetterCount = {};
for (var i = 0; i < targetWord.length; i++) {
var letter = targetWord[i];
targetLetterCount[letter] = (targetLetterCount[letter] || 0) + 1;
}
// First pass: Mark correct positions
var correctPositions = [];
for (var col = 0; col < WORD_LENGTH; col++) {
var tile = board[currentRow][col];
var letter = tile.letter;
if (letter === targetWord[col]) {
tile.setState('correct');
keyboard[letter].setState('correct');
correctPositions.push(col);
targetLetterCount[letter]--;
}
}
// Second pass: Mark present and absent letters
for (var col = 0; col < WORD_LENGTH; col++) {
if (correctPositions.indexOf(col) !== -1) {
continue;
}
var tile = board[currentRow][col];
var letter = tile.letter;
if (targetWord.includes(letter) && targetLetterCount[letter] > 0) {
tile.setState('present');
if (keyboard[letter].state !== 'correct') {
keyboard[letter].setState('present');
}
targetLetterCount[letter]--;
} else {
tile.setState('absent');
if (keyboard[letter].state !== 'correct' && keyboard[letter].state !== 'present') {
keyboard[letter].setState('absent');
}
}
}
// Animate the tiles
for (var col = 0; col < WORD_LENGTH; col++) {
var tile = board[currentRow][col];
animateTileReveal(tile, col);
}
// Check for win
if (currentWord === targetWord) {
LK.setTimeout(function () {
gameOver = true;
LK.getSound('win').play();
messageDisplay.showMessage("You win!", 3000);
LK.setScore(MAX_ATTEMPTS - currentRow);
LK.showYouWin();
}, 1500);
return;
}
// Move to next row or end game
currentRow++;
currentCol = 0;
if (currentRow >= MAX_ATTEMPTS) {
LK.setTimeout(function () {
gameOver = true;
LK.getSound('lose').play();
messageDisplay.showMessage("The word was " + targetWord, 3000);
LK.showGameOver();
}, 1500);
}
}
// Animate tile reveal
function animateTileReveal(tile, col) {
// Flip animation
LK.setTimeout(function () {
// Scale down on Y axis
tween(tile, {
scaleY: 0.1
}, {
duration: 150,
onFinish: function onFinish() {
// Change color based on state when flipped
// Then scale back up
tween(tile, {
scaleY: 1
}, {
duration: 150
});
}
});
// Play sound if correct
if (col === WORD_LENGTH - 1) {
LK.getSound('correct').play();
}
}, col * 200);
}
// Choose a random word from the list
function selectRandomWord() {
var index = Math.floor(Math.random() * wordList.length);
return wordList[index];
}
// Initialize the game
function initGame() {
// Set up the message display
messageDisplay = new MessageDisplay();
messageDisplay.x = 2048 / 2;
messageDisplay.y = 150; // Moved higher to prevent overlap with letter matrix
game.addChild(messageDisplay);
// Create game board and keyboard
createBoard();
createKeyboard();
// Select a target word
targetWord = selectRandomWord();
console.log("Target word: " + targetWord); // For debugging
// Start background music
LK.playMusic('bgmusic', {
volume: 0.3
});
// Show game title
var titleText = new Text2("LETTER LOGIC", {
size: 80,
fill: 0x333333
});
titleText.anchor.set(0.5, 0);
titleText.x = 2048 / 2;
titleText.y = 40;
game.addChild(titleText);
// Instructions
var instructionsText = new Text2("Guess the 5-letter word in six tries.", {
size: 30,
fill: 0x666666
});
instructionsText.anchor.set(0.5, 0);
instructionsText.x = 2048 / 2;
instructionsText.y = titleText.y + titleText.height + 10;
game.addChild(instructionsText);
}
// Initialize game
initGame();
// Game update function
game.update = function () {
// Game tick updates (if needed)
};
// Game event handlers
game.down = function (x, y, obj) {
// Handle game-wide touch events if needed
};
game.up = function (x, y, obj) {
// Handle game-wide touch events if needed
};
game.move = function (x, y, obj) {
// Handle game-wide move events if needed
}; ===================================================================
--- original.js
+++ change.js
@@ -161,9 +161,9 @@
var TILE_SIZE = 150;
var TILE_GAP = 10;
var KEYBOARD_TOP_MARGIN = 300;
// Word list - in a real implementation this would be a much larger list
-var wordList = ["APPLE", "BEACH", "CLOUD", "DRAFT", "EARTH", "FLAKE", "GRAPE", "HOUSE", "INTEL", "JEANS", "KNIFE", "LEMUR", "MOUSE", "NIGHT", "OCEAN", "PIANO", "QUEEN", "RIVER", "SNAKE", "TIGER", "ULTRA", "VIRUS", "WHALE", "XEROX", "YACHT", "ZEBRA", "AUDIO", "BRAKE", "CHAIR", "DREAM"];
+var wordList = ["ABOUT", "ABOVE", "AFTER", "AGAIN", "ALONG", "AMONG", "APPLE", "APPLY", "BASIC", "BEGIN", "BLACK", "BLOCK", "BRING", "BUILD", "CARRY", "CATCH", "CAUSE", "CHECK", "CHIEF", "CLAIM", "CLEAR", "CLOSE", "COLOR", "COULD", "COUNT", "COURT", "COVER", "CREATE", "DEATH", "DOING", "DRIVE", "EARLY", "EARTH", "ENJOY", "ENTER", "EVERY", "FIELD", "FINAL", "FIRST", "FORCE", "FOUND", "FRAME", "FRONT", "GIVEN", "GOING", "GRANT", "GROUP", "GROWN", "HAPPY", "HEARD", "HEART", "HEAVY", "HUMAN", "IDEAL", "IMAGE", "INBOX", "INDEX", "INPUT", "ISSUE", "JOINT", "JUDGE", "KNOWN", "LABEL", "LARGE", "LEARN", "LEAVE", "LEVEL", "LIGHT", "LIMIT", "LIVED", "LOCAL", "LOOKS", "LOVED", "LOWER", "LUCKY", "MAJOR", "MAKES", "MARCH", "MATCH", "MAYBE", "MEDIA", "MODEL", "MONEY", "MONTH", "MORAL", "MOVED", "MUSIC", "NEEDS", "NEVER", "NIGHT", "OFFER", "ORDER", "OTHER", "OWNER", "PANEL", "PARTY", "PHONE", "PLANE", "PLANT", "POINT", "POWER", "PRESS", "PRICE", "PRIME", "PRIOR", "PROOF", "PROUD", "QUICK", "QUITE", "RAISE", "REACH", "READY", "REFER", "RIGHT", "ROUND", "ROUGH", "SCALE", "SCORE", "SHARE", "SHOWN", "SIGHT", "SINCE", "SLEEP", "SMART", "SMILE", "SOLID", "SOUND", "SPACE", "SPARE", "SPEAK", "SPEND", "STAGE", "STAND", "START", "STATE", "STILL", "STOCK", "STONE", "STORE", "STORY", "STUDY", "STYLE", "SUGAR", "TABLE", "TAKEN", "TASTE", "THANK", "THINK", "THIRD", "THOSE", "THREE", "TIMES", "TITLE", "TOUCH", "TOWER", "TRADE", "TRAIN", "TRIAL", "TRIED", "TRUTH", "UNDER", "UNION", "UNTIL", "UPPER", "USAGE", "USUAL", "VALUE", "VIDEO", "VIRUS", "VISIT", "VOICE", "WASTE", "WATCH", "WATER", "WHERE", "WHOLE", "WOMAN", "WORLD", "WORRY", "WORTH", "WOULD", "WRONG", "YOUTH", "APPLE", "BEACH", "CLOUD", "DRAFT", "EARTH", "FLAKE", "GRAPE", "HOUSE", "INTEL", "JEANS", "KNIFE", "LEMUR", "MOUSE", "NIGHT", "OCEAN", "PIANO", "QUEEN", "RIVER", "SNAKE", "TIGER", "ULTRA", "VIRUS", "WHALE", "XEROX", "YACHT", "ZEBRA", "AUDIO", "BRAKE", "CHAIR", "DREAM"];
// Game state variables
var currentWord = '';
var targetWord = '';
var currentRow = 0;
@@ -235,9 +235,11 @@
}
}
// Handle key press
function handleKeyPress(key) {
- if (gameOver) return;
+ if (gameOver) {
+ return;
+ }
if (key === 'BACK') {
// Delete the last letter
if (currentCol > 0) {
currentCol--;
@@ -287,9 +289,11 @@
}
}
// Second pass: Mark present and absent letters
for (var col = 0; col < WORD_LENGTH; col++) {
- if (correctPositions.indexOf(col) !== -1) continue;
+ if (correctPositions.indexOf(col) !== -1) {
+ continue;
+ }
var tile = board[currentRow][col];
var letter = tile.letter;
if (targetWord.includes(letter) && targetLetterCount[letter] > 0) {
tile.setState('present');
Showing 1 to 9 of 9
Used plugins
@upit/tween@upit/storage
