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
p
User prompt
o
User prompt
n
User prompt
m
User prompt
l
User prompt
arreglar la letra k
User prompt
areglar la f
User prompt
poner la e bien
User prompt
quitar lo de que hagan las letras de donde quirn
User prompt
areglar la letra a
User prompt
que hagan las letras de donde quieran
User prompt
que en las que tienes que tocar 2 veces que ponga un 2
User prompt
que las letras no se muevan hacia abajo
User prompt
haz la a bien
User prompt
Que las letras que tienes que trazar estén bien puestas i escitas
User prompt
Más abajo
User prompt
Más abajo
User prompt
Que la letra que tienes que trazar este mas abajo
User prompt
Que las letras que tienes que hacer estén más abajo
User prompt
Poner las letras más abajo
User prompt
Poner las letras más abajo
User prompt
Que se pueda volver a comenzar
User prompt
Quitar errores de las letras
User prompt
Que salga la letra
User prompt
Pon las letras en el papel
/****
* 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
****/
// Game state variables
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
}]
};
// 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);
// 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];
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);
}
// 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 (optional - comment out if you want to keep progress)
// 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();
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
@@ -647,8 +647,42 @@
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
}]
};
// Add more basic patterns for other letters
for (var i = 0; i < 26; i++) {
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
