Play
:quality(85)/https:%2F%2Fcdn.frvr.ai/6867e10b1087c4351564d852.png)
:quality(85)/https:%2F%2Fcdn.frvr.ai/6867e1081087c4351564d84e.png)
#EducationalGames
#AlphabetLearning
#KidsGames
#TouchLearning
#ABCGame
Creation History
User prompt
Que al acabar diga un audio la letra que es
User prompt
Hacer la x simétrica por los 4 lados
User prompt
Que la parte de arriba esté como la de abajo de la x
User prompt
Arreglar la medida de las líneas de la x
User prompt
que funcione el back buton
User prompt
back
User prompt
que haya una segunda pagina para los numeros del 1 al 10
User prompt
Please fix the bug: 'Uncaught ReferenceError: dotNumbers is not defined' in or related to this line: 'if (dotNumbers && dotNumbers[currentTraceIndex]) {' Line Number: 1484
User prompt
poner dl 1 al 10 para trazar
User prompt
poner el numero 1 para trazar
User prompt
poner numero 1
User prompt
poner por done comienzan las letras
User prompt
restart
User prompt
z
User prompt
arreglar x
User prompt
x
User prompt
y
User prompt
x
User prompt
w
User prompt
v
User prompt
u
User prompt
t
User prompt
s
User prompt
r
User prompt
q
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");
/****
* Classes
****/
var LetterBox = Container.expand(function (letter, isCompleted, isLocked) {
var self = Container.call(this);
self.letter = letter;
self.isCompleted = isCompleted || false;
self.isLocked = isLocked || false;
// Choose appropriate background based on state
var boxType = 'letterBox';
if (self.isCompleted) {
boxType = 'completedLetterBox';
} else if (self.isLocked) {
boxType = 'lockedLetterBox';
}
var box = self.attachAsset(boxType, {
anchorX: 0.5,
anchorY: 0.5
});
// Add letter text
var letterText = new Text2(letter, {
size: 120,
fill: self.isLocked ? "#666666" : "#FFFFFF"
});
letterText.anchor.set(0.5, 0.5);
letterText.x = 0;
letterText.y = 0;
self.addChild(letterText);
// Add star if completed
if (self.isCompleted) {
var star = self.attachAsset('star', {
anchorX: 0.5,
anchorY: 0.5,
x: 70,
y: -70
});
}
self.down = function (x, y, obj) {
if (!self.isLocked) {
// Scale animation on touch
tween(self, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100
});
tween(self, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100
});
// Switch to letter activity
currentGameState = 'letterActivity';
currentLetter = self.letter;
setupLetterActivity(self.letter);
}
};
return self;
});
var TraceDot = Container.expand(function (x, y, index) {
var self = Container.call(this);
self.x = x;
self.y = y;
self.index = index;
self.isCompleted = false;
var dot = self.attachAsset('traceDot', {
anchorX: 0.5,
anchorY: 0.5
});
self.complete = function () {
if (!self.isCompleted) {
self.isCompleted = true;
self.removeChild(dot);
var completedDot = self.attachAsset('completedDot', {
anchorX: 0.5,
anchorY: 0.5
});
// Celebration animation
tween(self, {
scaleX: 1.5,
scaleY: 1.5
}, {
duration: 200
});
tween(self, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200
});
LK.getSound('correctAction').play();
}
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x87CEEB
});
/****
* Game Code
****/
// X pattern is already implemented in the letterPatterns object
var currentGameState = 'letterSelection'; // 'letterSelection' or 'letterActivity'
var currentLetter = '';
var unlockedLetters = storage.unlockedLetters || 1; // Number of unlocked letters (A=1, B=2, etc.)
var completedLetters = storage.completedLetters || [];
var letterBoxes = [];
var traceDots = [];
var currentTraceIndex = 0;
// Letter patterns for tracing (properly positioned and shaped)
var letterPatterns = {
'A': [{
x: 1024,
y: 1400
}, {
x: 974,
y: 1500
}, {
x: 924,
y: 1600
}, {
x: 874,
y: 1700
}, {
x: 824,
y: 1800
}, {
x: 1024,
y: 1400
}, {
x: 1074,
y: 1500
}, {
x: 1124,
y: 1600
}, {
x: 1174,
y: 1700
}, {
x: 1224,
y: 1800
}, {
x: 874,
y: 1650
}, {
x: 924,
y: 1650
}, {
x: 974,
y: 1650
}, {
x: 1024,
y: 1650
}, {
x: 1074,
y: 1650
}, {
x: 1124,
y: 1650
}, {
x: 1174,
y: 1650
}],
'B': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1000,
y: 1400
}, {
x: 1100,
y: 1450
}, {
x: 1000,
y: 1600
}, {
x: 1100,
y: 1600
}, {
x: 1150,
y: 1750
}, {
x: 1000,
y: 1800
}],
'C': [{
x: 1150,
y: 1450
}, {
x: 1000,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 1000,
y: 1800
}, {
x: 1150,
y: 1750
}],
'D': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1000,
y: 1400
}, {
x: 1100,
y: 1450
}, {
x: 1150,
y: 1600
}, {
x: 1100,
y: 1750
}, {
x: 1000,
y: 1800
}],
'E': [{
x: 900,
y: 1400
}, {
x: 1000,
y: 1400
}, {
x: 1100,
y: 1400
}, {
x: 1150,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 1000,
y: 1600
}, {
x: 1050,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1000,
y: 1800
}, {
x: 1100,
y: 1800
}, {
x: 1150,
y: 1800
}],
'F': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1000,
y: 1400
}, {
x: 1100,
y: 1400
}, {
x: 1150,
y: 1400
}, {
x: 1000,
y: 1600
}, {
x: 1050,
y: 1600
}],
'G': [{
x: 1150,
y: 1450
}, {
x: 1000,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 1000,
y: 1800
}, {
x: 1150,
y: 1750
}, {
x: 1150,
y: 1650
}, {
x: 1100,
y: 1650
}],
'H': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 1000,
y: 1600
}, {
x: 1100,
y: 1600
}, {
x: 1100,
y: 1500
}, {
x: 1100,
y: 1400
}, {
x: 1100,
y: 1700
}, {
x: 1100,
y: 1800
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}],
'I': [{
x: 900,
y: 1400
}, {
x: 1000,
y: 1400
}, {
x: 1100,
y: 1400
}, {
x: 1000,
y: 1500
}, {
x: 1000,
y: 1600
}, {
x: 1000,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1000,
y: 1800
}, {
x: 1100,
y: 1800
}],
'J': [{
x: 850,
y: 1400
}, {
x: 950,
y: 1400
}, {
x: 1050,
y: 1400
}, {
x: 1150,
y: 1400
}, {
x: 1050,
y: 1500
}, {
x: 1050,
y: 1600
}, {
x: 1050,
y: 1700
}, {
x: 1000,
y: 1800
}, {
x: 900,
y: 1750
}],
'K': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1100,
y: 1400
}, {
x: 1050,
y: 1450
}, {
x: 1000,
y: 1500
}, {
x: 950,
y: 1550
}, {
x: 900,
y: 1600
}, {
x: 950,
y: 1650
}, {
x: 1000,
y: 1700
}, {
x: 1050,
y: 1750
}, {
x: 1100,
y: 1800
}],
'L': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1000,
y: 1800
}, {
x: 1100,
y: 1800
}, {
x: 1150,
y: 1800
}],
'M': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 950,
y: 1450
}, {
x: 1000,
y: 1500
}, {
x: 1024,
y: 1550
}, {
x: 1050,
y: 1500
}, {
x: 1100,
y: 1450
}, {
x: 1150,
y: 1400
}, {
x: 1150,
y: 1500
}, {
x: 1150,
y: 1600
}, {
x: 1150,
y: 1700
}, {
x: 1150,
y: 1800
}],
'N': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 950,
y: 1450
}, {
x: 1000,
y: 1500
}, {
x: 1050,
y: 1550
}, {
x: 1100,
y: 1600
}, {
x: 1150,
y: 1650
}, {
x: 1150,
y: 1400
}, {
x: 1150,
y: 1500
}, {
x: 1150,
y: 1600
}, {
x: 1150,
y: 1700
}, {
x: 1150,
y: 1800
}],
'O': [{
x: 1024,
y: 1400
}, {
x: 1100,
y: 1430
}, {
x: 1150,
y: 1500
}, {
x: 1150,
y: 1600
}, {
x: 1150,
y: 1700
}, {
x: 1100,
y: 1770
}, {
x: 1024,
y: 1800
}, {
x: 948,
y: 1770
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1500
}, {
x: 948,
y: 1430
}, {
x: 1024,
y: 1400
}],
'P': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1000,
y: 1400
}, {
x: 1100,
y: 1400
}, {
x: 1150,
y: 1450
}, {
x: 1150,
y: 1550
}, {
x: 1100,
y: 1600
}, {
x: 1000,
y: 1600
}],
'Q': [{
x: 1024,
y: 1400
}, {
x: 1100,
y: 1430
}, {
x: 1150,
y: 1500
}, {
x: 1150,
y: 1600
}, {
x: 1150,
y: 1700
}, {
x: 1100,
y: 1770
}, {
x: 1024,
y: 1800
}, {
x: 948,
y: 1770
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1500
}, {
x: 948,
y: 1430
}, {
x: 1024,
y: 1400
}, {
x: 1050,
y: 1650
}, {
x: 1100,
y: 1700
}, {
x: 1150,
y: 1750
}, {
x: 1200,
y: 1800
}],
'R': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1800
}, {
x: 1000,
y: 1400
}, {
x: 1100,
y: 1400
}, {
x: 1150,
y: 1450
}, {
x: 1150,
y: 1550
}, {
x: 1100,
y: 1600
}, {
x: 1000,
y: 1600
}, {
x: 1000,
y: 1650
}, {
x: 1050,
y: 1700
}, {
x: 1100,
y: 1750
}, {
x: 1150,
y: 1800
}],
'S': [{
x: 1150,
y: 1450
}, {
x: 1100,
y: 1400
}, {
x: 1000,
y: 1400
}, {
x: 950,
y: 1430
}, {
x: 900,
y: 1480
}, {
x: 900,
y: 1530
}, {
x: 950,
y: 1580
}, {
x: 1000,
y: 1600
}, {
x: 1050,
y: 1600
}, {
x: 1100,
y: 1620
}, {
x: 1150,
y: 1670
}, {
x: 1150,
y: 1720
}, {
x: 1100,
y: 1770
}, {
x: 1000,
y: 1800
}, {
x: 950,
y: 1800
}, {
x: 900,
y: 1750
}],
'T': [{
x: 850,
y: 1400
}, {
x: 950,
y: 1400
}, {
x: 1050,
y: 1400
}, {
x: 1150,
y: 1400
}, {
x: 1200,
y: 1400
}, {
x: 1024,
y: 1400
}, {
x: 1024,
y: 1500
}, {
x: 1024,
y: 1600
}, {
x: 1024,
y: 1700
}, {
x: 1024,
y: 1800
}],
'U': [{
x: 900,
y: 1400
}, {
x: 900,
y: 1500
}, {
x: 900,
y: 1600
}, {
x: 900,
y: 1700
}, {
x: 950,
y: 1770
}, {
x: 1000,
y: 1800
}, {
x: 1050,
y: 1800
}, {
x: 1100,
y: 1770
}, {
x: 1150,
y: 1700
}, {
x: 1150,
y: 1600
}, {
x: 1150,
y: 1500
}, {
x: 1150,
y: 1400
}],
'V': [{
x: 900,
y: 1400
}, {
x: 920,
y: 1500
}, {
x: 940,
y: 1600
}, {
x: 960,
y: 1700
}, {
x: 980,
y: 1750
}, {
x: 1000,
y: 1780
}, {
x: 1024,
y: 1800
}, {
x: 1048,
y: 1780
}, {
x: 1068,
y: 1750
}, {
x: 1088,
y: 1700
}, {
x: 1108,
y: 1600
}, {
x: 1128,
y: 1500
}, {
x: 1150,
y: 1400
}],
'W': [{
x: 850,
y: 1400
}, {
x: 870,
y: 1500
}, {
x: 890,
y: 1600
}, {
x: 910,
y: 1700
}, {
x: 930,
y: 1750
}, {
x: 950,
y: 1800
}, {
x: 970,
y: 1750
}, {
x: 990,
y: 1700
}, {
x: 1010,
y: 1650
}, {
x: 1024,
y: 1600
}, {
x: 1038,
y: 1650
}, {
x: 1058,
y: 1700
}, {
x: 1078,
y: 1750
}, {
x: 1098,
y: 1800
}, {
x: 1118,
y: 1750
}, {
x: 1138,
y: 1700
}, {
x: 1158,
y: 1600
}, {
x: 1178,
y: 1500
}, {
x: 1200,
y: 1400
}],
'X': [{
x: 900,
y: 1400
}, {
x: 950,
y: 1450
}, {
x: 1000,
y: 1500
}, {
x: 1050,
y: 1550
}, {
x: 1100,
y: 1600
}, {
x: 1150,
y: 1650
}, {
x: 1200,
y: 1700
}, {
x: 1150,
y: 1750
}, {
x: 1100,
y: 1800
}, {
x: 1200,
y: 1400
}, {
x: 1150,
y: 1450
}, {
x: 1100,
y: 1500
}, {
x: 1050,
y: 1550
}, {
x: 1000,
y: 1600
}, {
x: 950,
y: 1650
}, {
x: 900,
y: 1700
}, {
x: 850,
y: 1750
}, {
x: 800,
y: 1800
}],
'Y': [{
x: 900,
y: 1400
}, {
x: 950,
y: 1450
}, {
x: 1000,
y: 1500
}, {
x: 1024,
y: 1550
}, {
x: 1024,
y: 1600
}, {
x: 1024,
y: 1650
}, {
x: 1024,
y: 1700
}, {
x: 1024,
y: 1750
}, {
x: 1024,
y: 1800
}, {
x: 1048,
y: 1500
}, {
x: 1098,
y: 1450
}, {
x: 1150,
y: 1400
}],
'Z': [{
x: 900,
y: 1400
}, {
x: 950,
y: 1400
}, {
x: 1000,
y: 1400
}, {
x: 1050,
y: 1400
}, {
x: 1100,
y: 1400
}, {
x: 1150,
y: 1400
}, {
x: 1100,
y: 1500
}, {
x: 1050,
y: 1550
}, {
x: 1000,
y: 1600
}, {
x: 950,
y: 1650
}, {
x: 900,
y: 1700
}, {
x: 900,
y: 1750
}, {
x: 900,
y: 1800
}, {
x: 950,
y: 1800
}, {
x: 1000,
y: 1800
}, {
x: 1050,
y: 1800
}, {
x: 1100,
y: 1800
}, {
x: 1150,
y: 1800
}]
};
// Add more basic patterns for other letters
for (var i = 0; i < 26; i++) {
var letter = String.fromCharCode(65 + i);
if (!letterPatterns[letter]) {
// Simple default pattern for letters not defined - centered and properly sized
letterPatterns[letter] = [{
x: 924,
y: 1400
}, {
x: 974,
y: 1500
}, {
x: 1024,
y: 1600
}, {
x: 1074,
y: 1700
}, {
x: 1124,
y: 1800
}];
}
}
// UI Elements
var titleText = new Text2('ABC Learning Adventure', {
size: 100,
fill: 0x2E7D32
});
titleText.anchor.set(0.5, 0);
LK.gui.top.addChild(titleText);
var backButton = new Text2('← Back', {
size: 80,
fill: 0x1976D2
});
backButton.anchor.set(0, 0);
backButton.x = 150;
backButton.y = 100;
var progressText = new Text2('Progress: 0/26', {
size: 60,
fill: 0x424242
});
progressText.anchor.set(0.5, 0);
progressText.x = 1024;
progressText.y = 200;
function setupLetterSelection() {
currentGameState = 'letterSelection';
// Clear existing elements
game.removeChildren();
// Add progress text
game.addChild(progressText);
progressText.setText('Progress: ' + completedLetters.length + '/26');
// Add restart button
var restartButton = new Text2('🔄 Restart', {
size: 60,
fill: 0xE53935
});
restartButton.anchor.set(1, 0);
restartButton.x = 1900;
restartButton.y = 200;
game.addChild(restartButton);
// Create letter grid (6x5 layout with last row having 2 letters)
letterBoxes = [];
var startX = 200;
var startY = 400;
var spacing = 300;
for (var i = 0; i < 26; i++) {
var letter = String.fromCharCode(65 + i);
var row = Math.floor(i / 6);
var col = i % 6;
// Center the last row (U, V, W, X, Y, Z)
var x = startX + col * spacing;
if (row === 4) {
x = startX + (col + 1) * spacing;
}
var y = startY + row * spacing;
var isCompleted = completedLetters.indexOf(letter) !== -1;
var isLocked = i + 1 > unlockedLetters;
var letterBox = new LetterBox(letter, isCompleted, isLocked);
letterBox.x = x;
letterBox.y = y;
letterBoxes.push(letterBox);
game.addChild(letterBox);
}
}
function setupLetterActivity(letter) {
currentGameState = 'letterActivity';
// Clear existing elements
game.removeChildren();
// Add background
var background = game.attachAsset('traceBackground', {
anchorX: 0.5,
anchorY: 0.5,
x: 1024,
y: 1366
});
// Add back button
game.addChild(backButton);
// Add instruction text
var instructionText = new Text2('Trace the letter ' + letter + ' by touching the dots in order', {
size: 80,
fill: 0x2E7D32
});
instructionText.anchor.set(0.5, 0.5);
instructionText.x = 1024;
instructionText.y = 300;
game.addChild(instructionText);
// Add starting point instruction
var startText = new Text2('Look for "START" to see where to begin!', {
size: 60,
fill: 0xFF5722
});
startText.anchor.set(0.5, 0.5);
startText.x = 1024;
startText.y = 380;
game.addChild(startText);
// Note: Number indicators removed since dots are now randomly positioned
// Create trace dots with fixed positions from pattern
traceDots = [];
currentTraceIndex = 0;
var pattern = letterPatterns[letter];
var dotNumbers = []; // Array to store number indicators
for (var i = 0; i < pattern.length; i++) {
var dot = new TraceDot(pattern[i].x, pattern[i].y, i);
traceDots.push(dot);
game.addChild(dot);
// Add number indicator for each dot (1-10, then continue with higher numbers)
var numberText = (i + 1).toString();
var numberIndicator = new Text2(numberText, {
size: 50,
fill: 0x000000
});
numberIndicator.anchor.set(0.5, 0.5);
numberIndicator.x = pattern[i].x;
numberIndicator.y = pattern[i].y;
// Add white circle background for better visibility
var numberBackground = LK.getAsset('traceDot', {
anchorX: 0.5,
anchorY: 0.5,
x: pattern[i].x,
y: pattern[i].y,
scaleX: 1.2,
scaleY: 1.2
});
numberBackground.tint = 0xFFFFFF;
game.addChild(numberBackground);
// Add number to front
game.addChild(numberIndicator);
dotNumbers.push({
number: numberIndicator,
background: numberBackground
});
}
// Add starting point indicator for the first dot
if (traceDots.length > 0) {
var startIndicator = new Text2('START', {
size: 40,
fill: 0xFF5722
});
startIndicator.anchor.set(0.5, 0.5);
startIndicator.x = traceDots[0].x;
startIndicator.y = traceDots[0].y - 60;
game.addChild(startIndicator);
// Add arrow pointing to start
var arrowText = new Text2('↓', {
size: 60,
fill: 0xFF5722
});
arrowText.anchor.set(0.5, 0.5);
arrowText.x = traceDots[0].x;
arrowText.y = traceDots[0].y - 30;
game.addChild(arrowText);
// Animate the starting indicators
tween(startIndicator, {
alpha: 0.3
}, {
duration: 800
});
tween(startIndicator, {
alpha: 1.0
}, {
duration: 800
});
tween(arrowText, {
alpha: 0.3
}, {
duration: 800
});
tween(arrowText, {
alpha: 1.0
}, {
duration: 800
});
// Animate the first number
if (dotNumbers.length > 0) {
tween(dotNumbers[0].number, {
alpha: 0.3
}, {
duration: 800
});
tween(dotNumbers[0].number, {
alpha: 1.0
}, {
duration: 800
});
}
}
// Highlight first dot
if (traceDots.length > 0) {
tween(traceDots[0], {
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 500
});
tween(traceDots[0], {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 500
});
}
}
function completeLetterActivity() {
// Mark letter as completed
if (completedLetters.indexOf(currentLetter) === -1) {
completedLetters.push(currentLetter);
storage.completedLetters = completedLetters;
// Unlock next letter
var letterIndex = currentLetter.charCodeAt(0) - 65;
if (letterIndex + 2 > unlockedLetters) {
unlockedLetters = letterIndex + 2;
storage.unlockedLetters = unlockedLetters;
}
// Add the completed letter on the paper
var letterOnPaper = new Text2(currentLetter, {
size: 400,
fill: 0x1B5E20
});
letterOnPaper.anchor.set(0.5, 0.5);
letterOnPaper.x = 1024;
letterOnPaper.y = 1600;
letterOnPaper.alpha = 1;
letterOnPaper.scaleX = 1.0;
letterOnPaper.scaleY = 1.0;
game.addChild(letterOnPaper);
// Animate letter appearing on paper with dramatic effect
tween(letterOnPaper, {
alpha: 1,
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 1000
});
tween(letterOnPaper, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 600
});
// Play celebration sound
LK.getSound('celebration').play();
// Flash screen green
LK.effects.flashScreen(0x4CAF50, 1000);
// Show completion message
var completionText = new Text2('Great job! Letter ' + currentLetter + ' completed!', {
size: 80,
fill: 0x2E7D32
});
completionText.anchor.set(0.5, 0.5);
completionText.x = 1024;
completionText.y = 2000;
game.addChild(completionText);
// Animate completion text
tween(completionText, {
y: 1200
}, {
duration: 1000
});
// Return to letter selection after delay
LK.setTimeout(function () {
setupLetterSelection();
}, 3000);
}
}
// Restart function to reset game state
function restartGame() {
// Reset game state variables
currentGameState = 'letterSelection';
currentLetter = '';
currentTraceIndex = 0;
// Clear arrays
letterBoxes = [];
traceDots = [];
// Reset progress - uncommented to fully restart the game
unlockedLetters = 1;
completedLetters = [];
storage.unlockedLetters = unlockedLetters;
storage.completedLetters = completedLetters;
// Return to letter selection
setupLetterSelection();
}
// Event handlers
game.down = function (x, y, obj) {
if (currentGameState === 'letterSelection') {
// Check if restart button was clicked
if (x >= 1700 && x <= 1900 && y >= 200 && y <= 280) {
restartGame();
return;
}
}
if (currentGameState === 'letterActivity') {
// Check if back button was clicked
if (x >= 100 && x <= 300 && y >= 50 && y <= 150) {
restartGame();
return;
}
// Check if current trace dot was touched
if (currentTraceIndex < traceDots.length) {
var currentDot = traceDots[currentTraceIndex];
var distance = Math.sqrt(Math.pow(x - currentDot.x, 2) + Math.pow(y - currentDot.y, 2));
if (distance < 80) {
currentDot.complete();
// Hide the number indicator for the completed dot
if (dotNumbers && dotNumbers[currentTraceIndex]) {
dotNumbers[currentTraceIndex].number.alpha = 0;
dotNumbers[currentTraceIndex].background.alpha = 0;
}
currentTraceIndex++;
// Highlight next dot
if (currentTraceIndex < traceDots.length) {
var nextDot = traceDots[currentTraceIndex];
tween(nextDot, {
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 300
});
tween(nextDot, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 300
});
} else {
// All dots completed
LK.getSound('letterComplete').play();
LK.setTimeout(function () {
completeLetterActivity();
}, 1000);
}
}
}
}
};
game.update = function () {
// Update any ongoing animations or game logic
if (currentGameState === 'letterActivity') {
// Removed floating animation to prevent letters from moving
}
};
// Initialize the game
setupLetterSelection(); ===================================================================
--- original.js
+++ change.js
@@ -1263,12 +1263,39 @@
// Create trace dots with fixed positions from pattern
traceDots = [];
currentTraceIndex = 0;
var pattern = letterPatterns[letter];
+ var dotNumbers = []; // Array to store number indicators
for (var i = 0; i < pattern.length; i++) {
var dot = new TraceDot(pattern[i].x, pattern[i].y, i);
traceDots.push(dot);
game.addChild(dot);
+ // Add number indicator for each dot (1-10, then continue with higher numbers)
+ var numberText = (i + 1).toString();
+ var numberIndicator = new Text2(numberText, {
+ size: 50,
+ fill: 0x000000
+ });
+ numberIndicator.anchor.set(0.5, 0.5);
+ numberIndicator.x = pattern[i].x;
+ numberIndicator.y = pattern[i].y;
+ // Add white circle background for better visibility
+ var numberBackground = LK.getAsset('traceDot', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: pattern[i].x,
+ y: pattern[i].y,
+ scaleX: 1.2,
+ scaleY: 1.2
+ });
+ numberBackground.tint = 0xFFFFFF;
+ game.addChild(numberBackground);
+ // Add number to front
+ game.addChild(numberIndicator);
+ dotNumbers.push({
+ number: numberIndicator,
+ background: numberBackground
+ });
}
// Add starting point indicator for the first dot
if (traceDots.length > 0) {
var startIndicator = new Text2('START', {
@@ -1278,31 +1305,8 @@
startIndicator.anchor.set(0.5, 0.5);
startIndicator.x = traceDots[0].x;
startIndicator.y = traceDots[0].y - 60;
game.addChild(startIndicator);
- // Add number 1 indicator
- var numberOne = new Text2('1', {
- size: 60,
- fill: 0x000000
- });
- numberOne.anchor.set(0.5, 0.5);
- numberOne.x = traceDots[0].x;
- numberOne.y = traceDots[0].y;
- game.addChild(numberOne);
- // Add white circle background for better visibility
- var numberBackground = LK.getAsset('traceDot', {
- anchorX: 0.5,
- anchorY: 0.5,
- x: traceDots[0].x,
- y: traceDots[0].y,
- scaleX: 1.5,
- scaleY: 1.5
- });
- numberBackground.tint = 0xFFFFFF;
- game.addChild(numberBackground);
- // Move number to front
- game.removeChild(numberOne);
- game.addChild(numberOne);
// Add arrow pointing to start
var arrowText = new Text2('↓', {
size: 60,
fill: 0xFF5722
@@ -1331,18 +1335,21 @@
alpha: 1.0
}, {
duration: 800
});
- tween(numberOne, {
- alpha: 0.3
- }, {
- duration: 800
- });
- tween(numberOne, {
- alpha: 1.0
- }, {
- duration: 800
- });
+ // Animate the first number
+ if (dotNumbers.length > 0) {
+ tween(dotNumbers[0].number, {
+ alpha: 0.3
+ }, {
+ duration: 800
+ });
+ tween(dotNumbers[0].number, {
+ alpha: 1.0
+ }, {
+ duration: 800
+ });
+ }
}
// Highlight first dot
if (traceDots.length > 0) {
tween(traceDots[0], {
@@ -1458,8 +1465,13 @@
var currentDot = traceDots[currentTraceIndex];
var distance = Math.sqrt(Math.pow(x - currentDot.x, 2) + Math.pow(y - currentDot.y, 2));
if (distance < 80) {
currentDot.complete();
+ // Hide the number indicator for the completed dot
+ if (dotNumbers && dotNumbers[currentTraceIndex]) {
+ dotNumbers[currentTraceIndex].number.alpha = 0;
+ dotNumbers[currentTraceIndex].background.alpha = 0;
+ }
currentTraceIndex++;
// Highlight next dot
if (currentTraceIndex < traceDots.length) {
var nextDot = traceDots[currentTraceIndex];
Images
:quality(85)/https:%2F%2Fcdn.frvr.ai/6867e10d1087c4351564d854.png%3F3)
Fullscreen modern App Store landscape banner, 16:9, high definition, for a game titled "ABC Learning Adventure" and with the description "An educational alphabet learning game where children interact with letters A-Z through touch-based puzzles and mini-games, designed to make learning the alphabet fun and engaging.". No text on banner!
:quality(85)/https:%2F%2Fcdn.frvr.ai/686a7380a14c5895b468b410.png%3F3)
star. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/686a758fa14c5895b468b445.png%3F3)
horizontal papel blanco. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/686ad6485077e63ce68b4c46.png%3F3)
Cuadrado verde con lados circulares. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/686ad7015077e63ce68b4c62.png%3F3)
Cuadrado gris con lados circulares
:quality(85)/https:%2F%2Fcdn.frvr.ai/686bd5b89d0ae03221f7ab2f.png%3F3)
Palm tree. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/686bd6a79d0ae03221f7ab42.png%3F3)
Grass. In-Game asset. 2d. High contrast. No shadows
Used plugins
@upit/tween@upit/storage
