/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); var storage = LK.import("@upit/storage.v1"); /**** * Classes ****/ var LetterButton = Container.expand(function (letter, x, y) { var self = Container.call(this); self.letter = letter; self.isPressed = false; var buttonBg = self.attachAsset('letterButton', { anchorX: 0.5, anchorY: 0.5 }); var letterText = new Text2(letter, { size: 80, fill: 0xFFFFFF }); letterText.anchor.set(0.5, 0.5); self.addChild(letterText); self.x = x; self.y = y; self.showPressed = function () { buttonBg.tint = 0x2e7d32; // Dark green to show pressed state LK.setTimeout(function () { buttonBg.tint = 0xFFFFFF; // Reset to original color }, 150); }; self.showCorrect = function () { self.isPressed = true; tween(self, { scaleX: 1.1, scaleY: 1.1 }, { duration: 100, easing: tween.easeOut, onFinish: function onFinish() { tween(self, { scaleX: 1, scaleY: 1 }, { duration: 200, easing: tween.easeIn }); } }); }; self.showWrong = function () { tween(self, { rotation: 0.2 }, { duration: 50, easing: tween.linear, onFinish: function onFinish() { tween(self, { rotation: -0.2 }, { duration: 50, easing: tween.linear, onFinish: function onFinish() { tween(self, { rotation: 0 }, { duration: 50, easing: tween.linear }); } }); } }); }; self.down = function (x, y, obj) { // Show visual feedback for any button press self.showPressed(); if (!usernameEntered) { // Handle username input if (self.letter === 'ENTER') { if (username.length > 0) { usernameEntered = true; storage.username = username; // Store username persistently instructionText.setText('Choose mode then tap letters in order or type on keyboard'); usernameText.setText('Player: ' + username); refreshButton.visible = true; refreshButtonText.visible = true; // Hide keyboard when username is entered for (var i = 0; i < letterButtons.length; i++) { letterButtons[i].visible = false; } // Show only A-Z letters for the game for (var i = 0; i < letterButtons.length; i++) { var button = letterButtons[i]; if (button.letter.length === 1 && button.letter >= 'A' && button.letter <= 'Z') { button.visible = true; } } } } else if (self.letter === 'DEL') { if (username.length > 0) { username = username.slice(0, -1); usernameText.setText('Username: ' + username); } } else if (username.length < 15) { username += self.letter; usernameText.setText('Username: ' + username); } } else { game.handleLetterPress(self.letter); } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x1a1a1a }); /**** * Game Code ****/ // Game state variables var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var reverseAlphabet = 'ZYXWVUTSRQPONMLKJIHGFEDCBA'; var gameMode = 'forward'; // 'forward' or 'backward' var currentLetterIndex = 0; var gameStarted = false; var gameCompleted = false; var startTime = 0; var elapsedTime = 0; var letterButtons = []; // Initialize storage variables using proper storage plugin pattern with defaults var username = storage.username || ''; var bestTimeForward = storage.bestTimeForward || null; var bestTimeBackward = storage.bestTimeBackward || null; var usernameEntered = username && username.length > 0; // UI elements var titleText = new Text2('Alphabet Speed Challenge', { size: 80, fill: 0xFFFFFF }); titleText.anchor.set(0.5, 0); titleText.x = 1024; titleText.y = 100; game.addChild(titleText); var instructionText = new Text2(usernameEntered ? 'Choose mode then tap letters in order or type on keyboard' : 'Enter your username and press Enter to start', { size: 45, fill: 0xCCCCCC }); instructionText.anchor.set(0.5, 0); instructionText.x = 1024; instructionText.y = 200; game.addChild(instructionText); var usernameText = new Text2(usernameEntered ? 'Player: ' + username : 'Username: ', { size: 50, fill: 0xFFFFFF }); usernameText.anchor.set(0.5, 0); usernameText.x = 1024; usernameText.y = 250; game.addChild(usernameText); var currentLetterText = new Text2('Current: A', { size: 60, fill: 0x4CAF50 }); currentLetterText.anchor.set(0.5, 0); currentLetterText.x = 1024; currentLetterText.y = 300; game.addChild(currentLetterText); // Create letter buttons in QWERTY keyboard layout with numbers and symbols var qwertyRows = ['1234567890', 'QWERTYUIOP', 'ASDFGHJKL', 'ZXCVBNM', '!@#$%^&*()']; var buttonWidth = 200; var buttonHeight = 200; var buttonSpacingX = 210; var buttonSpacingY = 220; var keyboardStartY = 650; // Mode selection buttons (positioned below keyboard) var modeButtonY = keyboardStartY + (qwertyRows.length + 1) * buttonSpacingY + 50; var forwardModeButton = game.attachAsset('letterButton', { anchorX: 0.5, anchorY: 0.5, x: 800, y: modeButtonY, scaleX: 1.2, scaleY: 0.8 }); var forwardModeText = new Text2('A→Z', { size: 40, fill: 0xFFFFFF }); forwardModeText.anchor.set(0.5, 0.5); forwardModeText.x = 800; forwardModeText.y = modeButtonY; game.addChild(forwardModeText); var backwardModeButton = game.attachAsset('letterButton', { anchorX: 0.5, anchorY: 0.5, x: 1248, y: modeButtonY, scaleX: 1.2, scaleY: 0.8 }); var backwardModeText = new Text2('Z→A', { size: 40, fill: 0xFFFFFF }); backwardModeText.anchor.set(0.5, 0.5); backwardModeText.x = 1248; backwardModeText.y = modeButtonY; game.addChild(backwardModeText); var timerText = new Text2('Time: 0.00s', { size: 50, fill: 0xFFFFFF }); timerText.anchor.set(0.5, 0); timerText.x = 1024; timerText.y = 380; game.addChild(timerText); var progressBarBg = game.attachAsset('progressBarBg', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 460 }); var progressBar = game.attachAsset('progressBar', { anchorX: 0, anchorY: 0.5, x: 124, y: 460 }); progressBar.scaleX = 0; var bestTimeText = new Text2(getBestTimeForCurrentMode() ? 'Best: ' + getBestTimeForCurrentMode().toFixed(2) + 's' : 'Best: --', { size: 40, fill: 0xFFD700 }); bestTimeText.anchor.set(0.5, 0); bestTimeText.x = 1024; bestTimeText.y = 500; game.addChild(bestTimeText); // Update mode button colors based on selection function updateModeButtons() { if (gameMode === 'forward') { forwardModeButton.tint = 0x4CAF50; backwardModeButton.tint = 0xFFFFFF; } else { forwardModeButton.tint = 0xFFFFFF; backwardModeButton.tint = 0x4CAF50; } // Update best time display for current mode var currentBestTime = getBestTimeForCurrentMode(); bestTimeText.setText(currentBestTime ? 'Best: ' + currentBestTime.toFixed(2) + 's' : 'Best: --'); bestTimeText.fill = "#FFD700"; } updateModeButtons(); // Create refresh button var refreshButton = game.attachAsset('letterButton', { anchorX: 0.5, anchorY: 0.5, x: 1600, y: 100, scaleX: 0.8, scaleY: 0.8 }); refreshButton.visible = false; // Initially hidden var refreshButtonText = new Text2('↻', { size: 60, fill: 0xFFFFFF }); refreshButtonText.anchor.set(0.5, 0.5); refreshButtonText.x = 1600; refreshButtonText.y = 100; refreshButtonText.visible = false; // Initially hidden game.addChild(refreshButtonText); // Create a mapping from letter to button for easy access var letterToButton = {}; for (var rowIndex = 0; rowIndex < qwertyRows.length; rowIndex++) { var row = qwertyRows[rowIndex]; var rowWidth = row.length * buttonSpacingX; var startX = 1024 - rowWidth / 2 + buttonSpacingX / 2; for (var colIndex = 0; colIndex < row.length; colIndex++) { var letter = row[colIndex]; var x = startX + colIndex * buttonSpacingX; var y = keyboardStartY + rowIndex * buttonSpacingY; var button = new LetterButton(letter, x, y); letterButtons.push(button); letterToButton[letter] = button; game.addChild(button); } } // Create Enter button below the keyboard var enterButton = new LetterButton('ENTER', 1024, keyboardStartY + qwertyRows.length * buttonSpacingY); enterButton.scaleX = 2; // Make it wider letterButtons.push(enterButton); game.addChild(enterButton); // Create Delete button next to Enter button var deleteButton = new LetterButton('DEL', 1024 + 300, keyboardStartY + qwertyRows.length * buttonSpacingY); deleteButton.scaleX = 1.5; // Make it wider letterButtons.push(deleteButton); game.addChild(deleteButton); // Set initial keyboard visibility based on stored username if (usernameEntered) { // Hide all keyboard buttons except A-Z letters for (var i = 0; i < letterButtons.length; i++) { var button = letterButtons[i]; if (button.letter.length === 1 && button.letter >= 'A' && button.letter <= 'Z') { button.visible = true; } else { button.visible = false; } } } // Helper function to get best time for current mode function getBestTimeForCurrentMode() { return gameMode === 'forward' ? bestTimeForward : bestTimeBackward; } // Helper function to set best time for current mode function setBestTimeForCurrentMode(time) { if (gameMode === 'forward') { bestTimeForward = time; storage.bestTimeForward = time; } else { bestTimeBackward = time; storage.bestTimeBackward = time; } } // Game functions game.handleLetterPress = function (letter) { if (!usernameEntered) { return; // Don't allow game to start without username } var currentAlphabet = gameMode === 'forward' ? alphabet : reverseAlphabet; var expectedLetter = currentAlphabet[currentLetterIndex]; if (letter === expectedLetter) { // Correct letter if (!gameStarted) { gameStarted = true; startTime = Date.now(); } LK.getSound('correct').play(); letterButtons[currentLetterIndex].showCorrect(); currentLetterIndex++; // Update progress var progress = currentLetterIndex / 26; progressBar.scaleX = progress; if (currentLetterIndex < 26) { var currentAlphabet = gameMode === 'forward' ? alphabet : reverseAlphabet; currentLetterText.setText('Current: ' + currentAlphabet[currentLetterIndex]); } else { // Game completed gameCompleted = true; var finalTime = (Date.now() - startTime) / 1000; elapsedTime = finalTime; LK.getSound('complete').play(); currentLetterText.setText('COMPLETED!'); currentLetterText.fill = "#FFD700"; refreshButton.visible = false; refreshButtonText.visible = false; // Check for new best time for current mode var currentBestTime = getBestTimeForCurrentMode(); if (!currentBestTime || finalTime < currentBestTime) { setBestTimeForCurrentMode(finalTime); bestTimeText.setText('NEW BEST: ' + finalTime.toFixed(2) + 's'); bestTimeText.fill = "#FF4444"; // Celebrate new best time tween(bestTimeText, { scaleX: 1.2, scaleY: 1.2 }, { duration: 300, easing: tween.easeOut, onFinish: function onFinish() { tween(bestTimeText, { scaleX: 1, scaleY: 1 }, { duration: 300, easing: tween.easeIn }); } }); } else { bestTimeText.setText('Best: ' + currentBestTime.toFixed(2) + 's'); } LK.setScore(Math.round(1 / finalTime * 1000)); // Score based on speed // Show restart instruction LK.setTimeout(function () { instructionText.setText('Tap anywhere or press any key to restart'); }, 1000); } } else { // Wrong letter LK.getSound('wrong').play(); if (letterToButton[letter]) { letterToButton[letter].showWrong(); // Make the wrong letter red var buttonBg = letterToButton[letter].children[0]; // Get the button background buttonBg.tint = 0xff0000; // Make it red // Reset color after a short time LK.setTimeout(function () { buttonBg.tint = 0xFFFFFF; // Reset to white }, 500); } } }; game.resetGame = function () { currentLetterIndex = 0; gameStarted = false; gameCompleted = false; startTime = 0; elapsedTime = 0; // Don't reset username and usernameEntered - keep them persistent var startingLetter = gameMode === 'forward' ? 'A' : 'Z'; currentLetterText.setText('Current: ' + startingLetter); currentLetterText.fill = "#4CAF50"; timerText.setText('Time: 0.00s'); // Only show username entry if no username is stored if (!usernameEntered) { instructionText.setText('Enter your username and press Enter to start'); usernameText.setText('Username: '); refreshButton.visible = false; refreshButtonText.visible = false; } else { instructionText.setText('Choose mode then tap letters in order or type on keyboard'); usernameText.setText('Player: ' + username); refreshButton.visible = true; refreshButtonText.visible = true; } progressBar.scaleX = 0; // Reset all letter buttons for (var i = 0; i < letterButtons.length; i++) { var button = letterButtons[i]; button.isPressed = false; button.scaleX = 1; button.scaleY = 1; // Show appropriate keyboard based on username state if (usernameEntered) { // Show only A-Z letters for the game if (button.letter.length === 1 && button.letter >= 'A' && button.letter <= 'Z') { button.visible = true; } else { button.visible = false; } } else { button.visible = true; // Show full keyboard for username entry } } }; // Keyboard event handling game.keyPressed = function (key) { if (gameCompleted) { game.resetGame(); return; } // Handle username entry if (!usernameEntered) { if (key === 'Enter' || key === 'Return') { if (username.length > 0) { usernameEntered = true; storage.username = username; // Store username persistently instructionText.setText('Choose mode then tap letters in order or type on keyboard'); usernameText.setText('Player: ' + username); refreshButton.visible = true; refreshButtonText.visible = true; // Hide keyboard when username is entered for (var i = 0; i < letterButtons.length; i++) { letterButtons[i].visible = false; } // Show only A-Z letters for the game for (var i = 0; i < letterButtons.length; i++) { var button = letterButtons[i]; if (button.letter.length === 1 && button.letter >= 'A' && button.letter <= 'Z') { button.visible = true; } } } return; } else if (key === 'Backspace') { username = username.slice(0, -1); usernameText.setText('Username: ' + username); return; } else if (key.length === 1 && username.length < 15) { // Allow letters, numbers, and common symbols var allowedChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()'; if (allowedChars.indexOf(key) !== -1) { username += key; usernameText.setText('Username: ' + username); } return; } } // Convert key to uppercase for consistency var upperKey = key.toUpperCase(); // Check if it's a valid letter A-Z if (upperKey >= 'A' && upperKey <= 'Z') { // Show visual feedback for the pressed key if (letterToButton[upperKey]) { letterToButton[upperKey].showPressed(); } game.handleLetterPress(upperKey); } }; // Add keyboard event listener LK.on('keydown', function (event) { if (event.key) { game.keyPressed(event.key); } }); game.down = function (x, y, obj) { // Check if refresh button was clicked var refreshButtonX = 1600; var refreshButtonY = 100; var refreshButtonSize = 160; // 200 * 0.8 scale var refreshHalfSize = refreshButtonSize / 2; if (x >= refreshButtonX - refreshHalfSize && x <= refreshButtonX + refreshHalfSize && y >= refreshButtonY - refreshHalfSize && y <= refreshButtonY + refreshHalfSize) { if (usernameEntered && !gameCompleted) { game.resetGame(); } return; } // Check if forward mode button was clicked var forwardButtonX = 800; var forwardButtonY = modeButtonY; var forwardButtonWidth = 240; // 200 * 1.2 scale var forwardButtonHeight = 160; // 200 * 0.8 scale var forwardHalfWidth = forwardButtonWidth / 2; var forwardHalfHeight = forwardButtonHeight / 2; if (x >= forwardButtonX - forwardHalfWidth && x <= forwardButtonX + forwardHalfWidth && y >= forwardButtonY - forwardHalfHeight && y <= forwardButtonY + forwardHalfHeight) { if (!gameStarted) { gameMode = 'forward'; updateModeButtons(); game.resetGame(); } return; } // Check if backward mode button was clicked var backwardButtonX = 1248; var backwardButtonY = modeButtonY; var backwardButtonWidth = 240; // 200 * 1.2 scale var backwardButtonHeight = 160; // 200 * 0.8 scale var backwardHalfWidth = backwardButtonWidth / 2; var backwardHalfHeight = backwardButtonHeight / 2; if (x >= backwardButtonX - backwardHalfWidth && x <= backwardButtonX + backwardHalfWidth && y >= backwardButtonY - backwardHalfHeight && y <= backwardButtonY + backwardHalfHeight) { if (!gameStarted) { gameMode = 'backward'; updateModeButtons(); game.resetGame(); } return; } if (gameCompleted) { game.resetGame(); } }; game.update = function () { if (gameStarted && !gameCompleted) { elapsedTime = (Date.now() - startTime) / 1000; timerText.setText('Time: ' + elapsedTime.toFixed(2) + 's'); } };