Upit | Learn about creating the game MAGIC CARDS with gen AI

Play

MAGIC CARDS

antoplionyan

magiccards

13d

Playit

Look, update the way you give points, I'm telling you the point giving system: According to places: In the cave place, those who have the word wizard in their name get +1 and orcs get +1, so orc-wizard get +2 with this inference. In the castle, those who have the word warrior in their name get +1 and those who have the word human in their name get +1, so human-warrior get +2 with this inference. In the forest, those who have the word archer in their name get +1, those who have the word elf in their name get +1, so elf-archer get +2 with this inference.

#CardGame

#Strategy

#FantasyBattle

#ArenaClash

#TriadArena

Creation History

User prompt

I can't see the next-round-button. Position it so that it is to the right of my cards.

User prompt

Add the next-round-button to the bottom right of the game, press it to go to the next round, add the existing asset, press it to go to the next round

User prompt

Add the next-round-button to the bottom right of the game, press it to go to the next round

User prompt

Add next-round-button to the bottom right, click it to go to the next round

User prompt

There seems to be something strange in the game. The number of backgrounds is 3. These are castle, cave, forest and one will come randomly in each round and the bear will not come twice. And castle human-archer, human-mage, human-warrior, elf-warrior, orc-warrior will give +1 point to these cards / forest elf-archer, elf-mage, elf-archer, human-archer, orc-archer will give +1 point to these / cave orc-mage, orc-warrior, orc-archer, human-mage, elf-mage will give +1 point to these // there is nothing else. remove any spatial scoring other than these

User prompt

I can't throw the cards down when I know the cards in my hand, fix this

User prompt

It's great but I can't develop tactics and play without knowing what the cards in my hand are, so I need to know the cards in my hand.

User prompt

The player can also put the open card in the middle, and when he puts it in the middle, the card is turned upside down.

User prompt

Let the player see their cards, that is, not cardbg, but open

User prompt

player bottom middle, 1st bot left diagonal, 2nd bot right diagonal, card game, card types: (human, elf, orc) card subtypes: (warrior, archer, wizard) a total of 9 cards game each player is given 3 random cards at the beginning of the game all of the cards in the game are given, cards are given in order starting from player, bot 1 then bot 2 leaves a card on the ground, then when you click the button that says m, one of the 3 backgrounds randomly appears, and the backgrounds are forest, castle, cave these give certain advantages to the card types, castle gives +1 to humans and warriors, forest gives +1 to elves and archers, cave gives +1 to orcs and wizards. cards also have their own points, human+warrior +1, orc+wizard +1, elf+archer +1. the game will last 3 rounds in total, the one with the most points at the end of the 3 rounds wins. Only one of the location cards comes each round, so if the forest comes in the first round, it will not come in the other 2 rounds. Create a game like this.

Code edit (1 edits merged)

Please save this source code

User prompt

Triad Arena: Card Clash

Initial prompt

/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Classes
****/ 
// Card class: represents a single card (type, subtype, owner, value, etc)
var Card = Container.expand(function () {
	var self = Container.call(this);
	// Card properties (set after creation)
	self.cardType = null; // 'human', 'elf', 'orc'
	self.subType = null; // 'warrior', 'archer', 'wizard'
	self.owner = null; // 'player', 'bot1', 'bot2'
	self.value = 0; // base value (for future expansion)
	self.isFaceUp = false;
	self.cardIndex = -1; // 0-8, for unique identification
	// Card visuals
	// Card background
	var bg = self.attachAsset('cardBg', {
		width: 320,
		height: 480,
		color: 0xeeeeee,
		shape: 'box',
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Card type color overlay
	var typeColor = {
		'human': 0x6fa8dc,
		'elf': 0x93c47d,
		'orc': 0xe06666
	};
	var overlay = self.attachAsset('cardOverlay', {
		width: 300,
		height: 460,
		color: 0xffffff,
		shape: 'box',
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Card text
	var txt = new Text2('', {
		size: 60,
		fill: 0x222222
	});
	txt.anchor.set(0.5, 0.5);
	txt.x = 0;
	txt.y = 0;
	self.addChild(txt);
	// Set card data and visuals
	self.setCard = function (cardType, subType, owner, cardIndex) {
		self.cardType = cardType;
		self.subType = subType;
		self.owner = owner;
		self.cardIndex = cardIndex;
		// Set overlay color
		overlay.tint = typeColor[cardType];
		// Set text
		txt.setText(cardType.charAt(0).toUpperCase() + cardType.slice(1) + "\n" + subType.charAt(0).toUpperCase() + subType.slice(1));
	};
	// Show/hide card face
	self.setFaceUp = function (isUp) {
		self.isFaceUp = isUp;
		if (isUp) {
			overlay.alpha = 1;
			txt.alpha = 1;
		} else {
			overlay.alpha = 0.2;
			txt.alpha = 0;
		}
	};
	// For click/tap detection
	self.down = function (x, y, obj) {
		// Allow player to play a card by tapping a card in their hand
		if (self.owner === 'player' && self.isFaceUp && canPlayCard && !roundCards.player) {
			playPlayerCard(self);
		}
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x22223a
});

/**** 
* Game Code
****/ 
// --- Game Data ---
var cardTypes = ['human', 'elf', 'orc'];
var subTypes = ['warrior', 'archer', 'wizard'];
// All 9 unique cards
var allCards = [];
for (var i = 0; i < cardTypes.length; i++) {
	for (var j = 0; j < subTypes.length; j++) {
		allCards.push({
			cardType: cardTypes[i],
			subType: subTypes[j],
			cardIndex: i * 3 + j
		});
	}
}
// Location data
// Each location has a name, color, and a list of cardType+subType combos that get +1 point
var locations = [{
	name: 'Castle',
	color: 0x607d8b,
	bonuses: [{
		cardType: 'human',
		subType: 'archer'
	}, {
		cardType: 'human',
		subType: 'mage'
	}, {
		cardType: 'human',
		subType: 'warrior'
	}, {
		cardType: 'elf',
		subType: 'warrior'
	}, {
		cardType: 'orc',
		subType: 'warrior'
	}]
}, {
	name: 'Forest',
	color: 0x4caf50,
	bonuses: [{
		cardType: 'elf',
		subType: 'archer'
	}, {
		cardType: 'elf',
		subType: 'mage'
	}, {
		cardType: 'elf',
		subType: 'archer'
	},
	// duplicate, but harmless
	{
		cardType: 'human',
		subType: 'archer'
	}, {
		cardType: 'orc',
		subType: 'archer'
	}]
}, {
	name: 'Cave',
	color: 0x795548,
	bonuses: [{
		cardType: 'orc',
		subType: 'mage'
	}, {
		cardType: 'orc',
		subType: 'warrior'
	}, {
		cardType: 'orc',
		subType: 'archer'
	}, {
		cardType: 'human',
		subType: 'mage'
	}, {
		cardType: 'elf',
		subType: 'mage'
	}]
}];
// --- Game State ---
var playerHand = [];
var bot1Hand = [];
var bot2Hand = [];
var playerScore = 0;
var bot1Score = 0;
var bot2Score = 0;
var round = 1;
var maxRounds = 3;
var canPlayCard = false;
var roundCards = {
	player: null,
	bot1: null,
	bot2: null
};
var roundLocation = null;
var allCardObjs = []; // All Card instances for cleanup
var locationNode = null;
var infoText = null;
var scoreText = null;
var roundText = null;
// --- GUI Setup ---
// Info text (center top)
infoText = new Text2('Triad Arena: Card Clash', {
	size: 90,
	fill: "#fff"
});
infoText.anchor.set(0.5, 0);
LK.gui.top.addChild(infoText);
// Score text (center bottom)
scoreText = new Text2('', {
	size: 70,
	fill: "#fff"
});
scoreText.anchor.set(0.5, 1);
LK.gui.bottom.addChild(scoreText);
// Round text (center)
roundText = new Text2('', {
	size: 80,
	fill: "#fff"
});
roundText.anchor.set(0.5, 0.5);
LK.gui.center.addChild(roundText);
// --- Helper Functions ---
function shuffle(arr) {
	// Fisher-Yates shuffle
	for (var i = arr.length - 1; i > 0; i--) {
		var j = Math.floor(Math.random() * (i + 1));
		var t = arr[i];
		arr[i] = arr[j];
		arr[j] = t;
	}
	return arr;
}
function dealHands() {
	var deck = allCards.slice();
	shuffle(deck);
	playerHand = deck.slice(0, 3);
	bot1Hand = deck.slice(3, 6);
	bot2Hand = deck.slice(6, 9);
}
function updateScoreText() {
	scoreText.setText("You: " + playerScore + "   Bot1: " + bot1Score + "   Bot2: " + bot2Score);
}
function updateRoundText(msg) {
	if (msg) {
		roundText.setText(msg);
	} else {
		roundText.setText("Round " + round + " / " + maxRounds);
	}
}
function clearBoard() {
	for (var i = 0; i < allCardObjs.length; i++) {
		allCardObjs[i].destroy();
	}
	allCardObjs = [];
	if (locationNode) {
		locationNode.destroy();
		locationNode = null;
	}
}
function showLocation(location) {
	// Show location in center
	locationNode = LK.getAsset('locationBg', {
		width: 600,
		height: 200,
		color: location.color,
		shape: 'box',
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2048 / 2,
		y: 2732 / 2 - 350
	});
	game.addChild(locationNode);
	var locText = new Text2(location.name, {
		size: 90,
		fill: "#fff"
	});
	locText.anchor.set(0.5, 0.5);
	locText.x = 0;
	locText.y = 0;
	locationNode.addChild(locText);
	// Bonus info
	var bonusStr = "Bonuses:";
	for (var i = 0; i < location.bonuses.length; i++) {
		var b = location.bonuses[i];
		bonusStr += "\n" + b.cardType.charAt(0).toUpperCase() + b.cardType.slice(1) + "-" + b.subType.charAt(0).toUpperCase() + b.subType.slice(1);
	}
	var bonusText = new Text2(bonusStr, {
		size: 50,
		fill: "#fff"
	});
	bonusText.anchor.set(0.5, 0.5);
	bonusText.x = 0;
	bonusText.y = 70;
	locationNode.addChild(bonusText);
}
function layoutHands() {
	// Player hand (bottom)
	var spacing = 400;
	var startX = 2048 / 2 - spacing;
	var y = 2732 - 400;
	for (var i = 0; i < playerHand.length; i++) {
		var c = new Card();
		c.setCard(playerHand[i].cardType, playerHand[i].subType, 'player', playerHand[i].cardIndex);
		c.x = startX + i * spacing;
		c.y = y;
		// Show player's hand face up so the player can see their cards
		c.setFaceUp(true);
		game.addChild(c);
		allCardObjs.push(c);
	}
	// Bot1 hand (top)
	y = 400;
	for (var i = 0; i < bot1Hand.length; i++) {
		var c = new Card();
		c.setCard(bot1Hand[i].cardType, bot1Hand[i].subType, 'bot1', bot1Hand[i].cardIndex);
		c.x = startX + i * spacing;
		c.y = y;
		c.setFaceUp(false);
		game.addChild(c);
		allCardObjs.push(c);
	}
	// Bot2 hand (left)
	var x = 400;
	var spacingY = 400;
	var startY = 2732 / 2 - spacingY;
	for (var i = 0; i < bot2Hand.length; i++) {
		var c = new Card();
		c.setCard(bot2Hand[i].cardType, bot2Hand[i].subType, 'bot2', bot2Hand[i].cardIndex);
		c.x = x;
		c.y = startY + i * spacingY;
		c.setFaceUp(false);
		game.addChild(c);
		allCardObjs.push(c);
	}
}
function playPlayerCard(cardObj) {
	if (!canPlayCard || roundCards.player) return;
	canPlayCard = false;
	roundCards.player = cardObj;
	cardObj.setFaceUp(true);
	// Animate to center
	tween(cardObj, {
		x: 2048 / 2 - 300,
		y: 2732 / 2 + 250
	}, {
		duration: 400,
		easing: tween.cubicOut
	});
	// Remove from hand
	for (var i = 0; i < playerHand.length; i++) {
		if (playerHand[i].cardIndex === cardObj.cardIndex) {
			playerHand.splice(i, 1);
			break;
		}
	}
	// Bots play after short delay
	LK.setTimeout(function () {
		playBotCards();
	}, 500);
}
function playBotCards() {
	// Bot1: pick random card
	var idx1 = Math.floor(Math.random() * bot1Hand.length);
	var card1 = null;
	for (var i = 0; i < allCardObjs.length; i++) {
		if (allCardObjs[i].owner === 'bot1' && allCardObjs[i].cardIndex === bot1Hand[idx1].cardIndex) {
			card1 = allCardObjs[i];
			break;
		}
	}
	roundCards.bot1 = card1;
	card1.setFaceUp(true);
	tween(card1, {
		x: 2048 / 2,
		y: 2732 / 2 - 250
	}, {
		duration: 400,
		easing: tween.cubicOut
	});
	bot1Hand.splice(idx1, 1);
	// Bot2: pick random card
	var idx2 = Math.floor(Math.random() * bot2Hand.length);
	var card2 = null;
	for (var i = 0; i < allCardObjs.length; i++) {
		if (allCardObjs[i].owner === 'bot2' && allCardObjs[i].cardIndex === bot2Hand[idx2].cardIndex) {
			card2 = allCardObjs[i];
			break;
		}
	}
	roundCards.bot2 = card2;
	card2.setFaceUp(true);
	tween(card2, {
		x: 2048 / 2 + 300,
		y: 2732 / 2 + 250
	}, {
		duration: 400,
		easing: tween.cubicOut
	});
	bot2Hand.splice(idx2, 1);
	// Reveal location after short delay
	LK.setTimeout(function () {
		revealLocationAndScore();
	}, 700);
}
function revealLocationAndScore() {
	// Pick random location
	roundLocation = locations[Math.floor(Math.random() * locations.length)];
	showLocation(roundLocation);
	// Calculate points
	var pts = {
		player: 0,
		bot1: 0,
		bot2: 0
	};
	var bonus = roundLocation.bonus;
	// Each card: 1 point base, +1 if matches a bonus combo for this location
	function calcCardPoints(card) {
		var p = 1;
		for (var i = 0; i < roundLocation.bonuses.length; i++) {
			var b = roundLocation.bonuses[i];
			if (card.cardType === b.cardType && card.subType === b.subType) {
				p += 1;
				break;
			}
		}
		return p;
	}
	pts.player = calcCardPoints(roundCards.player);
	pts.bot1 = calcCardPoints(roundCards.bot1);
	pts.bot2 = calcCardPoints(roundCards.bot2);
	// Animate cards (flash winner)
	var maxPts = Math.max(pts.player, pts.bot1, pts.bot2);
	if (pts.player === maxPts) {
		LK.effects.flashObject(roundCards.player, 0xffff00, 700);
	}
	if (pts.bot1 === maxPts) {
		LK.effects.flashObject(roundCards.bot1, 0xffff00, 700);
	}
	if (pts.bot2 === maxPts) {
		LK.effects.flashObject(roundCards.bot2, 0xffff00, 700);
	}
	// Update scores
	playerScore += pts.player;
	bot1Score += pts.bot1;
	bot2Score += pts.bot2;
	updateScoreText();
	// Show round result
	var msg = "You: +" + pts.player + "  Bot1: +" + pts.bot1 + "  Bot2: +" + pts.bot2;
	updateRoundText(msg);
	// Next round or end after delay
	LK.setTimeout(function () {
		round++;
		if (round > maxRounds) {
			endGame();
		} else {
			startRound();
		}
	}, 1500);
}
function startRound() {
	clearBoard();
	roundCards = {
		player: null,
		bot1: null,
		bot2: null
	};
	roundLocation = null;
	canPlayCard = true;
	updateScoreText();
	updateRoundText();
	layoutHands();
	infoText.setText("Pick a card to play!");
}
function endGame() {
	clearBoard();
	canPlayCard = false;
	var winner = '';
	if (playerScore > bot1Score && playerScore > bot2Score) {
		winner = "You win!";
		LK.showYouWin();
	} else if (playerScore === bot1Score && playerScore === bot2Score) {
		winner = "It's a 3-way tie!";
		LK.showGameOver();
	} else if (playerScore === bot1Score && playerScore > bot2Score) {
		winner = "Tie with Bot1!";
		LK.showGameOver();
	} else if (playerScore === bot2Score && playerScore > bot1Score) {
		winner = "Tie with Bot2!";
		LK.showGameOver();
	} else if (bot1Score > playerScore && bot1Score > bot2Score) {
		winner = "Bot1 wins!";
		LK.showGameOver();
	} else if (bot2Score > playerScore && bot2Score > bot1Score) {
		winner = "Bot2 wins!";
		LK.showGameOver();
	} else {
		winner = "Game Over!";
		LK.showGameOver();
	}
	infoText.setText(winner);
	updateRoundText('');
}
// --- Game Start ---
// Track which locations have been used this game
var availableLocations = [];
function newGame() {
	playerScore = 0;
	bot1Score = 0;
	bot2Score = 0;
	round = 1;
	canPlayCard = false;
	roundCards = {
		player: null,
		bot1: null,
		bot2: null
	};
	roundLocation = null;
	clearBoard();
	dealHands();
	updateScoreText();
	updateRoundText();
	infoText.setText("Pick a card to play!");
	layoutHands();
	canPlayCard = true;
	// Reset available locations for the new game
	availableLocations = locations.slice();
	// Show M button for location reveal
	showMButton();
}
// M button for revealing location
var mButton = null;
function showMButton() {
	if (mButton) {
		mButton.destroy();
		mButton = null;
	}
	mButton = new Text2('M', {
		size: 120,
		fill: "#fff"
	});
	mButton.anchor.set(0.5, 0.5);
	// Place at center top, but not in top left 100x100
	mButton.x = 2048 / 2;
	mButton.y = 200;
	mButton.interactive = true;
	mButton.buttonMode = true;
	mButton.alpha = 1;
	mButton.visible = true;
	mButton.down = function (x, y, obj) {
		// Only allow if all cards are played and location not yet revealed
		if (roundCards.player && roundCards.bot1 && roundCards.bot2 && !roundLocation) {
			mButton.visible = false;
			mButton.alpha = 0;
			revealLocationAndScore();
		}
	};
	LK.gui.top.addChild(mButton);
}
// Override revealLocationAndScore to ensure unique locations per round
newGame();
// --- Game move handler (for drag, not used here) ---
game.move = function (x, y, obj) {
	// No drag in this game
};
// --- Next Round Button ---
var nextRoundButton = null;
function showNextRoundButton() {
	if (nextRoundButton) {
		nextRoundButton.destroy();
		nextRoundButton = null;
	}
	// Calculate position to the right of the player's hand
	var spacing = 400;
	var handCount = playerHand.length > 0 ? playerHand.length : 3;
	var startX = 2048 / 2 - spacing;
	var rightMostCardX = startX + (handCount - 1) * spacing;
	var buttonX = rightMostCardX + 220; // 220 is button width, so it sits just to the right
	var buttonY = 2732 - 400; // align with hand Y
	nextRoundButton = LK.getAsset('next-round-button', {
		width: 220,
		height: 120,
		anchorX: 0,
		anchorY: 0.5,
		x: buttonX + 40,
		// add a little margin
		y: buttonY
	});
	// Optionally add text overlay for clarity
	var btnText = new Text2('Next\nRound', {
		size: 48,
		fill: "#222"
	});
	btnText.anchor.set(0.5, 0.5);
	btnText.x = -110;
	btnText.y = -60;
	nextRoundButton.addChild(btnText);
	nextRoundButton.interactive = true;
	nextRoundButton.buttonMode = true;
	nextRoundButton.visible = true;
	nextRoundButton.alpha = 1;
	nextRoundButton.down = function (x, y, obj) {
		// Only allow if round is not over and all cards have been played and location revealed
		if (roundCards.player && roundCards.bot1 && roundCards.bot2 && roundLocation && round <= maxRounds) {
			nextRoundButton.visible = false;
			nextRoundButton.alpha = 0;
			round++;
			if (round > maxRounds) {
				endGame();
			} else {
				startRound();
			}
		}
	};
	LK.gui.bottomRight.addChild(nextRoundButton);
}
// Patch revealLocationAndScore to show next round button instead of auto-advancing
var _oldRevealLocationAndScore = revealLocationAndScore;
revealLocationAndScore = function revealLocationAndScore() {
	// Pick random location, but ensure unique per round
	if (!availableLocations || availableLocations.length === 0) {
		availableLocations = locations.slice();
	}
	var idx = Math.floor(Math.random() * availableLocations.length);
	roundLocation = availableLocations[idx];
	availableLocations.splice(idx, 1);
	showLocation(roundLocation);
	// Calculate points
	var pts = {
		player: 0,
		bot1: 0,
		bot2: 0
	};
	function calcCardPoints(card) {
		var p = 1;
		for (var i = 0; i < roundLocation.bonuses.length; i++) {
			var b = roundLocation.bonuses[i];
			if (card.cardType === b.cardType && card.subType === b.subType) {
				p += 1;
				break;
			}
		}
		return p;
	}
	pts.player = calcCardPoints(roundCards.player);
	pts.bot1 = calcCardPoints(roundCards.bot1);
	pts.bot2 = calcCardPoints(roundCards.bot2);
	// Animate cards (flash winner)
	var maxPts = Math.max(pts.player, pts.bot1, pts.bot2);
	if (pts.player === maxPts) {
		LK.effects.flashObject(roundCards.player, 0xffff00, 700);
	}
	if (pts.bot1 === maxPts) {
		LK.effects.flashObject(roundCards.bot1, 0xffff00, 700);
	}
	if (pts.bot2 === maxPts) {
		LK.effects.flashObject(roundCards.bot2, 0xffff00, 700);
	}
	// Update scores
	playerScore += pts.player;
	bot1Score += pts.bot1;
	bot2Score += pts.bot2;
	updateScoreText();
	// Show round result
	var msg = "You: +" + pts.player + "  Bot1: +" + pts.bot1 + "  Bot2: +" + pts.bot2;
	updateRoundText(msg);
	// Show next round button if not last round, else end game after button
	showNextRoundButton();
};
// Patch startRound and endGame to hide next round button if present
var _oldStartRound = startRound;
startRound = function startRound() {
	if (nextRoundButton) {
		nextRoundButton.visible = false;
		nextRoundButton.alpha = 0;
	}
	_oldStartRound();
};
var _oldEndGame = endGame;
endGame = function endGame() {
	if (nextRoundButton) {
		nextRoundButton.visible = false;
		nextRoundButton.alpha = 0;
	}
	_oldEndGame();
};

===================================================================
--- original.js
+++ change.js
@@ -559,16 +559,23 @@
 	if (nextRoundButton) {
 		nextRoundButton.destroy();
 		nextRoundButton = null;
 	}
-	// Create button using the existing asset
+	// Calculate position to the right of the player's hand
+	var spacing = 400;
+	var handCount = playerHand.length > 0 ? playerHand.length : 3;
+	var startX = 2048 / 2 - spacing;
+	var rightMostCardX = startX + (handCount - 1) * spacing;
+	var buttonX = rightMostCardX + 220; // 220 is button width, so it sits just to the right
+	var buttonY = 2732 - 400; // align with hand Y
 	nextRoundButton = LK.getAsset('next-round-button', {
 		width: 220,
 		height: 120,
-		anchorX: 1,
-		anchorY: 1,
-		x: 2048 - 40,
-		y: 2732 - 40
+		anchorX: 0,
+		anchorY: 0.5,
+		x: buttonX + 40,
+		// add a little margin
+		y: buttonY
 	});
 	// Optionally add text overlay for clarity
 	var btnText = new Text2('Next\nRound', {
 		size: 48,

Showing 76 to 88 of 88

1 2 3 4

Images

next round button.
In-Game asset. 2d. High contrast. No shadows

antique card background pattern magical fantasy.
In-Game asset. 2d. High contrast. No shadows

Sounds & Music

🎶

backgraund-song

Music

🎶

card-playing-sound

Music

🎶

war

Music

Used plugins

@upit/tween