User prompt
Excelente!, sube un poco el centro del circulo āŖš” Consider importing and using the following plugins: @upit/tween.v1
User prompt
Haz que los battle square se muevan, formando un ciĢrculo respecto al centro de la pantalla, usa la funcioĢn parameĢtrica del circulo āŖš” Consider importing and using the following plugins: @upit/tween.v1
User prompt
Has que dejen de rotar āŖš” Consider importing and using the following plugins: @upit/tween.v1
Code edit (2 edits merged)
Please save this source code
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 maĢs pequenĢos que giren formando un circulo, que los assets sean distintos entre siĢ āŖš” Consider importing and using the following plugins: @upit/tween.v1
User prompt
Sube y baja respectivamente un poco maĢ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 botoĢn ya sea attack o defense, muestra la carta que usoĢ el enemigo a la derecha, igual a la previsualizacioĢn
User prompt
Aumenta su tamanĢo otro 100%
User prompt
Aumenta los texto del sistema, de modo que sean un poco maĢs grandes al tamanĢo de los botones Attack y Defense
User prompt
Elimina el texto blanco fuera de la carta en la previsualizacioĢn de las cartas y aumenta el tamanĢo de la previsualizacioĢn un 10%
User prompt
Crea un asset que seraĢ 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 botoĢn de attack, del mismo tamanĢ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 estaĢ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% maĢs pequenĢ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 comuĢn para los 4 elementos
User prompt
AgreĢgale a los textos de ataque y defensa un pequenĢo contorno blanco
Code edit (1 edits merged)
Please save this source code
Code edit (1 edits merged)
Please save this source code
/****
* 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
****/
// Card database
// Individual card base assets
// Individual card element graphics
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 battleSquares = [];
var battleSquareContainer = new Container();
var statusText = null;
var playerModeText = null;
var enemyModeText = null;
var enlargedCardContainer = new Container();
var enlargedCard = null;
var enemyCardContainer = new Container();
var enemyCard = 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 with 4 rotating squares
battleSquareContainer.x = 1024;
battleSquareContainer.y = 1200;
game.addChild(battleSquareContainer);
// Create 4 squares in circular formation around screen center
var radius = 200;
var squareAssets = ['battleSquare1', 'battleSquare2', 'battleSquare3', 'battleSquare4'];
for (var i = 0; i < 4; i++) {
var square = LK.getAsset(squareAssets[i], {
anchorX: 0.5,
anchorY: 0.5
});
// Initial position in circle around screen center (1024, 1366)
var angle = i * Math.PI * 2 / 4; // 90 degrees apart
square.x = 1024 + Math.cos(angle) * radius;
square.y = 1366 + Math.sin(angle) * radius;
square.startAngle = angle; // Store initial angle for parametric motion
game.addChild(square);
battleSquares.push(square);
}
// Status text
statusText = new Text2('Select a card from your hand', {
size: 100,
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: 72,
fill: 0xFFFF00
});
playerModeText.anchor.set(0.5, 0.5);
playerModeText.x = 800;
playerModeText.y = 1700;
game.addChild(playerModeText);
enemyModeText = new Text2('', {
size: 72,
fill: 0xFF8800
});
enemyModeText.anchor.set(0.5, 0.5);
enemyModeText.x = 1248;
enemyModeText.y = 700;
game.addChild(enemyModeText);
// Enlarged card display area
enlargedCardContainer.x = 300;
enlargedCardContainer.y = 1200;
game.addChild(enlargedCardContainer);
// Enemy card display area
enemyCardContainer.x = 1750;
enemyCardContainer.y = 1200;
game.addChild(enemyCardContainer);
}
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 createEnemyCardPreview(cardData) {
// Clear previous enemy card if it exists
if (enemyCard) {
tween.stop(enemyCard);
tween(enemyCard, {
alpha: 0,
scaleX: 0.5,
scaleY: 0.5
}, {
duration: 150,
easing: tween.easeIn,
onFinish: function onFinish() {
enemyCardContainer.removeChild(enemyCard);
enemyCard = null;
// Create new enemy card after old one is removed
createNewEnemyCard(cardData);
}
});
} else {
// No previous enemy card, create new one immediately
createNewEnemyCard(cardData);
}
}
function createNewEnemyCard(cardData) {
// Create enlarged version of enemy's selected card
enemyCard = new Card(cardData);
enemyCard.scaleX = 2.75;
enemyCard.scaleY = 2.75;
enemyCard.x = 0;
enemyCard.y = 0;
// Start with enemy card invisible and tween it in
enemyCard.alpha = 0;
enemyCard.scaleX = 0.5;
enemyCard.scaleY = 0.5;
enemyCardContainer.addChild(enemyCard);
// Animate enemy card appearing
tween(enemyCard, {
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());
// Show enemy card preview
createEnemyCardPreview(enemySelectedCard);
// 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;
}
});
}
// Clear enemy card display
if (enemyCard) {
tween(enemyCard, {
alpha: 0,
scaleX: 0.5,
scaleY: 0.5
}, {
duration: 200,
easing: tween.easeIn,
onFinish: function onFinish() {
enemyCardContainer.removeChild(enemyCard);
enemyCard = null;
}
});
}
displayPlayerHand();
}
// Initialize the game
initializeGame();
game.update = function () {
// Update battle squares using parametric circle equations
var time = LK.ticks * 0.02; // Control animation speed
var radius = 200;
var centerX = 1024;
var centerY = 1366;
for (var i = 0; i < battleSquares.length; i++) {
var square = battleSquares[i];
if (square && square.startAngle !== undefined) {
// Parametric circle: x = centerX + radius * cos(angle + time), y = centerY + radius * sin(angle + time)
var angle = square.startAngle + time;
square.x = centerX + radius * Math.cos(angle);
square.y = centerY + radius * Math.sin(angle);
}
}
// Update game logic if needed
}; ===================================================================
--- original.js
+++ change.js
@@ -276,30 +276,15 @@
var square = LK.getAsset(squareAssets[i], {
anchorX: 0.5,
anchorY: 0.5
});
- // Position squares in circle around screen center (1024, 1366)
+ // Initial position in circle around screen center (1024, 1366)
var angle = i * Math.PI * 2 / 4; // 90 degrees apart
square.x = 1024 + Math.cos(angle) * radius;
square.y = 1366 + Math.sin(angle) * radius;
+ square.startAngle = angle; // Store initial angle for parametric motion
game.addChild(square);
battleSquares.push(square);
- // Animate each square to orbit around screen center
- var _orbitSquare2 = function _orbitSquare(squareToOrbit, startAngle, index) {
- tween(squareToOrbit, {
- x: 1024 + Math.cos(startAngle + Math.PI * 2) * radius,
- y: 1366 + Math.sin(startAngle + Math.PI * 2) * radius
- }, {
- duration: 3000 + index * 100,
- // Slightly different speeds
- easing: tween.linear,
- onFinish: function onFinish() {
- // Continue orbiting
- _orbitSquare2(squareToOrbit, startAngle + Math.PI * 2, index);
- }
- });
- };
- _orbitSquare2(square, angle, i);
}
// Status text
statusText = new Text2('Select a card from your hand', {
size: 100,
@@ -579,6 +564,20 @@
}
// Initialize the game
initializeGame();
game.update = function () {
+ // Update battle squares using parametric circle equations
+ var time = LK.ticks * 0.02; // Control animation speed
+ var radius = 200;
+ var centerX = 1024;
+ var centerY = 1366;
+ for (var i = 0; i < battleSquares.length; i++) {
+ var square = battleSquares[i];
+ if (square && square.startAngle !== undefined) {
+ // Parametric circle: x = centerX + radius * cos(angle + time), y = centerY + radius * sin(angle + time)
+ var angle = square.startAngle + time;
+ square.x = centerX + radius * Math.cos(angle);
+ square.y = centerY + radius * Math.sin(angle);
+ }
+ }
// Update game logic if needed
};
\ No newline at end of file
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 botoĢn que indica ataque de un juego de mesa, color rojo sin texto
Crea una versioĢ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
SiĢmbolo del elemento aire
SiĢmbolo de la tierra color verde
SiĢmbolo del fuego color rojo
SiĢ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 vaciĢ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 vaciĢo, deben ser flamas y montiĢculos rojos en la parte inferior
Crea la parte inversa de una carta que representa el elemento tierra, no debe tener texto ni espacio vaciĢo, deben ser montiĢ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 siĢmbolo de Gaia, sin texto, color verde y cafeĢ
The sun