User prompt
Add a litte margin for the playing cards.
User prompt
You destroyed the whole game. Please remove all animations and hovering effects and return the game the old version before adding animations.
User prompt
When hovering a button, make the button's opacity 0.5. When hovering is over make the button's opacity 1 again. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot set properties of undefined (setting 'cursor')' in or related to this line: 'game.style.cursor = 'pointer';' Line Number: 466
User prompt
When I hover a button, all the buttons has animation. Please fix it. I want solo animation for each button. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
The hover animations u made are wrong. When I hover a button, it should has solo animation. And when the hovering is over, it should return to the same position. Besides, make the cursor pointer when hovering to the buttons. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Now add hover animations to all the buttons. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
The texts indicating the level should be a little smaller.
User prompt
The main menu buttons should have same paddings.
User prompt
A little more margin for the texts please.
User prompt
Add margin between the texts indicating level and how many cards.
User prompt
U are making all the text bigger. Please don't do this. The text indicating level (easy, medium and hard) should be bigger and bolder comparing the text indicating how many cards (12 cards, 20 cars and 28 cards)
User prompt
The text indicating levels should be bigger and more bolder.
User prompt
The text indicating how many cards should be smaller.
User prompt
Make the button text on the main menu a bit bigger. Make the text indicating the level bold and in larger letters. And above the number indicating how many cards there are.
User prompt
The easy, medium and hard texts should stay top and center of the "x Cards" text.
User prompt
The texts "easy, medium, and hard" should be bold and should stay at the center of the button.
User prompt
Make the game level buttons rectangular with long top edges and short side edges.
User prompt
Make the “Restart” and “Menu” buttons rectangular with long top edges and short side edges.
User prompt
"Restart" and "menu" buttons need padding too.
User prompt
Change the difficulties. Easy game has 12 cards, medium game has 20 cards, hard game has 28 cards.
User prompt
The texts are overflowing. Add some paddings for the buttons.
User prompt
During the game, player may want to return the level selecting menu or restart the game.
User prompt
Before the game starts, player should select the level. Easy, medium and hard. Easy has 16 cards, medium has 32 cards, hard has 64 cards.
User prompt
When the cards paired, throw them away with animation. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Card = Container.expand(function (cardType) {
var self = Container.call(this);
self.cardType = cardType;
self.isFlipped = false;
self.isMatched = false;
self.isAnimating = false;
var cardBackAsset = 'cardBack';
var cardFrontAsset = 'cardFront' + cardType;
self.backGraphics = self.attachAsset(cardBackAsset, {
anchorX: 0.5,
anchorY: 0.5
});
self.frontGraphics = self.attachAsset(cardFrontAsset, {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0
});
self.flip = function (showFront) {
if (self.isAnimating) return;
self.isAnimating = true;
LK.getSound('cardFlip').play();
// First half of flip animation - scale to 0 on X axis
tween(self, {
scaleX: 0
}, {
duration: 150,
easing: tween.easeIn,
onFinish: function onFinish() {
// Switch visibility
if (showFront) {
self.backGraphics.alpha = 0;
self.frontGraphics.alpha = 1;
self.isFlipped = true;
} else {
self.backGraphics.alpha = 1;
self.frontGraphics.alpha = 0;
self.isFlipped = false;
}
// Second half of flip animation - scale back to 1
tween(self, {
scaleX: 1
}, {
duration: 150,
easing: tween.easeOut,
onFinish: function onFinish() {
self.isAnimating = false;
}
});
}
});
};
self.setMatched = function () {
self.isMatched = true;
// Slightly fade matched cards
tween(self, {
alpha: 0.7
}, {
duration: 300
});
};
self.throwAway = function () {
if (self.isAnimating) return;
self.isAnimating = true;
// Random direction for throwing
var randomDirection = Math.random() > 0.5 ? 1 : -1;
var throwDistance = 500 + Math.random() * 300;
var targetX = self.x + randomDirection * throwDistance;
var targetY = self.y - 200 - Math.random() * 200;
// Throw animation with rotation and scaling
tween(self, {
x: targetX,
y: targetY,
rotation: randomDirection * (Math.PI + Math.random() * Math.PI),
scaleX: 0.3,
scaleY: 0.3,
alpha: 0
}, {
duration: 800,
easing: tween.easeOut,
onFinish: function onFinish() {
self.destroy();
}
});
};
self.down = function (x, y, obj) {
if (!gameStarted) return;
if (self.isAnimating || self.isFlipped || self.isMatched) return;
if (flippedCards.length >= 2) return;
self.flip(true);
flippedCards.push(self);
if (flippedCards.length === 2) {
moves++;
movesText.setText('Moves: ' + moves);
LK.setTimeout(function () {
checkMatch();
}, 1000);
}
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x2d3436
});
/****
* Game Code
****/
var gridRows = 3;
var gridCols = 4;
var totalPairs = gridRows * gridCols / 2;
var cards = [];
var flippedCards = [];
var matchedPairs = 0;
var moves = 0;
var gameStarted = false;
var selectedLevel = null;
// Create UI elements
var titleText = new Text2('Memory Match', {
size: 120,
fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0);
LK.gui.top.addChild(titleText);
titleText.y = 100;
var movesText = new Text2('Moves: 0', {
size: 80,
fill: 0xFFFFFF
});
movesText.anchor.set(0.5, 0);
LK.gui.top.addChild(movesText);
movesText.y = 250;
var pairsText = new Text2('Pairs: 0/' + totalPairs, {
size: 80,
fill: 0xFFFFFF
});
pairsText.anchor.set(0.5, 0);
LK.gui.top.addChild(pairsText);
pairsText.y = 350;
// Hide game UI initially
movesText.alpha = 0;
pairsText.alpha = 0;
// Create pause/menu button
var menuButton = LK.getAsset('cardBack', {
anchorX: 0.5,
anchorY: 0.5
});
menuButton.x = 2048 - 150;
menuButton.y = 150;
menuButton.scaleX = 0.6;
menuButton.scaleY = 0.25;
menuButton.alpha = 0; // Hidden initially
game.addChild(menuButton);
var menuButtonText = new Text2('MENU', {
size: 28,
fill: 0xFFFFFF
});
menuButtonText.anchor.set(0.5, 0.5);
menuButtonText.x = menuButton.x;
menuButtonText.y = menuButton.y;
menuButtonText.alpha = 0; // Hidden initially
game.addChild(menuButtonText);
// Menu button click handler
menuButton.down = function () {
if (!gameStarted) return;
returnToLevelSelect();
};
// Create restart button
var restartButton = LK.getAsset('cardFront4', {
anchorX: 0.5,
anchorY: 0.5
});
restartButton.x = 2048 - 300;
restartButton.y = 150;
restartButton.scaleX = 0.6;
restartButton.scaleY = 0.25;
restartButton.alpha = 0; // Hidden initially
game.addChild(restartButton);
var restartButtonText = new Text2('RESTART', {
size: 24,
fill: 0xFFFFFF
});
restartButtonText.anchor.set(0.5, 0.5);
restartButtonText.x = restartButton.x;
restartButtonText.y = restartButton.y;
restartButtonText.alpha = 0; // Hidden initially
game.addChild(restartButtonText);
// Restart button click handler
restartButton.down = function () {
if (!gameStarted) return;
restartCurrentGame();
};
// Create level selection screen
var levelSelectText = new Text2('Select Difficulty', {
size: 100,
fill: 0xFFFFFF
});
levelSelectText.anchor.set(0.5, 0.5);
levelSelectText.x = 2048 / 2;
levelSelectText.y = 1000;
game.addChild(levelSelectText);
// Create level buttons
var easyButton = LK.getAsset('cardFront2', {
anchorX: 0.5,
anchorY: 0.5
});
easyButton.scaleX = 1.5;
easyButton.scaleY = 0.8;
easyButton.x = 2048 / 2;
easyButton.y = 1300;
game.addChild(easyButton);
var easyButtonText = new Text2('EASY', {
size: 90,
fill: 0xFFFFFF,
fontWeight: 'bolder'
});
var easyCardText = new Text2('12 Cards', {
size: 40,
fill: 0xFFFFFF
});
easyButtonText.anchor.set(0.5, 0.5);
easyButtonText.x = easyButton.x;
easyButtonText.y = easyButton.y - 20;
game.addChild(easyButtonText);
easyCardText.anchor.set(0.5, 0.5);
easyCardText.x = easyButton.x;
easyCardText.y = easyButton.y + 25;
game.addChild(easyCardText);
var mediumButton = LK.getAsset('cardFront4', {
anchorX: 0.5,
anchorY: 0.5
});
mediumButton.scaleX = 1.5;
mediumButton.scaleY = 0.8;
mediumButton.x = 2048 / 2;
mediumButton.y = 1650;
game.addChild(mediumButton);
var mediumButtonText = new Text2('MEDIUM', {
size: 90,
fill: 0xFFFFFF,
fontWeight: 'bolder'
});
var mediumCardText = new Text2('20 Cards', {
size: 40,
fill: 0xFFFFFF
});
mediumButtonText.anchor.set(0.5, 0.5);
mediumButtonText.x = mediumButton.x;
mediumButtonText.y = mediumButton.y - 20;
game.addChild(mediumButtonText);
mediumCardText.anchor.set(0.5, 0.5);
mediumCardText.x = mediumButton.x;
mediumCardText.y = mediumButton.y + 25;
game.addChild(mediumCardText);
var hardButton = LK.getAsset('cardFront6', {
anchorX: 0.5,
anchorY: 0.5
});
hardButton.scaleX = 1.5;
hardButton.scaleY = 0.8;
hardButton.x = 2048 / 2;
hardButton.y = 2000;
game.addChild(hardButton);
var hardButtonText = new Text2('HARD', {
size: 90,
fill: 0xFFFFFF,
fontWeight: 'bolder'
});
var hardCardText = new Text2('28 Cards', {
size: 40,
fill: 0xFFFFFF
});
hardButtonText.anchor.set(0.5, 0.5);
hardButtonText.x = hardButton.x;
hardButtonText.y = hardButton.y - 20;
game.addChild(hardButtonText);
hardCardText.anchor.set(0.5, 0.5);
hardCardText.x = hardButton.x;
hardCardText.y = hardButton.y + 25;
game.addChild(hardCardText);
// Button click handlers
easyButton.down = function () {
if (gameStarted) return;
startGame('easy');
};
mediumButton.down = function () {
if (gameStarted) return;
startGame('medium');
};
hardButton.down = function () {
if (gameStarted) return;
startGame('hard');
};
function startGame(level) {
gameStarted = true;
selectedLevel = level;
// Set grid dimensions based on level
if (level === 'easy') {
gridRows = 3;
gridCols = 4;
} else if (level === 'medium') {
gridRows = 4;
gridCols = 5;
} else if (level === 'hard') {
gridRows = 4;
gridCols = 7;
}
totalPairs = gridRows * gridCols / 2;
// Hide level selection UI
levelSelectText.alpha = 0;
easyButton.alpha = 0;
easyButtonText.alpha = 0;
easyCardText.alpha = 0;
mediumButton.alpha = 0;
mediumButtonText.alpha = 0;
mediumCardText.alpha = 0;
hardButton.alpha = 0;
hardButtonText.alpha = 0;
hardCardText.alpha = 0;
// Show game UI
movesText.alpha = 1;
pairsText.alpha = 1;
pairsText.setText('Pairs: 0/' + totalPairs);
// Show menu and restart buttons
menuButton.alpha = 1;
menuButtonText.alpha = 1;
restartButton.alpha = 1;
restartButtonText.alpha = 1;
// Generate card types for pairs
var cardTypes = [];
for (var i = 1; i <= totalPairs; i++) {
cardTypes.push(i);
cardTypes.push(i); // Add each type twice for pairs
}
// Shuffle the card types
cardTypes = shuffleArray(cardTypes);
// Calculate grid positioning
var cardWidth = 220;
var cardHeight = 280;
var cardSpacing = 20;
// Adjust card size for hard mode
if (level === 'hard') {
cardWidth = 180;
cardHeight = 230;
cardSpacing = 15;
} else if (level === 'medium') {
cardWidth = 200;
cardHeight = 255;
cardSpacing = 18;
}
var gridWidth = cardWidth * gridCols + cardSpacing * (gridCols - 1);
var gridHeight = cardHeight * gridRows + cardSpacing * (gridRows - 1);
var startX = (2048 - gridWidth) / 2 + cardWidth / 2;
var startY = (2732 - gridHeight) / 2 + cardHeight / 2 + 200; // Offset for UI
// Create and position cards
var cardIndex = 0;
for (var row = 0; row < gridRows; row++) {
for (var col = 0; col < gridCols; col++) {
var card = new Card(cardTypes[cardIndex]);
card.scaleX = cardWidth / 220; // Scale based on original card size
card.scaleY = cardHeight / 280;
var cardX = startX + col * (cardWidth + cardSpacing);
var cardY = startY + row * (cardHeight + cardSpacing);
card.x = cardX;
card.y = cardY;
cards.push(card);
game.addChild(card);
cardIndex++;
}
}
}
// Shuffle function
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function returnToLevelSelect() {
// Reset game state
gameStarted = false;
selectedLevel = null;
moves = 0;
matchedPairs = 0;
flippedCards = [];
// Clear all cards
for (var i = cards.length - 1; i >= 0; i--) {
cards[i].destroy();
}
cards = [];
// Hide game UI
movesText.alpha = 0;
pairsText.alpha = 0;
menuButton.alpha = 0;
menuButtonText.alpha = 0;
restartButton.alpha = 0;
restartButtonText.alpha = 0;
// Show level selection UI
levelSelectText.alpha = 1;
easyButton.alpha = 1;
easyButtonText.alpha = 1;
easyCardText.alpha = 1;
mediumButton.alpha = 1;
mediumButtonText.alpha = 1;
mediumCardText.alpha = 1;
hardButton.alpha = 1;
hardButtonText.alpha = 1;
hardCardText.alpha = 1;
}
function restartCurrentGame() {
if (!selectedLevel) return;
// Clear current game
for (var i = cards.length - 1; i >= 0; i--) {
cards[i].destroy();
}
cards = [];
// Reset game variables
moves = 0;
matchedPairs = 0;
flippedCards = [];
movesText.setText('Moves: 0');
// Restart with same level
var levelToRestart = selectedLevel;
gameStarted = false; // Temporarily set to false for startGame function
startGame(levelToRestart);
}
function checkMatch() {
if (flippedCards.length !== 2) return;
var card1 = flippedCards[0];
var card2 = flippedCards[1];
if (card1.cardType === card2.cardType) {
// Match found
LK.getSound('match').play();
// Throw away matched cards with animation
LK.setTimeout(function () {
card1.throwAway();
card2.throwAway();
}, 300);
matchedPairs++;
pairsText.setText('Pairs: ' + matchedPairs + '/' + totalPairs);
// Check for win condition
if (matchedPairs === totalPairs) {
LK.setTimeout(function () {
LK.showYouWin();
}, 1500);
}
} else {
// No match
LK.getSound('noMatch').play();
card1.flip(false);
card2.flip(false);
}
flippedCards = [];
}
game.update = function () {
// Game logic is handled by card interactions and timeouts
}; ===================================================================
--- original.js
+++ change.js
@@ -219,17 +219,25 @@
easyButton.scaleY = 0.8;
easyButton.x = 2048 / 2;
easyButton.y = 1300;
game.addChild(easyButton);
-var easyButtonText = new Text2('EASY\n12 Cards', {
- size: 70,
+var easyButtonText = new Text2('EASY', {
+ size: 90,
fill: 0xFFFFFF,
fontWeight: 'bolder'
});
-easyButtonText.anchor.set(0.5, 0.3);
+var easyCardText = new Text2('12 Cards', {
+ size: 40,
+ fill: 0xFFFFFF
+});
+easyButtonText.anchor.set(0.5, 0.5);
easyButtonText.x = easyButton.x;
-easyButtonText.y = easyButton.y;
+easyButtonText.y = easyButton.y - 20;
game.addChild(easyButtonText);
+easyCardText.anchor.set(0.5, 0.5);
+easyCardText.x = easyButton.x;
+easyCardText.y = easyButton.y + 25;
+game.addChild(easyCardText);
var mediumButton = LK.getAsset('cardFront4', {
anchorX: 0.5,
anchorY: 0.5
});
@@ -237,17 +245,25 @@
mediumButton.scaleY = 0.8;
mediumButton.x = 2048 / 2;
mediumButton.y = 1650;
game.addChild(mediumButton);
-var mediumButtonText = new Text2('MEDIUM\n20 Cards', {
- size: 70,
+var mediumButtonText = new Text2('MEDIUM', {
+ size: 90,
fill: 0xFFFFFF,
fontWeight: 'bolder'
});
-mediumButtonText.anchor.set(0.5, 0.3);
+var mediumCardText = new Text2('20 Cards', {
+ size: 40,
+ fill: 0xFFFFFF
+});
+mediumButtonText.anchor.set(0.5, 0.5);
mediumButtonText.x = mediumButton.x;
-mediumButtonText.y = mediumButton.y;
+mediumButtonText.y = mediumButton.y - 20;
game.addChild(mediumButtonText);
+mediumCardText.anchor.set(0.5, 0.5);
+mediumCardText.x = mediumButton.x;
+mediumCardText.y = mediumButton.y + 25;
+game.addChild(mediumCardText);
var hardButton = LK.getAsset('cardFront6', {
anchorX: 0.5,
anchorY: 0.5
});
@@ -255,17 +271,25 @@
hardButton.scaleY = 0.8;
hardButton.x = 2048 / 2;
hardButton.y = 2000;
game.addChild(hardButton);
-var hardButtonText = new Text2('HARD\n28 Cards', {
- size: 70,
+var hardButtonText = new Text2('HARD', {
+ size: 90,
fill: 0xFFFFFF,
fontWeight: 'bolder'
});
-hardButtonText.anchor.set(0.5, 0.3);
+var hardCardText = new Text2('28 Cards', {
+ size: 40,
+ fill: 0xFFFFFF
+});
+hardButtonText.anchor.set(0.5, 0.5);
hardButtonText.x = hardButton.x;
-hardButtonText.y = hardButton.y;
+hardButtonText.y = hardButton.y - 20;
game.addChild(hardButtonText);
+hardCardText.anchor.set(0.5, 0.5);
+hardCardText.x = hardButton.x;
+hardCardText.y = hardButton.y + 25;
+game.addChild(hardCardText);
// Button click handlers
easyButton.down = function () {
if (gameStarted) return;
startGame('easy');
@@ -296,12 +320,15 @@
// Hide level selection UI
levelSelectText.alpha = 0;
easyButton.alpha = 0;
easyButtonText.alpha = 0;
+ easyCardText.alpha = 0;
mediumButton.alpha = 0;
mediumButtonText.alpha = 0;
+ mediumCardText.alpha = 0;
hardButton.alpha = 0;
hardButtonText.alpha = 0;
+ hardCardText.alpha = 0;
// Show game UI
movesText.alpha = 1;
pairsText.alpha = 1;
pairsText.setText('Pairs: 0/' + totalPairs);
@@ -385,12 +412,15 @@
// Show level selection UI
levelSelectText.alpha = 1;
easyButton.alpha = 1;
easyButtonText.alpha = 1;
+ easyCardText.alpha = 1;
mediumButton.alpha = 1;
mediumButtonText.alpha = 1;
+ mediumCardText.alpha = 1;
hardButton.alpha = 1;
hardButtonText.alpha = 1;
+ hardCardText.alpha = 1;
}
function restartCurrentGame() {
if (!selectedLevel) return;
// Clear current game
Modern App Store icon, high definition, square with rounded corners, for a game titled "Memory Match Cards" and with the description "A classic memory card game where players flip cards to find matching pairs. Tap cards to reveal them and match identical pairs to clear the board.". No text on icon!
Cute elephant. In-Game asset. 2d. High contrast. No shadows
Cute tiger. In-Game asset. 2d. High contrast. No shadows
Cute dog. In-Game asset. 2d. High contrast. No shadows
Cute cat. In-Game asset. 2d. High contrast. No shadows
Cute snake. In-Game asset. 2d. High contrast. No shadows
Cute giraffe. In-Game asset. 2d. High contrast. No shadows
Cute zebra. In-Game asset. 2d. High contrast. No shadows
cute monkey. In-Game asset. 2d. High contrast. No shadows
cute honey badger. In-Game asset. 2d. High contrast. No shadows
cute koala. In-Game asset. 2d. High contrast. No shadows
cute bear. In-Game asset. 2d. High contrast. No shadows
cute panda. In-Game asset. 2d. High contrast. No shadows
cute eagle. In-Game asset. 2d. High contrast. No shadows
cute lion. In-Game asset. 2d. High contrast. No shadows