Code edit (1 edits merged)
Please save this source code
User prompt
create and store nextcard in a variable as soon as current card has a value. this nextcard will be the next card to be swiped in
User prompt
can the preview card be creted before the swipe?
User prompt
Need to implement a preview to know the suit of the card before it is swiped in.
User prompt
ld be generated as soon as current card has a value. next card should be created and remain offscreen until it is swipped in. π
User prompt
change game logic to create the nextcard as soon as current card is created. however nextcard will be displayed only after swipe.
User prompt
next card value should be created in advance of the swipe. as soon as the current card value is updated, the nextcard should be generated, but not show in screen until player swipes
User prompt
preview card should always upudate with the value of the next card to appear
User prompt
preview card should be updated after every swipe
User prompt
create a new stage for a card to be preview. this is the card that will be next card after it is swiped.
User prompt
do pop.deck as soon as the current card is generated. however next card should be hold of appearing until swipe.
User prompt
show the preview of the card suit before it is created and before it is swiped.
User prompt
add next card value before the swipe. as soon as the first current card is created, the next card should arelayd have a value.
User prompt
Change game logic to always cache the next card, before the swipe. this way we can show a hint of the card before it is swiped in.
User prompt
next card should be generated before swipe, right after first card or current card get their card assigned.
User prompt
next card value should be generated on game start.
User prompt
on game start create nextcard
User prompt
next card should be generated right after current card is created. value and suit should be available. but next card should only appear on screen after swipe.
User prompt
nextcard should be generated at game start and again after every swipe.
User prompt
Fix Bug: 'TypeError: Cannot set properties of null (setting 'x')' in this line: 'nextCard.x = 2048 / 2 + 500;' Line Number: 227
User prompt
Fix Bug: 'TypeError: Cannot read properties of null (reading 'value')' in this line: 'console.log('Next Card:', 'Value:', nextCard.value, 'Suit:', nextCard.suit);' Line Number: 223
User prompt
nextcard should be generated at game start.
User prompt
we need to know the value of the upcoming card in advance. show the suit of the upcoming card as soon as nextcard is spawned
User prompt
we need to know in advance of spawning the value of the next card.
User prompt
suit should be displayed befor the swipe.
/**** * Classes ****/ var StartMessageDisplay = Container.expand(function () { var self = Container.call(this); var background = self.createAsset('start_message_background', 'Start Message Background', 0.5, 0.5); background.x = 1024 + 500; background.y = 1266; self.addChildAt(background, 0); var messageText = new Text2(' Swipe Up\n for Higher!\n\n or\n\n Swipe Down\n for Lower!', { size: 100, fill: '#0000000', stroke: '#000000', strokeThickness: 0, anchor: { x: 0.5, y: 0 } }); self.addChild(messageText); messageText.y = 800; messageText.x = 1150; self.showMessage = function (message) { messageText.setText(message); messageText.x = 2000; self.addChild(messageText); LK.setTimeout(function () { messageText.setText(''); }, 2000); }; }); var MessageDisplay = Container.expand(function () { var self = Container.call(this); var messageText = new Text2('', { size: 150, fill: '#ffffff', stroke: '#000000', strokeThickness: 16, anchor: { x: 0.5, y: 0 } }); self.addChild(messageText); messageText.y = 500 - messageText.height; self.showMessage = function (message) { messageText.setText(message); messageText.x = 2048 / 2 - messageText.width / 2; self.addChild(messageText); LK.setTimeout(function () { messageText.setText(''); }, 2000); }; }); var Card = Container.expand(function () { var self = Container.call(this); self.setSuit = function (suit) { self.suit = suit; var suitAsset = self.createAsset('suit_' + suit, 'Suit Asset', 0.5, 0.5); suitAsset.x = 0; suitAsset.y = 0; self.addChild(suitAsset); }; var cardGraphics = self.createAsset('card', 'Card Graphics', 0.5, 0.5); cardGraphics.anchor.set(0.5, 0.5); var valueText = new Text2('', { size: 120, fill: '#000000', font: 'bold', anchor: { x: 0, y: 0 } }); valueText.anchor.set(0, 0); valueText.x = -cardGraphics.width / 2 + 50; valueText.y = -cardGraphics.height / 2 + 30; var valueText2 = new Text2('', { size: 120, fill: '#000000', font: 'bold', anchor: { x: 1, y: 1 } }); valueText2.anchor.set(0, 0); valueText2.x = cardGraphics.width / 2 - 50; valueText2.y = cardGraphics.height / 2 - 30; valueText2.scale.y = -1; valueText2.scale.x = -1; self.addChild(valueText2); self.setValue = function (value) { self.value = value; valueText.setText(value.toString()); valueText2.setText(value.toString()); }; self.addChild(valueText); self.addChild(valueText2); var suitText = new Text2('', { size: 120, fill: '#000000', anchor: { x: 0.5, y: 1 } }); suitText.y = 0; self.addChild(suitText); self.setValue = function (value) { self.value = value; var displayValue = value; if (value === 11) { displayValue = 'J'; } else if (value === 12) { displayValue = 'Q'; } else if (value === 13) { displayValue = 'K'; } else if (value === 1) { displayValue = 'A'; } valueText.setText(displayValue.toString()); valueText2.setText(displayValue.toString()); }; self.value = 0; }); var Player = Container.expand(function () { var self = Container.call(this); var playerGraphics = self.createAsset('player', 'Player Graphics', .5, .5); self.score = 0; self.updateScore = function (score) { self.score = score; }; }); var MiniCard = Container.expand(function () { var self = Container.call(this); self.setSuit = function (suit) { self.suit = suit; var suitAsset = self.createAsset('suit_' + suit, 'Mini Suit Asset', 0.5, 0.5); suitAsset.scale.x = 0.125; suitAsset.scale.y = 0.125; suitAsset.x = 0; suitAsset.y = 0; self.addChild(suitAsset); }; var cardGraphics = self.createAsset('card', 'Mini Card Graphics', 0.5, 0.5); cardGraphics.scale.x = 0.125; cardGraphics.scale.y = 0.125; cardGraphics.anchor.set(0.5, 0.5); var valueText = new Text2('', { size: 60, fill: '#000000', font: 'bold', anchor: { x: 0, y: 0 } }); valueText.anchor.set(0, 0); valueText.x = -cardGraphics.width / 16 + 6.25; valueText.y = -cardGraphics.height / 16 + 3.75; self.addChild(valueText); self.setValue = function (value) { self.value = value; var displayValue = value; if (value === 11) { displayValue = 'J'; } else if (value === 12) { displayValue = 'Q'; } else if (value === 13) { displayValue = 'K'; } else if (value === 1) { displayValue = 'A'; } valueText.setText(displayValue.toString()); }; self.value = 0; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ var player = new Player(); var background = game.createAsset('background', 'Background Asset', 0.5, 0.5); background.x = 2048 / 2; background.y = 2732 / 2; game.addChild(background); var canSwipe = true; game.on('up', function (obj) { if (!canSwipe) { return; } canSwipe = false; LK.setTimeout(function () { canSwipe = true; }, 1500); var endY = obj.event.getLocalPosition(game).y; if (startY === null || endY === null) { return; } var swipeDirection = startY - endY; var guess = swipeDirection > 0 ? 'higher' : 'lower'; if (deck.length === 0) { LK.showGameOver(); return; } nextCard = deck.pop(); if (!nextCard) { return; } // Decrease the cards left counter cardsLeftTxt.setText('Left: ' + deck.length); if (startMessageDisplay) { startMessageDisplay.destroy(); startMessageDisplay = null; } console.log('Next Card:', 'Value:', nextCard.value, 'Suit:', nextCard.suit); game.addChild(nextCard); nextCard.x = 2048 / 2 + 500; nextCard.y = swipeDirection > 0 ? 2732 + nextCard.height - 100 : -nextCard.height - 100; var speed = 50; var moveCard = function moveCard() { if (nextCard) { if (swipeDirection > 0 && nextCard.y > 2732 / 2 - 100) { nextCard.y -= speed; } else if (swipeDirection < 0 && nextCard.y < 2732 / 2 - 100) { nextCard.y += speed; } if (Math.abs(nextCard.y - 2732 / 2 + 100) <= 20) { LK.off('tick', moveCard); } } }; LK.on('tick', moveCard); if (game.messageDisplay) { game.messageDisplay.destroy(); } game.messageDisplay = game.addChild(new MessageDisplay()); var correctGuess = guess === 'higher' && nextCard.value >= currentCard.value || guess === 'lower' && nextCard.value <= currentCard.value; LK.setTimeout(function () { if (correctGuess) { player.updateScore(player.score + 1); game.updateScoreDisplay(player.score); LK.setScore(player.score); game.messageDisplay.showMessage('Correct!'); } else { game.messageDisplay.showMessage('Wrong!'); } }, 1000); console.log('Current Card:', 'Value:', currentCard.value, 'Suit:', currentCard.suit); LK.on('tick', function moveCard() { if (Math.abs(nextCard.y - 2732 / 2 + 100) <= 20) { LK.setTimeout(function () { LK.on('tick', function moveCardLeft() { if (currentCard && currentCard.x > 2048 / 2 - 500) { currentCard.x -= 20; } else if (currentCard) { var miniCard = new MiniCard(); miniCard.setValue(currentCard.value); miniCard.setSuit(currentCard.suit); miniCard.x = (game.miniCardX || 110) + miniCard.width / 6; miniCard.y = 2732 - miniCard.height - 550 - (game.miniCardYOffset || 0); game.addChild(miniCard); game.miniCardCount = (game.miniCardCount || 0) + 1; if (game.miniCardCount % 13 === 0) { game.miniCardX = 110; game.miniCardYOffset = (game.miniCardYOffset || 0) - 200; } else { game.miniCardX = miniCard.x + miniCard.width + 20; } LK.off('tick', moveCardLeft); } }); currentCard = nextCard; nextCard = null; startY = null; currentCard.x = 2048 / 2; currentCard.y = 2732 / 2 - 100; }, 500); LK.off('tick', moveCard); } }); }); var scoreTxt = new Text2('0', { size: 80, fill: "#ffffff", stroke: '#000000', strokeThickness: 14, anchor: { x: .5, y: .5 } }); var cardsLeftTxt = new Text2('Left: 51', { size: 80, fill: "#ffffff", stroke: '#000000', strokeThickness: 14, anchor: { x: 0, y: .5 } }); scoreTxt.y = 50; scoreTxt.x = -1340; cardsLeftTxt.x = scoreTxt.x + scoreTxt.width + 870; cardsLeftTxt.y = 50; LK.gui.topRight.addChild(scoreTxt); LK.gui.topRight.addChild(cardsLeftTxt); game.updateScoreDisplay = function (score) { scoreTxt.setText('Score: ' + score.toString()); }; game.updateScoreDisplay(0); var startMessageDisplay = new StartMessageDisplay(); game.addChild(startMessageDisplay); var deck = []; var currentCard = null; var nextCard = null; var suits = ['hearts', 'diamonds', 'clubs', 'spades']; for (var s = 0; s < suits.length; s++) { for (var i = 1; i <= 13; i++) { var card = new Card(); card.setValue(i); card.setSuit(suits[s]); deck.push(card); } } deck.sort(function () { return 0.5 - Math.random(); }); currentCard = deck[Math.floor(Math.random() * deck.length)]; console.log('First Card:', 'Value:', currentCard.value, 'Suit:', currentCard.suit); var index = deck.indexOf(currentCard); deck.splice(index, 1); game.addChild(currentCard); currentCard.x = 2048 / 2 - 500; currentCard.y = 2732 / 2 - 100; // Create nextCard on game start nextCard = deck.pop(); game.addChild(nextCard); nextCard.x = 2048 / 2 + 500; nextCard.y = 2732 / 2 - 100; // Spawn the miniCard for the current card var miniCard = new MiniCard(); miniCard.setValue(currentCard.value); miniCard.setSuit(currentCard.suit); miniCard.x = 110 + miniCard.width / 6; miniCard.y = 2732 - miniCard.height - 550; game.addChild(miniCard); // Initialize miniCard positioning variables game.miniCardX = miniCard.x + miniCard.width + 20; game.miniCardCount = 1; game.miniCardYOffset = 0; // Update the cards left counter cardsLeftTxt.setText('Left: ' + deck.length); var startY = null; game.on('down', function (obj) { startY = obj.event.getLocalPosition(game).y; });
===================================================================
--- original.js
+++ change.js
@@ -210,16 +210,12 @@
if (deck.length === 0) {
LK.showGameOver();
return;
}
+ nextCard = deck.pop();
if (!nextCard) {
return;
}
-
- // Add nextCard to the game
- nextCard.x = 2048 / 2 + 500;
- nextCard.y = swipeDirection > 0 ? 2732 + nextCard.height - 100 : -nextCard.height - 100;
- game.addChild(nextCard);
// Decrease the cards left counter
cardsLeftTxt.setText('Left: ' + deck.length);
if (startMessageDisplay) {
startMessageDisplay.destroy();
@@ -346,10 +342,13 @@
game.addChild(currentCard);
currentCard.x = 2048 / 2 - 500;
currentCard.y = 2732 / 2 - 100;
-// Generate next card but don't add it to the game yet
+// Create nextCard on game start
nextCard = deck.pop();
+game.addChild(nextCard);
+nextCard.x = 2048 / 2 + 500;
+nextCard.y = 2732 / 2 - 100;
// Spawn the miniCard for the current card
var miniCard = new MiniCard();
miniCard.setValue(currentCard.value);
Green casino baize. To be used as background. No shade. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
white rectangle flat. rounded corners. no background. no shadow. card shape.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.