User prompt
please display number of moves near undo button
User prompt
show undo bigger
User prompt
show undo as an arrow
User prompt
show undo as button
User prompt
move undo button under the screen right corner
User prompt
Please fix the bug: 'Cannot set properties of undefined (setting 'down')' in or related to this line: 'undoBtn.down = function (x, y, obj) {' Line Number: 436
User prompt
put an undo button
User prompt
be able to move cards to spaces
User prompt
show number of moves
User prompt
show move counter under the sets counter
User prompt
add moves counter
User prompt
make corner numbers more visible
User prompt
put shuffle sound to drawing cards from stock
User prompt
make music less loud
User prompt
add card sounds for moves
User prompt
Add relaxing background music to the game
User prompt
Please fix the bug: 'Cannot set properties of undefined (setting 'fill')' in or related to this line: 'labelTL.style.fill = 0x111111;' Line Number: 106
User prompt
make cards look like real
User prompt
use shuffle sound for taking cards from stock
User prompt
cards move slower ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
cards slide to position ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
move piles to the right
User prompt
center the piles
User prompt
reduce card piles to 9
User prompt
fit cards to screen
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ // Card class var Card = Container.expand(function () { var self = Container.call(this); // Card properties self.rank = 1; // 1=Ace, 13=King self.suit = 0; // 0=spades (for MVP, only one suit) self.faceUp = false; self.selected = false; // Card graphics var cardFace = self.attachAsset('cardFace', { anchorX: 0.5, anchorY: 0.5 }); var cardBack = self.attachAsset('cardBack', { anchorX: 0.5, anchorY: 0.5 }); cardBack.visible = true; cardFace.visible = false; // Card label (rank/suit) - center var label = new Text2('', { size: 60, fill: 0x222244 }); label.anchor.set(0.5, 0.5); label.x = 0; label.y = 0; self.addChild(label); // Top-left corner label var labelTL = new Text2('', { size: 38, fill: 0x222244 }); labelTL.anchor.set(0, 0); labelTL.x = -cardFace.width / 2 + 18; labelTL.y = -cardFace.height / 2 + 10; self.addChild(labelTL); // Bottom-right corner label var labelBR = new Text2('', { size: 38, fill: 0x222244 }); labelBR.anchor.set(1, 1); labelBR.x = cardFace.width / 2 - 18; labelBR.y = cardFace.height / 2 - 10; self.addChild(labelBR); // Set card data self.setCard = function (rank, suit, faceUp) { self.rank = rank; self.suit = suit; self.faceUp = faceUp; self.updateFace(); }; // Update card face/back and label self.updateFace = function () { cardFace.visible = self.faceUp; cardBack.visible = !self.faceUp; if (self.faceUp) { // Show rank and suit var rankStr = ''; if (self.rank === 1) rankStr = 'A';else if (self.rank === 11) rankStr = 'J';else if (self.rank === 12) rankStr = 'Q';else if (self.rank === 13) rankStr = 'K';else rankStr = '' + self.rank; // Only spades for MVP label.setText(rankStr + ' ♠'); label.visible = true; labelTL.setText(rankStr); labelTL.visible = true; labelBR.setText(rankStr); labelBR.visible = true; } else { label.visible = false; labelTL.visible = false; labelBR.visible = false; } self.updateSelected(); }; // Visual feedback for selection self.updateSelected = function () { if (self.selected) { cardFace.tint = 0x99ccff; cardBack.tint = 0x99ccff; } else { cardFace.tint = 0xffffff; cardBack.tint = 0xffffff; } }; // Flip card self.flip = function (faceUp) { self.faceUp = faceUp; self.updateFace(); }; // Touch events self.down = function (x, y, obj) { if (self.faceUp) { // Let game handle selection if (game) game.onCardDown(self, x, y, obj); } }; return self; }); // Stock pile class (for dealing new rows) var StockPile = Container.expand(function () { var self = Container.call(this); self.cards = []; // Add card to stock self.addCard = function (card) { self.cards.push(card); self.addChild(card); card.x = 0; card.y = 0; }; // Deal one card per tableau pile self.dealToTableau = function (tableauPiles) { if (self.cards.length < tableauPiles.length) return false; for (var i = 0; i < tableauPiles.length; i++) { var card = self.cards.shift(); card.flip(true); tableauPiles[i].addCard(card); } return true; }; // Is empty? self.isEmpty = function () { return self.cards.length === 0; }; return self; }); // Tableau pile class var TableauPile = Container.expand(function () { var self = Container.call(this); self.cards = []; // Add card to pile self.addCard = function (card) { self.cards.push(card); self.addChild(card); self.layout(); }; // Remove card(s) from pile starting at index self.removeCardsFrom = function (idx) { var removed = []; while (self.cards.length > idx) { var c = self.cards.pop(); c.parent.removeChild(c); removed.unshift(c); } self.layout(); return removed; }; // Get top card self.topCard = function () { if (self.cards.length === 0) return null; return self.cards[self.cards.length - 1]; }; // Layout cards in pile self.layout = function () { for (var i = 0; i < self.cards.length; i++) { var c = self.cards[i]; c.x = 0; // Overlap: 22% of card height c.y = Math.floor(i * CARD_HEIGHT * 0.22); c.zIndex = i; } }; // Reveal top card if needed self.revealTop = function () { var top = self.topCard(); if (top && !top.faceUp) { top.flip(true); } }; // Get index of card in pile self.indexOf = function (card) { for (var i = 0; i < self.cards.length; i++) { if (self.cards[i] === card) return i; } return -1; }; // Can move sequence starting at idx? self.canMoveSequence = function (idx) { // All cards from idx to end must be face up and in descending order for (var i = idx; i < self.cards.length - 1; i++) { var c1 = self.cards[i]; var c2 = self.cards[i + 1]; if (!c1.faceUp || !c2.faceUp) return false; if (c1.rank !== c2.rank + 1) return false; } return self.cards[idx].faceUp; }; // Can accept a sequence of cards (cardsArr)? self.canAccept = function (cardsArr) { if (self.cards.length === 0) { // Only King can be placed on empty pile return cardsArr[0].rank === 13; } else { var top = self.topCard(); var moving = cardsArr[0]; return top.faceUp && top.rank === moving.rank + 1; } }; // Remove completed set (K-A) self.removeCompleteSet = function () { // Check if last 13 cards are a complete set if (self.cards.length < 13) return false; for (var i = 0; i < 13; i++) { var c = self.cards[self.cards.length - 1 - i]; if (!c.faceUp || c.rank !== 13 - i) return false; } // Remove them var removed = []; for (var i = 0; i < 13; i++) { var c = self.cards.pop(); c.parent.removeChild(c); removed.unshift(c); } self.layout(); return true; }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0xcccccc }); /**** * Game Code ****/ // Add a large faded spider icon to the background, centered // Game constants var backgroundSpider = LK.getAsset('spider', { anchorX: 0.5, anchorY: 0.5, scaleX: Math.max(SCREEN_WIDTH, SCREEN_HEIGHT) / 200, scaleY: Math.max(SCREEN_WIDTH, SCREEN_HEIGHT) / 200 }); backgroundSpider.x = SCREEN_WIDTH / 2; backgroundSpider.y = SCREEN_HEIGHT / 2; backgroundSpider.rotation = Math.PI / 2; backgroundSpider.alpha = 0.08; game.addChildAt(backgroundSpider, 0); // Ensure it's behind all other elements // Card back (spider web themed) // Card face (white for now, will overlay suit/rank) // Spider icon for completed set // Landscape orientation: swap width/height, reposition elements // Fit cards and piles to screen dynamically var TABLEAU_COUNT = 10; var SCREEN_WIDTH = 2732; var SCREEN_HEIGHT = 2048; // Calculate max card width/height to fit 10 piles with spacing var maxCardWidth = Math.floor((SCREEN_WIDTH - 2 * 80) / (TABLEAU_COUNT + (TABLEAU_COUNT - 1) * 0.18)); var maxCardHeight = Math.floor((SCREEN_HEIGHT - 2 * 120) * 0.8); // Maintain card aspect ratio (180:260) var aspect = 180 / 260; var cardW = Math.min(maxCardWidth, Math.floor(maxCardHeight * aspect)); var cardH = Math.floor(cardW / aspect); var CARD_WIDTH = cardW; var CARD_HEIGHT = cardH; // Spacing between tableau piles var TABLEAU_SPACING = Math.floor((SCREEN_WIDTH - 2 * 80 - TABLEAU_COUNT * CARD_WIDTH) / (TABLEAU_COUNT - 1)); // Center tableau vertically, spread horizontally var TABLEAU_LEFT = Math.floor((SCREEN_WIDTH - (TABLEAU_COUNT * CARD_WIDTH + (TABLEAU_COUNT - 1) * TABLEAU_SPACING)) / 2); var TABLEAU_TOP = Math.floor((SCREEN_HEIGHT - CARD_HEIGHT) / 2 - 80); // Stock and completed sets positions var STOCK_X = SCREEN_WIDTH - CARD_WIDTH - 80; var STOCK_Y = 80; var COMPLETED_X = 80; var COMPLETED_Y = 80; // Game state var tableauPiles = []; var stockPile = null; var completedSets = 0; var draggingCards = null; var draggingFromPile = null; var dragOffsetX = 0; var dragOffsetY = 0; var dragStartX = 0; var dragStartY = 0; var dragValidTarget = null; var dragTargetPile = null; var canDeal = true; // GUI var scoreTxt = new Text2('0', { size: 90, fill: 0xFFFFFF }); scoreTxt.anchor.set(0.5, 0); scoreTxt.x = SCREEN_WIDTH / 2; scoreTxt.y = 30; LK.gui.top.addChild(scoreTxt); var dealBtn = new Text2('Deal', { size: 70, fill: 0xFFFFFF }); dealBtn.anchor.set(0.5, 0.5); dealBtn.x = STOCK_X + CARD_WIDTH / 2; dealBtn.y = STOCK_Y + CARD_HEIGHT + 60; LK.gui.top.addChild(dealBtn); // Completed sets display var completedSpiders = []; // Initialize tableau piles for (var i = 0; i < TABLEAU_COUNT; i++) { var pile = new TableauPile(); // Lay out piles horizontally, fit to screen pile.x = TABLEAU_LEFT + i * (CARD_WIDTH + TABLEAU_SPACING); pile.y = TABLEAU_TOP; game.addChild(pile); tableauPiles.push(pile); } // Initialize stock pile stockPile = new StockPile(); stockPile.x = STOCK_X; stockPile.y = STOCK_Y; game.addChild(stockPile); // (Removed stock label) // Shuffle and deal cards function shuffleDeck() { // 8 decks of spades (104 cards) var deck = []; for (var d = 0; d < 8; d++) { for (var r = 1; r <= 13; r++) { var card = new Card(); card.setCard(r, 0, false); deck.push(card); } } // Fisher-Yates shuffle for (var i = deck.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = deck[i]; deck[i] = deck[j]; deck[j] = tmp; } return deck; } function dealInitial() { var deck = shuffleDeck(); // 54 cards to tableau (first 4 piles get 6, rest get 5) for (var i = 0; i < TABLEAU_COUNT; i++) { var count = i < 4 ? 6 : 5; for (var j = 0; j < count; j++) { var card = deck.shift(); tableauPiles[i].addCard(card); } } // Flip top card of each pile for (var i = 0; i < TABLEAU_COUNT; i++) { tableauPiles[i].topCard().flip(true); } // Remaining 50 cards to stock while (deck.length > 0) { var card = deck.shift(); stockPile.addCard(card); } completedSets = 0; updateScore(); updateCompletedSpiders(); canDeal = true; } function updateScore() { scoreTxt.setText('Sets: ' + completedSets); } function updateCompletedSpiders() { // Remove old for (var i = 0; i < completedSpiders.length; i++) { if (completedSpiders[i].parent) completedSpiders[i].parent.removeChild(completedSpiders[i]); } completedSpiders = []; // Add new for (var i = 0; i < completedSets; i++) { var spider = LK.getAsset('spider', { anchorX: 0.5, anchorY: 0.5 }); spider.x = COMPLETED_X + i * Math.floor(CARD_WIDTH * 0.6); spider.y = COMPLETED_Y; game.addChild(spider); completedSpiders.push(spider); } } // Handle card selection and drag game.onCardDown = function (card, x, y, obj) { // Find which pile this card is in var pile = null; var idx = -1; for (var i = 0; i < tableauPiles.length; i++) { var p = tableauPiles[i]; var j = p.indexOf(card); if (j !== -1) { pile = p; idx = j; break; } } if (!pile) return; // Can move sequence? if (!pile.canMoveSequence(idx)) return; // Prepare drag draggingCards = []; for (var k = idx; k < pile.cards.length; k++) { var c = pile.cards[k]; c.selected = true; c.updateSelected(); draggingCards.push(c); } draggingFromPile = pile; // Try to auto-move to a valid pile var autoMoved = false; for (var t = 0; t < tableauPiles.length; t++) { var targetPile = tableauPiles[t]; if (targetPile === pile) continue; if (targetPile.canAccept(draggingCards)) { // Remove from old pile pile.removeCardsFrom(idx); // Add to new pile for (var m = 0; m < draggingCards.length; m++) { targetPile.addCard(draggingCards[m]); } // Reveal top card in old pile pile.revealTop(); // Check for completed set if (targetPile.removeCompleteSet()) { completedSets += 1; updateScore(); updateCompletedSpiders(); // Animate spider var spider = LK.getAsset('spider', { anchorX: 0.5, anchorY: 0.5 }); spider.x = targetPile.x + CARD_WIDTH / 2; spider.y = targetPile.y + targetPile.cards.length * Math.floor(CARD_HEIGHT * 0.22) + CARD_HEIGHT / 2; game.addChild(spider); tween(spider, { y: COMPLETED_Y, x: COMPLETED_X + (completedSets - 1) * Math.floor(CARD_WIDTH * 0.6) }, { duration: 800, easing: tween.easeOut, onFinish: function onFinish() { if (spider.parent) spider.parent.removeChild(spider); updateCompletedSpiders(); } }); } // Win condition: 8 sets if (completedSets >= 8) { LK.showYouWin(); return; } // Deselect for (var m = 0; m < draggingCards.length; m++) { draggingCards[m].selected = false; draggingCards[m].updateSelected(); } draggingCards = null; draggingFromPile = null; dragValidTarget = null; dragTargetPile = null; autoMoved = true; break; } } if (autoMoved) return; // Bring to front for manual drag for (var k = 0; k < draggingCards.length; k++) { game.addChild(draggingCards[k]); } // Offset dragOffsetX = card.x; dragOffsetY = card.y; dragStartX = card.parent.x + card.x; dragStartY = card.parent.y + card.y; }; // Handle drag move game.move = function (x, y, obj) { if (!draggingCards) return; // Move cards for (var i = 0; i < draggingCards.length; i++) { draggingCards[i].x = x - dragOffsetX; draggingCards[i].y = y - dragOffsetY + i * Math.floor(CARD_HEIGHT * 0.22); } // Check for valid drop target dragValidTarget = null; dragTargetPile = null; for (var i = 0; i < tableauPiles.length; i++) { var pile = tableauPiles[i]; // Don't allow drop on self if (pile === draggingFromPile) continue; // Get pile bounds var px = pile.x; var py = pile.y + pile.cards.length * Math.floor(CARD_HEIGHT * 0.22); var pw = CARD_WIDTH; var ph = CARD_HEIGHT; if (x > px && x < px + pw && y > py - Math.floor(CARD_HEIGHT * 0.22) && y < py + ph) { // Can accept? if (pile.canAccept(draggingCards)) { dragValidTarget = pile; dragTargetPile = pile; break; } } } }; // Handle drag end game.up = function (x, y, obj) { if (!draggingCards) return; // Drop if (dragValidTarget && dragTargetPile) { // Remove from old pile var idx = draggingFromPile.indexOf(draggingCards[0]); draggingFromPile.removeCardsFrom(idx); // Add to new pile for (var i = 0; i < draggingCards.length; i++) { dragTargetPile.addCard(draggingCards[i]); } // Reveal top card in old pile draggingFromPile.revealTop(); // Check for completed set if (dragTargetPile.removeCompleteSet()) { completedSets += 1; updateScore(); updateCompletedSpiders(); // Animate spider var spider = LK.getAsset('spider', { anchorX: 0.5, anchorY: 0.5 }); spider.x = dragTargetPile.x + CARD_WIDTH / 2; spider.y = dragTargetPile.y + dragTargetPile.cards.length * Math.floor(CARD_HEIGHT * 0.22) + CARD_HEIGHT / 2; game.addChild(spider); tween(spider, { y: COMPLETED_Y, x: COMPLETED_X + (completedSets - 1) * Math.floor(CARD_WIDTH * 0.6) }, { duration: 800, easing: tween.easeOut, onFinish: function onFinish() { if (spider.parent) spider.parent.removeChild(spider); updateCompletedSpiders(); } }); } // Win condition: 8 sets if (completedSets >= 8) { LK.showYouWin(); return; } } else { // Return to original pile for (var i = 0; i < draggingCards.length; i++) { draggingCards[i].x = dragStartX - draggingFromPile.x; draggingCards[i].y = dragStartY - draggingFromPile.y + i * Math.floor(CARD_HEIGHT * 0.22); draggingFromPile.addChild(draggingCards[i]); } draggingFromPile.layout(); } // Deselect for (var i = 0; i < draggingCards.length; i++) { draggingCards[i].selected = false; draggingCards[i].updateSelected(); } draggingCards = null; draggingFromPile = null; dragValidTarget = null; dragTargetPile = null; }; // Deal new row dealBtn.down = function (x, y, obj) { if (!canDeal) return; // Only allow if all tableau piles have at least one card for (var i = 0; i < tableauPiles.length; i++) { if (tableauPiles[i].cards.length === 0) return; } if (stockPile.isEmpty()) return; canDeal = false; // Animate deal var dealt = stockPile.dealToTableau(tableauPiles); if (dealt) { // Flip top card of each pile for (var i = 0; i < tableauPiles.length; i++) { tableauPiles[i].topCard().flip(true); } } // Allow next deal after short delay LK.setTimeout(function () { canDeal = true; }, 400); }; // Touch on stock pile (deal) stockPile.down = function (x, y, obj) { dealBtn.down(x, y, obj); }; // Reset game function resetGame() { // Remove all cards for (var i = 0; i < tableauPiles.length; i++) { var pile = tableauPiles[i]; while (pile.cards.length > 0) { var c = pile.cards.pop(); if (c.parent) c.parent.removeChild(c); } } while (stockPile.cards.length > 0) { var c = stockPile.cards.pop(); if (c.parent) c.parent.removeChild(c); } completedSets = 0; updateScore(); updateCompletedSpiders(); canDeal = true; draggingCards = null; draggingFromPile = null; dragValidTarget = null; dragTargetPile = null; dealInitial(); } // Game over: no more moves function checkGameOver() { // If no moves and stock is empty var canMove = false; for (var i = 0; i < tableauPiles.length; i++) { var pile = tableauPiles[i]; for (var j = 0; j < pile.cards.length; j++) { if (pile.canMoveSequence(j)) { // Try to move to another pile var seq = []; for (var k = j; k < pile.cards.length; k++) seq.push(pile.cards[k]); for (var t = 0; t < tableauPiles.length; t++) { if (t === i) continue; if (tableauPiles[t].canAccept(seq)) { canMove = true; break; } } } if (canMove) break; } if (canMove) break; } if (!canMove && stockPile.isEmpty()) { LK.showGameOver(); } } // Game update game.update = function () { // Check for game over checkGameOver(); }; // Start game dealInitial();
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// Card class
var Card = Container.expand(function () {
var self = Container.call(this);
// Card properties
self.rank = 1; // 1=Ace, 13=King
self.suit = 0; // 0=spades (for MVP, only one suit)
self.faceUp = false;
self.selected = false;
// Card graphics
var cardFace = self.attachAsset('cardFace', {
anchorX: 0.5,
anchorY: 0.5
});
var cardBack = self.attachAsset('cardBack', {
anchorX: 0.5,
anchorY: 0.5
});
cardBack.visible = true;
cardFace.visible = false;
// Card label (rank/suit) - center
var label = new Text2('', {
size: 60,
fill: 0x222244
});
label.anchor.set(0.5, 0.5);
label.x = 0;
label.y = 0;
self.addChild(label);
// Top-left corner label
var labelTL = new Text2('', {
size: 38,
fill: 0x222244
});
labelTL.anchor.set(0, 0);
labelTL.x = -cardFace.width / 2 + 18;
labelTL.y = -cardFace.height / 2 + 10;
self.addChild(labelTL);
// Bottom-right corner label
var labelBR = new Text2('', {
size: 38,
fill: 0x222244
});
labelBR.anchor.set(1, 1);
labelBR.x = cardFace.width / 2 - 18;
labelBR.y = cardFace.height / 2 - 10;
self.addChild(labelBR);
// Set card data
self.setCard = function (rank, suit, faceUp) {
self.rank = rank;
self.suit = suit;
self.faceUp = faceUp;
self.updateFace();
};
// Update card face/back and label
self.updateFace = function () {
cardFace.visible = self.faceUp;
cardBack.visible = !self.faceUp;
if (self.faceUp) {
// Show rank and suit
var rankStr = '';
if (self.rank === 1) rankStr = 'A';else if (self.rank === 11) rankStr = 'J';else if (self.rank === 12) rankStr = 'Q';else if (self.rank === 13) rankStr = 'K';else rankStr = '' + self.rank;
// Only spades for MVP
label.setText(rankStr + ' ♠');
label.visible = true;
labelTL.setText(rankStr);
labelTL.visible = true;
labelBR.setText(rankStr);
labelBR.visible = true;
} else {
label.visible = false;
labelTL.visible = false;
labelBR.visible = false;
}
self.updateSelected();
};
// Visual feedback for selection
self.updateSelected = function () {
if (self.selected) {
cardFace.tint = 0x99ccff;
cardBack.tint = 0x99ccff;
} else {
cardFace.tint = 0xffffff;
cardBack.tint = 0xffffff;
}
};
// Flip card
self.flip = function (faceUp) {
self.faceUp = faceUp;
self.updateFace();
};
// Touch events
self.down = function (x, y, obj) {
if (self.faceUp) {
// Let game handle selection
if (game) game.onCardDown(self, x, y, obj);
}
};
return self;
});
// Stock pile class (for dealing new rows)
var StockPile = Container.expand(function () {
var self = Container.call(this);
self.cards = [];
// Add card to stock
self.addCard = function (card) {
self.cards.push(card);
self.addChild(card);
card.x = 0;
card.y = 0;
};
// Deal one card per tableau pile
self.dealToTableau = function (tableauPiles) {
if (self.cards.length < tableauPiles.length) return false;
for (var i = 0; i < tableauPiles.length; i++) {
var card = self.cards.shift();
card.flip(true);
tableauPiles[i].addCard(card);
}
return true;
};
// Is empty?
self.isEmpty = function () {
return self.cards.length === 0;
};
return self;
});
// Tableau pile class
var TableauPile = Container.expand(function () {
var self = Container.call(this);
self.cards = [];
// Add card to pile
self.addCard = function (card) {
self.cards.push(card);
self.addChild(card);
self.layout();
};
// Remove card(s) from pile starting at index
self.removeCardsFrom = function (idx) {
var removed = [];
while (self.cards.length > idx) {
var c = self.cards.pop();
c.parent.removeChild(c);
removed.unshift(c);
}
self.layout();
return removed;
};
// Get top card
self.topCard = function () {
if (self.cards.length === 0) return null;
return self.cards[self.cards.length - 1];
};
// Layout cards in pile
self.layout = function () {
for (var i = 0; i < self.cards.length; i++) {
var c = self.cards[i];
c.x = 0;
// Overlap: 22% of card height
c.y = Math.floor(i * CARD_HEIGHT * 0.22);
c.zIndex = i;
}
};
// Reveal top card if needed
self.revealTop = function () {
var top = self.topCard();
if (top && !top.faceUp) {
top.flip(true);
}
};
// Get index of card in pile
self.indexOf = function (card) {
for (var i = 0; i < self.cards.length; i++) {
if (self.cards[i] === card) return i;
}
return -1;
};
// Can move sequence starting at idx?
self.canMoveSequence = function (idx) {
// All cards from idx to end must be face up and in descending order
for (var i = idx; i < self.cards.length - 1; i++) {
var c1 = self.cards[i];
var c2 = self.cards[i + 1];
if (!c1.faceUp || !c2.faceUp) return false;
if (c1.rank !== c2.rank + 1) return false;
}
return self.cards[idx].faceUp;
};
// Can accept a sequence of cards (cardsArr)?
self.canAccept = function (cardsArr) {
if (self.cards.length === 0) {
// Only King can be placed on empty pile
return cardsArr[0].rank === 13;
} else {
var top = self.topCard();
var moving = cardsArr[0];
return top.faceUp && top.rank === moving.rank + 1;
}
};
// Remove completed set (K-A)
self.removeCompleteSet = function () {
// Check if last 13 cards are a complete set
if (self.cards.length < 13) return false;
for (var i = 0; i < 13; i++) {
var c = self.cards[self.cards.length - 1 - i];
if (!c.faceUp || c.rank !== 13 - i) return false;
}
// Remove them
var removed = [];
for (var i = 0; i < 13; i++) {
var c = self.cards.pop();
c.parent.removeChild(c);
removed.unshift(c);
}
self.layout();
return true;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xcccccc
});
/****
* Game Code
****/
// Add a large faded spider icon to the background, centered
// Game constants
var backgroundSpider = LK.getAsset('spider', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: Math.max(SCREEN_WIDTH, SCREEN_HEIGHT) / 200,
scaleY: Math.max(SCREEN_WIDTH, SCREEN_HEIGHT) / 200
});
backgroundSpider.x = SCREEN_WIDTH / 2;
backgroundSpider.y = SCREEN_HEIGHT / 2;
backgroundSpider.rotation = Math.PI / 2;
backgroundSpider.alpha = 0.08;
game.addChildAt(backgroundSpider, 0); // Ensure it's behind all other elements
// Card back (spider web themed)
// Card face (white for now, will overlay suit/rank)
// Spider icon for completed set
// Landscape orientation: swap width/height, reposition elements
// Fit cards and piles to screen dynamically
var TABLEAU_COUNT = 10;
var SCREEN_WIDTH = 2732;
var SCREEN_HEIGHT = 2048;
// Calculate max card width/height to fit 10 piles with spacing
var maxCardWidth = Math.floor((SCREEN_WIDTH - 2 * 80) / (TABLEAU_COUNT + (TABLEAU_COUNT - 1) * 0.18));
var maxCardHeight = Math.floor((SCREEN_HEIGHT - 2 * 120) * 0.8);
// Maintain card aspect ratio (180:260)
var aspect = 180 / 260;
var cardW = Math.min(maxCardWidth, Math.floor(maxCardHeight * aspect));
var cardH = Math.floor(cardW / aspect);
var CARD_WIDTH = cardW;
var CARD_HEIGHT = cardH;
// Spacing between tableau piles
var TABLEAU_SPACING = Math.floor((SCREEN_WIDTH - 2 * 80 - TABLEAU_COUNT * CARD_WIDTH) / (TABLEAU_COUNT - 1));
// Center tableau vertically, spread horizontally
var TABLEAU_LEFT = Math.floor((SCREEN_WIDTH - (TABLEAU_COUNT * CARD_WIDTH + (TABLEAU_COUNT - 1) * TABLEAU_SPACING)) / 2);
var TABLEAU_TOP = Math.floor((SCREEN_HEIGHT - CARD_HEIGHT) / 2 - 80);
// Stock and completed sets positions
var STOCK_X = SCREEN_WIDTH - CARD_WIDTH - 80;
var STOCK_Y = 80;
var COMPLETED_X = 80;
var COMPLETED_Y = 80;
// Game state
var tableauPiles = [];
var stockPile = null;
var completedSets = 0;
var draggingCards = null;
var draggingFromPile = null;
var dragOffsetX = 0;
var dragOffsetY = 0;
var dragStartX = 0;
var dragStartY = 0;
var dragValidTarget = null;
var dragTargetPile = null;
var canDeal = true;
// GUI
var scoreTxt = new Text2('0', {
size: 90,
fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
scoreTxt.x = SCREEN_WIDTH / 2;
scoreTxt.y = 30;
LK.gui.top.addChild(scoreTxt);
var dealBtn = new Text2('Deal', {
size: 70,
fill: 0xFFFFFF
});
dealBtn.anchor.set(0.5, 0.5);
dealBtn.x = STOCK_X + CARD_WIDTH / 2;
dealBtn.y = STOCK_Y + CARD_HEIGHT + 60;
LK.gui.top.addChild(dealBtn);
// Completed sets display
var completedSpiders = [];
// Initialize tableau piles
for (var i = 0; i < TABLEAU_COUNT; i++) {
var pile = new TableauPile();
// Lay out piles horizontally, fit to screen
pile.x = TABLEAU_LEFT + i * (CARD_WIDTH + TABLEAU_SPACING);
pile.y = TABLEAU_TOP;
game.addChild(pile);
tableauPiles.push(pile);
}
// Initialize stock pile
stockPile = new StockPile();
stockPile.x = STOCK_X;
stockPile.y = STOCK_Y;
game.addChild(stockPile);
// (Removed stock label)
// Shuffle and deal cards
function shuffleDeck() {
// 8 decks of spades (104 cards)
var deck = [];
for (var d = 0; d < 8; d++) {
for (var r = 1; r <= 13; r++) {
var card = new Card();
card.setCard(r, 0, false);
deck.push(card);
}
}
// Fisher-Yates shuffle
for (var i = deck.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = deck[i];
deck[i] = deck[j];
deck[j] = tmp;
}
return deck;
}
function dealInitial() {
var deck = shuffleDeck();
// 54 cards to tableau (first 4 piles get 6, rest get 5)
for (var i = 0; i < TABLEAU_COUNT; i++) {
var count = i < 4 ? 6 : 5;
for (var j = 0; j < count; j++) {
var card = deck.shift();
tableauPiles[i].addCard(card);
}
}
// Flip top card of each pile
for (var i = 0; i < TABLEAU_COUNT; i++) {
tableauPiles[i].topCard().flip(true);
}
// Remaining 50 cards to stock
while (deck.length > 0) {
var card = deck.shift();
stockPile.addCard(card);
}
completedSets = 0;
updateScore();
updateCompletedSpiders();
canDeal = true;
}
function updateScore() {
scoreTxt.setText('Sets: ' + completedSets);
}
function updateCompletedSpiders() {
// Remove old
for (var i = 0; i < completedSpiders.length; i++) {
if (completedSpiders[i].parent) completedSpiders[i].parent.removeChild(completedSpiders[i]);
}
completedSpiders = [];
// Add new
for (var i = 0; i < completedSets; i++) {
var spider = LK.getAsset('spider', {
anchorX: 0.5,
anchorY: 0.5
});
spider.x = COMPLETED_X + i * Math.floor(CARD_WIDTH * 0.6);
spider.y = COMPLETED_Y;
game.addChild(spider);
completedSpiders.push(spider);
}
}
// Handle card selection and drag
game.onCardDown = function (card, x, y, obj) {
// Find which pile this card is in
var pile = null;
var idx = -1;
for (var i = 0; i < tableauPiles.length; i++) {
var p = tableauPiles[i];
var j = p.indexOf(card);
if (j !== -1) {
pile = p;
idx = j;
break;
}
}
if (!pile) return;
// Can move sequence?
if (!pile.canMoveSequence(idx)) return;
// Prepare drag
draggingCards = [];
for (var k = idx; k < pile.cards.length; k++) {
var c = pile.cards[k];
c.selected = true;
c.updateSelected();
draggingCards.push(c);
}
draggingFromPile = pile;
// Try to auto-move to a valid pile
var autoMoved = false;
for (var t = 0; t < tableauPiles.length; t++) {
var targetPile = tableauPiles[t];
if (targetPile === pile) continue;
if (targetPile.canAccept(draggingCards)) {
// Remove from old pile
pile.removeCardsFrom(idx);
// Add to new pile
for (var m = 0; m < draggingCards.length; m++) {
targetPile.addCard(draggingCards[m]);
}
// Reveal top card in old pile
pile.revealTop();
// Check for completed set
if (targetPile.removeCompleteSet()) {
completedSets += 1;
updateScore();
updateCompletedSpiders();
// Animate spider
var spider = LK.getAsset('spider', {
anchorX: 0.5,
anchorY: 0.5
});
spider.x = targetPile.x + CARD_WIDTH / 2;
spider.y = targetPile.y + targetPile.cards.length * Math.floor(CARD_HEIGHT * 0.22) + CARD_HEIGHT / 2;
game.addChild(spider);
tween(spider, {
y: COMPLETED_Y,
x: COMPLETED_X + (completedSets - 1) * Math.floor(CARD_WIDTH * 0.6)
}, {
duration: 800,
easing: tween.easeOut,
onFinish: function onFinish() {
if (spider.parent) spider.parent.removeChild(spider);
updateCompletedSpiders();
}
});
}
// Win condition: 8 sets
if (completedSets >= 8) {
LK.showYouWin();
return;
}
// Deselect
for (var m = 0; m < draggingCards.length; m++) {
draggingCards[m].selected = false;
draggingCards[m].updateSelected();
}
draggingCards = null;
draggingFromPile = null;
dragValidTarget = null;
dragTargetPile = null;
autoMoved = true;
break;
}
}
if (autoMoved) return;
// Bring to front for manual drag
for (var k = 0; k < draggingCards.length; k++) {
game.addChild(draggingCards[k]);
}
// Offset
dragOffsetX = card.x;
dragOffsetY = card.y;
dragStartX = card.parent.x + card.x;
dragStartY = card.parent.y + card.y;
};
// Handle drag move
game.move = function (x, y, obj) {
if (!draggingCards) return;
// Move cards
for (var i = 0; i < draggingCards.length; i++) {
draggingCards[i].x = x - dragOffsetX;
draggingCards[i].y = y - dragOffsetY + i * Math.floor(CARD_HEIGHT * 0.22);
}
// Check for valid drop target
dragValidTarget = null;
dragTargetPile = null;
for (var i = 0; i < tableauPiles.length; i++) {
var pile = tableauPiles[i];
// Don't allow drop on self
if (pile === draggingFromPile) continue;
// Get pile bounds
var px = pile.x;
var py = pile.y + pile.cards.length * Math.floor(CARD_HEIGHT * 0.22);
var pw = CARD_WIDTH;
var ph = CARD_HEIGHT;
if (x > px && x < px + pw && y > py - Math.floor(CARD_HEIGHT * 0.22) && y < py + ph) {
// Can accept?
if (pile.canAccept(draggingCards)) {
dragValidTarget = pile;
dragTargetPile = pile;
break;
}
}
}
};
// Handle drag end
game.up = function (x, y, obj) {
if (!draggingCards) return;
// Drop
if (dragValidTarget && dragTargetPile) {
// Remove from old pile
var idx = draggingFromPile.indexOf(draggingCards[0]);
draggingFromPile.removeCardsFrom(idx);
// Add to new pile
for (var i = 0; i < draggingCards.length; i++) {
dragTargetPile.addCard(draggingCards[i]);
}
// Reveal top card in old pile
draggingFromPile.revealTop();
// Check for completed set
if (dragTargetPile.removeCompleteSet()) {
completedSets += 1;
updateScore();
updateCompletedSpiders();
// Animate spider
var spider = LK.getAsset('spider', {
anchorX: 0.5,
anchorY: 0.5
});
spider.x = dragTargetPile.x + CARD_WIDTH / 2;
spider.y = dragTargetPile.y + dragTargetPile.cards.length * Math.floor(CARD_HEIGHT * 0.22) + CARD_HEIGHT / 2;
game.addChild(spider);
tween(spider, {
y: COMPLETED_Y,
x: COMPLETED_X + (completedSets - 1) * Math.floor(CARD_WIDTH * 0.6)
}, {
duration: 800,
easing: tween.easeOut,
onFinish: function onFinish() {
if (spider.parent) spider.parent.removeChild(spider);
updateCompletedSpiders();
}
});
}
// Win condition: 8 sets
if (completedSets >= 8) {
LK.showYouWin();
return;
}
} else {
// Return to original pile
for (var i = 0; i < draggingCards.length; i++) {
draggingCards[i].x = dragStartX - draggingFromPile.x;
draggingCards[i].y = dragStartY - draggingFromPile.y + i * Math.floor(CARD_HEIGHT * 0.22);
draggingFromPile.addChild(draggingCards[i]);
}
draggingFromPile.layout();
}
// Deselect
for (var i = 0; i < draggingCards.length; i++) {
draggingCards[i].selected = false;
draggingCards[i].updateSelected();
}
draggingCards = null;
draggingFromPile = null;
dragValidTarget = null;
dragTargetPile = null;
};
// Deal new row
dealBtn.down = function (x, y, obj) {
if (!canDeal) return;
// Only allow if all tableau piles have at least one card
for (var i = 0; i < tableauPiles.length; i++) {
if (tableauPiles[i].cards.length === 0) return;
}
if (stockPile.isEmpty()) return;
canDeal = false;
// Animate deal
var dealt = stockPile.dealToTableau(tableauPiles);
if (dealt) {
// Flip top card of each pile
for (var i = 0; i < tableauPiles.length; i++) {
tableauPiles[i].topCard().flip(true);
}
}
// Allow next deal after short delay
LK.setTimeout(function () {
canDeal = true;
}, 400);
};
// Touch on stock pile (deal)
stockPile.down = function (x, y, obj) {
dealBtn.down(x, y, obj);
};
// Reset game
function resetGame() {
// Remove all cards
for (var i = 0; i < tableauPiles.length; i++) {
var pile = tableauPiles[i];
while (pile.cards.length > 0) {
var c = pile.cards.pop();
if (c.parent) c.parent.removeChild(c);
}
}
while (stockPile.cards.length > 0) {
var c = stockPile.cards.pop();
if (c.parent) c.parent.removeChild(c);
}
completedSets = 0;
updateScore();
updateCompletedSpiders();
canDeal = true;
draggingCards = null;
draggingFromPile = null;
dragValidTarget = null;
dragTargetPile = null;
dealInitial();
}
// Game over: no more moves
function checkGameOver() {
// If no moves and stock is empty
var canMove = false;
for (var i = 0; i < tableauPiles.length; i++) {
var pile = tableauPiles[i];
for (var j = 0; j < pile.cards.length; j++) {
if (pile.canMoveSequence(j)) {
// Try to move to another pile
var seq = [];
for (var k = j; k < pile.cards.length; k++) seq.push(pile.cards[k]);
for (var t = 0; t < tableauPiles.length; t++) {
if (t === i) continue;
if (tableauPiles[t].canAccept(seq)) {
canMove = true;
break;
}
}
}
if (canMove) break;
}
if (canMove) break;
}
if (!canMove && stockPile.isEmpty()) {
LK.showGameOver();
}
}
// Game update
game.update = function () {
// Check for game over
checkGameOver();
};
// Start game
dealInitial();