User prompt
Casi, que se trasladen formando una orbita respecto al centro de la pantalla ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Ok, has que roten formando un circulo ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Casi, que los assets formen un circulo entre los 4, que no roten en su lugar ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Cambia el asset del campo de batalla por 4 assets cuadrados un poco más pequeños que giren formando un circulo, que los assets sean distintos entre sí ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Sube y baja respectivamente un poco más, aun no se visualizan bien, queremos que las cartas no les estorben
User prompt
Sube el texto de Enemy y baja el de Player, de forma que se puedan visualizar mejor
User prompt
Cuando se selecciona cualquier botón ya sea attack o defense, muestra la carta que usó el enemigo a la derecha, igual a la previsualización
User prompt
Aumenta su tamaño otro 100%
User prompt
Aumenta los texto del sistema, de modo que sean un poco más grandes al tamaño de los botones Attack y Defense
User prompt
Elimina el texto blanco fuera de la carta en la previsualización de las cartas y aumenta el tamaño de la previsualización un 10%
User prompt
Crea un asset que será el mismo para todas las cartas color blanco semitransparente, de modo que quede debajo del nombre de la carta, atk y def para poderse leer sencillamente
User prompt
Agrega un asset diferente para el botón de attack, del mismo tamaño que defense pero en rojo
User prompt
Cambia los assets de los marcos de las cartas, es decir, que los de tipo tierra sea un solo asset, tipo aire uno solo, tipo fuego uno solo y tipo agua uno solo, los contenidos deben mantenerse como están
User prompt
Baja los textos Breeze, sand, etc de las cartas, justo encima de los texto de atk y def
User prompt
Aumenta un poco estos assets un 25%
User prompt
Has que los assets de cada figura: Breeze, sand, etc, sean un 50% más pequeño ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Crea un asset para cada carta, es decir, que no sean assets comunes para cada tipo
User prompt
Agrega un asset para cada objeto: "Flame", "Sand", etc, en lugar de uno común para los 4 elementos
User prompt
Agrégale a los textos de ataque y defensa un pequeño contorno blanco
Code edit (1 edits merged)
Please save this source code
User prompt
El color de ataque debe ser de un color vino intenso y defensa de un color azul marino
User prompt
Baja un poco el texto de ataque y defensa en la carta
User prompt
Sube un poco el texto Has que el marco de las cartas sea un poco más ancho un poco más alto
User prompt
Es decir, centra el texto en X y en Y
User prompt
Centra los textos de "Sand", "Wind", etc. respecto al eje X
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var Card = Container.expand(function (cardData) { var self = Container.call(this); self.cardData = cardData; self.isSelected = false; var cardBg = self.attachAsset(cardData.element.toLowerCase() + 'CardBase', { anchorX: 0.5, anchorY: 0.5, scaleX: 1.2, scaleY: 1.15 }); var elementGraphic = self.attachAsset(cardData.name.toLowerCase() + 'Card', { anchorX: 0.5, anchorY: 0.5, y: -20 }); var textBg = self.attachAsset('textBackground', { anchorX: 0.5, anchorY: 0.5, y: 95, alpha: 0.7 }); var nameText = new Text2(cardData.name, { size: 24, fill: 0x000000 }); nameText.anchor.set(0.5, 0.5); nameText.x = 0; nameText.y = 70; self.addChild(nameText); var attackText = new Text2('ATK: ' + cardData.attack, { size: 20, fill: 0xcc1010, stroke: 0xFFFFFF, strokeThickness: 2 }); attackText.anchor.set(0.5, 0.5); attackText.y = 95; self.addChild(attackText); var defenseText = new Text2('DEF: ' + cardData.defense, { size: 20, fill: 0x2795c4, stroke: 0xFFFFFF, strokeThickness: 2 }); defenseText.anchor.set(0.5, 0.5); defenseText.y = 120; self.addChild(defenseText); self.setSelected = function (selected) { self.isSelected = selected; if (selected) { self.scaleX = 1.1; self.scaleY = 1.1; } else { self.scaleX = 1.0; self.scaleY = 1.0; } }; self.down = function (x, y, obj) { if (gameState === 'selectCard' && !self.isSelected || gameState === 'selectMode' && !self.isSelected) { selectCard(self); LK.getSound('cardSelect').play(); } }; return self; }); var ModeButton = Container.expand(function (mode, color) { var self = Container.call(this); self.mode = mode; var buttonBg = self.attachAsset(mode.toLowerCase() + 'Button', { anchorX: 0.5, anchorY: 0.5 }); var buttonText = new Text2(mode.toUpperCase(), { size: 45, fill: 0xFFFFFF }); buttonText.anchor.set(0.5, 0.5); self.addChild(buttonText); self.down = function (x, y, obj) { if (gameState === 'selectMode' && selectedCard) { playerMode = mode.toLowerCase(); startBattle(); } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x0f1419 }); /**** * Game Code ****/ // Individual card element graphics // Individual card base assets // Card database var cardDatabase = [{ name: 'Sea', element: 'Water', attack: 100, defense: 90 }, { name: 'Rain', element: 'Water', attack: 50, defense: 70 }, { name: 'Tsunami', element: 'Water', attack: 120, defense: 60 }, { name: 'River', element: 'Water', attack: 70, defense: 80 }, { name: 'Ice', element: 'Water', attack: 80, defense: 100 }, { name: 'Inferno', element: 'Fire', attack: 130, defense: 50 }, { name: 'Ember', element: 'Fire', attack: 60, defense: 40 }, { name: 'Lightning', element: 'Fire', attack: 110, defense: 70 }, { name: 'Flame', element: 'Fire', attack: 90, defense: 60 }, { name: 'Spark', element: 'Fire', attack: 40, defense: 30 }, { name: 'Mountain', element: 'Earth', attack: 80, defense: 120 }, { name: 'Stone', element: 'Earth', attack: 70, defense: 100 }, { name: 'Boulder', element: 'Earth', attack: 100, defense: 110 }, { name: 'Sand', element: 'Earth', attack: 50, defense: 90 }, { name: 'Crystal', element: 'Earth', attack: 90, defense: 85 }, { name: 'Tornado', element: 'Air', attack: 110, defense: 80 }, { name: 'Breeze', element: 'Air', attack: 45, defense: 55 }, { name: 'Gale', element: 'Air', attack: 85, defense: 75 }, { name: 'Wind', element: 'Air', attack: 65, defense: 65 }, { name: 'Storm', element: 'Air', attack: 105, defense: 70 }]; // Game state variables var gameState = 'selectCard'; // 'selectCard', 'selectMode', 'battle', 'result' var playerHand = []; var enemyHand = []; var selectedCard = null; var enemySelectedCard = null; var playerMode = null; var enemyMode = null; var battleResult = null; // UI elements var handContainer = new Container(); var modeButtons = new Container(); var battleArea = null; var statusText = null; var playerModeText = null; var enemyModeText = null; var enlargedCardContainer = new Container(); var enlargedCard = null; // Initialize game function initializeGame() { // Deal 5 random cards to each player var shuffledDeck = shuffleArray([].concat(cardDatabase)); for (var i = 0; i < 5; i++) { playerHand.push(shuffledDeck[i]); enemyHand.push(shuffledDeck[i + 5]); } setupUI(); displayPlayerHand(); } 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 setupUI() { // Hand container for player cards handContainer.x = 1024; handContainer.y = 2400; game.addChild(handContainer); // Mode selection buttons var attackButton = new ModeButton('Attack', 0xFF4444); attackButton.x = 800; attackButton.y = 1800; var defenseButton = new ModeButton('Defense', 0x4444FF); defenseButton.x = 1250; defenseButton.y = 1800; modeButtons.addChild(attackButton); modeButtons.addChild(defenseButton); game.addChild(modeButtons); modeButtons.visible = false; // Battle area battleArea = LK.getAsset('battleArea', { anchorX: 0.5, anchorY: 0.5 }); battleArea.x = 1024; battleArea.y = 1200; game.addChild(battleArea); // Status text statusText = new Text2('Select a card from your hand', { size: 50, fill: 0xFFFFFF }); statusText.anchor.set(0.5, 0.5); statusText.x = 1024; statusText.y = 400; game.addChild(statusText); // Mode display texts playerModeText = new Text2('', { size: 36, fill: 0xFFFF00 }); playerModeText.anchor.set(0.5, 0.5); playerModeText.x = 800; playerModeText.y = 1400; game.addChild(playerModeText); enemyModeText = new Text2('', { size: 36, fill: 0xFF8800 }); enemyModeText.anchor.set(0.5, 0.5); enemyModeText.x = 1248; enemyModeText.y = 1000; game.addChild(enemyModeText); // Enlarged card display area enlargedCardContainer.x = 300; enlargedCardContainer.y = 1200; game.addChild(enlargedCardContainer); } function displayPlayerHand() { // Clear existing cards for (var i = handContainer.children.length - 1; i >= 0; i--) { handContainer.removeChild(handContainer.children[i]); } // Display current hand for (var i = 0; i < playerHand.length; i++) { var card = new Card(playerHand[i]); card.x = (i - 2) * 200; // Center the hand card.handIndex = i; handContainer.addChild(card); } } function selectCard(cardObj) { // If this card is already selected and we're in selectMode, don't do anything if (selectedCard === cardObj && gameState === 'selectMode') { return; } // Deselect all cards for (var i = 0; i < handContainer.children.length; i++) { handContainer.children[i].setSelected(false); } // Select this card cardObj.setSelected(true); selectedCard = cardObj; // Clear previous enlarged card with animation if it exists if (enlargedCard) { tween.stop(enlargedCard); tween(enlargedCard, { alpha: 0, scaleX: 0.5, scaleY: 0.5 }, { duration: 150, easing: tween.easeIn, onFinish: function onFinish() { enlargedCardContainer.removeChild(enlargedCard); enlargedCard = null; // Create new enlarged card after old one is removed createEnlargedCard(cardObj); } }); } else { // No previous enlarged card, create new one immediately createEnlargedCard(cardObj); } // Move to mode selection only if not already there if (gameState !== 'selectMode') { gameState = 'selectMode'; statusText.setText('Choose Attack or Defense mode'); modeButtons.visible = true; } } function createEnlargedCard(cardObj) { // Create enlarged version of selected card enlargedCard = new Card(cardObj.cardData); enlargedCard.scaleX = 2.75; enlargedCard.scaleY = 2.75; enlargedCard.x = 0; enlargedCard.y = 0; // Start with enlarged card invisible and tween it in enlargedCard.alpha = 0; enlargedCard.scaleX = 0.5; enlargedCard.scaleY = 0.5; enlargedCardContainer.addChild(enlargedCard); // Animate enlarged card appearing tween(enlargedCard, { alpha: 1, scaleX: 2.75, scaleY: 2.75 }, { duration: 300, easing: tween.easeOut }); } function startBattle() { gameState = 'battle'; modeButtons.visible = false; // Enemy AI selects card and mode var enemyCardIndex = Math.floor(Math.random() * enemyHand.length); enemySelectedCard = enemyHand[enemyCardIndex]; enemyMode = Math.random() < 0.5 ? 'attack' : 'defense'; // Display selected cards and modes statusText.setText('Battle in progress...'); playerModeText.setText('Player: ' + playerMode.toUpperCase()); enemyModeText.setText('Enemy: ' + enemyMode.toUpperCase()); // Resolve battle after a delay LK.setTimeout(function () { resolveBattle(); }, 2000); LK.getSound('cardBattle').play(); } function resolveBattle() { var playerValue, enemyValue; var playerCard = selectedCard.cardData; var enemyCard = enemySelectedCard; // Determine values based on modes if (playerMode === 'attack') { playerValue = playerCard.attack; } else { playerValue = playerCard.defense; } if (enemyMode === 'attack') { enemyValue = enemyCard.attack; } else { enemyValue = enemyCard.defense; } // Resolve battle outcome var resultText = ''; if (playerMode === 'defense' && enemyMode === 'defense') { // Both defense - both cards return to hand resultText = 'Both defended - cards returned to hand'; battleResult = 'tie'; } else if (playerValue > enemyValue) { // Player wins resultText = 'You win this round!'; battleResult = 'playerWin'; // Remove enemy card var enemyIndex = enemyHand.indexOf(enemySelectedCard); enemyHand.splice(enemyIndex, 1); LK.getSound('cardWin').play(); } else if (enemyValue > playerValue) { // Enemy wins resultText = 'Enemy wins this round!'; battleResult = 'enemyWin'; // Remove player card var playerIndex = selectedCard.handIndex; playerHand.splice(playerIndex, 1); } else { // Tie - both cards return to hand resultText = 'Tie - both cards returned to hand'; battleResult = 'tie'; } statusText.setText(resultText); // Check win conditions LK.setTimeout(function () { checkWinCondition(); }, 2000); } function checkWinCondition() { if (playerHand.length === 0) { statusText.setText('Game Over - You lost all your cards!'); LK.showGameOver(); return; } else if (enemyHand.length === 0) { statusText.setText('Victory - Enemy has no cards left!'); LK.setScore(playerHand.length * 100); LK.showYouWin(); return; } // Continue to next round resetForNextRound(); } function resetForNextRound() { selectedCard = null; enemySelectedCard = null; playerMode = null; enemyMode = null; battleResult = null; playerModeText.setText(''); enemyModeText.setText(''); gameState = 'selectCard'; statusText.setText('Select a card from your hand'); // Clear enlarged card display if (enlargedCard) { tween(enlargedCard, { alpha: 0, scaleX: 0.5, scaleY: 0.5 }, { duration: 200, easing: tween.easeIn, onFinish: function onFinish() { enlargedCardContainer.removeChild(enlargedCard); enlargedCard = null; } }); } displayPlayerHand(); } // Initialize the game initializeGame(); game.update = function () { // Update game logic if needed };
===================================================================
--- original.js
+++ change.js
@@ -270,26 +270,26 @@
battleArea.y = 1200;
game.addChild(battleArea);
// Status text
statusText = new Text2('Select a card from your hand', {
- size: 36,
+ size: 50,
fill: 0xFFFFFF
});
statusText.anchor.set(0.5, 0.5);
statusText.x = 1024;
statusText.y = 400;
game.addChild(statusText);
// Mode display texts
playerModeText = new Text2('', {
- size: 24,
+ size: 36,
fill: 0xFFFF00
});
playerModeText.anchor.set(0.5, 0.5);
playerModeText.x = 800;
playerModeText.y = 1400;
game.addChild(playerModeText);
enemyModeText = new Text2('', {
- size: 24,
+ size: 36,
fill: 0xFF8800
});
enemyModeText.anchor.set(0.5, 0.5);
enemyModeText.x = 1248;
Un tsunami
A Stone
A boulder
An ember
A spark
Three small ember
A river
A wind symbol
Ice floe
A purple cristal rock
Columnas de fuego rojo y azul
Big storm
A cold gale
El margen para una carta que representa el tipo tierra
Un marco para una carta que represente al tipo aire
Un marco para una carta que represente al tipo agua
The rain
A big mountain
Pile of yellow sand
El margen para una carta que representa el tipo fuego
A tornado
The sea
El margen de un botón que indica ataque de un juego de mesa, color rojo sin texto
Crea una versión de este marco en color azul
Marco cuadrado, delgado color dorado con un fondo blanco. In-Game asset. 2d. High contrast. No shadows. card
Símbolo del elemento aire
Símbolo de la tierra color verde
Símbolo del fuego color rojo
Símbolo del agua color azul
A lightning
Crea la parte inversa de una carta que representa el elemento agua, no debe tener texto ni espacio vacío, deben ser corrientes de agua y rocas en la parte inferior
Crea la parte inversa de una carta que representa el elemento fuego, no debe tener texto ni espacio vacío, deben ser flamas y montículos rojos en la parte inferior
Crea la parte inversa de una carta que representa el elemento tierra, no debe tener texto ni espacio vacío, deben ser montículos de tierra y algunas hierbas verdes repartidas
A whirlwind
A cloud
A volcano with lava
Un cubo de hielo
Una niebla densa
an ashes
A brown cave
Una pieza en forma de prisma hexagonal de metal
4 segmentos de flecha que forman un circulo en sentido horario, color morado
The ether
The moon
El símbolo de Gaia, sin texto, color verde y café
The sun