User prompt
The arrows - don't make erase them after you draw them. Leave them. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Disabling is not working. I should NOT be able to reuse any element the user o the AI have used in previous rounds! ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
The buttons I used are still enabled!!! Please correct. The should be disabled, meaning 1) you can't select them 2) you can't hover them 3) they should be alpha 0.5 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
After the user or the AI have selected an element, those should be disabled. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
No, you are creating the arrow in the VS screen, it should be in the wheel screen, after the VS screen has closed. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
I want you to draw a green line with an arrow from which element defeats which, every time the player wins over the ai, by creating an arrow from the button in the wheel the user selected, to the button the AI selected. If the user lose, the arrow should be green but start from the AI button to the user button. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Please fix to no tint ↪💡 Consider importing and using the following plugins: @upit/tween.v1
Code edit (1 edits merged)
Please save this source code
User prompt
Please fix the bug: 'ReferenceError: destroy is not defined' in or related to this line: 'destroy(effect);' Line Number: 82
Code edit (1 edits merged)
Please save this source code
User prompt
Now it's scaling buttons but the places I'm hovering are not over the buttons. We need a better way to detect if the mouse is over a button. Keep in mind scale, local distances, anchors, etc as something is off ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
hover and leave do not exist
User prompt
When I hover over one icon, that icon and not the rest should be scaled up. Make sure no other icons except the one I'm hovering is scaled. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
No! You are scaling all of them, and also they are not scaling down. You should only scale the one I'm hovering. After I move out the mouse, it should scale down. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
ok as i hover the element buttons / icons, I want you to scale them x 2. When i hover out then should come back to normality. And that only in the wheel, not in the VS screen ↪💡 Consider importing and using the following plugins: @upit/tween.v1
Code edit (1 edits merged)
Please save this source code
User prompt
Set the image 'background' to the background of the game behidne verything (probably created first and then the rest of the caontainers added on top?)
Code edit (1 edits merged)
Please save this source code
User prompt
Ok, in the battle (xxx VS yyy), the texts should be much lower, like 100 pixels lower than they are now
Code edit (2 edits merged)
Please save this source code
User prompt
Move the name of the elements from the center of the element button / icon to a position that is closer to the center of the radius of the whole wheel. To do that, calculate the position of the button and then the text should have a delta that makes it closer to that center of the wheel. Parametrize that distance so that I can modify it after.
User prompt
Make the name of the elements text to be white instead of black
Code edit (1 edits merged)
Please save this source code
User prompt
Instead of using elementIcon for everything, use the respective LK.image of that element. For example, for rock use the 'rock' from LK.init.image('rock').
User prompt
VS is only shown while the battle is in place, not in the selection wheel moment
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var BattleElement = Container.expand(function (elementType, isPlayer) { var self = Container.call(this); self.elementType = elementType; self.isPlayer = isPlayer; var background = self.attachAsset('elementButton', { anchorX: 0.5, anchorY: 0.5, scaleX: 1.5, scaleY: 1.5 }); var icon = self.attachAsset(elementType, { anchorX: 0.5, anchorY: 0.5, scaleX: 1.2, scaleY: 1.2 }); var label = new Text2(elementType.toUpperCase(), { size: 32, fill: 0xffffff }); label.anchor.set(0.5, 0.5); label.y = 220; self.addChild(label); self.playWinAnimation = function () { var effect = self.attachAsset('winEffect', { anchorX: 0.5, anchorY: 0.5, alpha: 0.7 }); tween(self, { scaleX: 1.3, scaleY: 1.3 }, { duration: 500 }); tween(effect, { scaleX: 2, scaleY: 2, alpha: 0 }, { duration: 800, onFinish: function onFinish() { self.removeChild(effect); } }); }; self.playLoseAnimation = function () { var effect = self.attachAsset('loseEffect', { anchorX: 0.5, anchorY: 0.5, alpha: 0.7 }); tween(self, { scaleX: 0.7, scaleY: 0.7, alpha: 0.5 }, { duration: 500 }); tween(effect, { scaleX: 2, scaleY: 2, alpha: 0 }, { duration: 800, onFinish: function onFinish() { self.removeChild(effect); } }); }; return self; }); var ElementButton = Container.expand(function (elementType, index) { var self = Container.call(this); self.elementType = elementType; self.index = index; self.isSelected = false; self.isDisabled = false; var button = self.attachAsset('elementButton', { anchorX: 0.5, anchorY: 0.5 }); var icon = self.attachAsset(elementType, { anchorX: 0.5, anchorY: 0.5 }); var label = new Text2(elementType.toUpperCase(), { size: 24, fill: 0xffffff }); label.anchor.set(0.5, 0.5); self.addChild(label); // Position text toward wheel center self.positionTextTowardCenter = function (centerX, centerY) { var angle = Math.atan2(self.y - centerY, self.x - centerX); var offsetX = Math.cos(angle) * textOffsetTowardCenter; var offsetY = Math.sin(angle) * textOffsetTowardCenter; label.x = -offsetX; label.y = -offsetY; }; self.setSelected = function (selected) { self.isSelected = selected; if (selected) { button.tint = 0xffd700; tween(self, { scaleX: 1.2, scaleY: 1.2 }, { duration: 200 }); } else { button.tint = 0xffffff; tween(self, { scaleX: 1.0, scaleY: 1.0 }, { duration: 200 }); } }; self.setDisabled = function (disabled) { self.isDisabled = disabled; if (disabled) { self.alpha = 0.5; button.tint = 0x666666; // Gray tint for disabled state } else { self.alpha = 1.0; if (self.isSelected) { button.tint = 0xffd700; } else { button.tint = 0xffffff; } } }; self.down = function (x, y, obj) { if (gameState === 'selection' && !self.isDisabled) { LK.getSound('select').play(); selectElement(self.elementType); } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0xffffff }); /**** * Game Code ****/ // Add background image var backgroundImage = game.attachAsset('background', { anchorX: 0.5, anchorY: 0.5, scaleX: 1.137, scaleY: 1.013 }); backgroundImage.x = 1024; backgroundImage.y = 1366; // Game elements and their relationships var elements = ['rock', 'paper', 'scissors', 'water', 'fire', 'air', 'lightning', 'tree', 'gun', 'sponge', 'smoke', 'gas', 'metal', 'ice', 'sand', 'oil']; // Element defeat relationships (each element defeats 8 others) var defeats = { // Rock: Heavy and solid, crushes fragile things, breaks weapons, absorbs energy 'rock': ['scissors', 'sponge', 'gas', 'metal', 'ice', 'gun', 'tree', 'sand'], // Paper: Wraps and covers, conducts electricity, absorbs liquids, blocks air flow 'paper': ['rock', 'metal', 'water', 'gas', 'sand', 'ice', 'air', 'smoke'], // Scissors: Sharp cutting tool, cuts through soft materials and gases 'scissors': ['paper', 'sponge', 'air', 'tree', 'gas', 'oil', 'ice', 'smoke'], // Water: Extinguishes fire, erodes materials, conducts electricity, flows through spaces 'water': ['fire', 'rock', 'scissors', 'gas', 'oil', 'sand', 'tree', 'metal'], // Fire: Burns combustible materials, melts solids, heats and expands gases 'fire': ['paper', 'scissors', 'sponge', 'ice', 'tree', 'sand', 'oil', 'smoke'], // Air: Feeds fire, disperses gases, creates pressure, moves objects 'air': ['fire', 'gas', 'smoke', 'metal', 'rock', 'oil', 'tree', 'gun'], // Lightning: Electrical discharge, conducts through metals and water, ionizes gases 'lightning': ['water', 'metal', 'gun', 'air', 'paper', 'sponge', 'smoke', 'sand'], // Tree: Absorbs water and nutrients, grows through materials, provides shelter 'tree': ['water', 'paper', 'sponge', 'smoke', 'gun', 'sand', 'ice', 'gas'], // Gun: Projectile weapon, breaks through barriers, fires through gases 'gun': ['scissors', 'rock', 'tree', 'metal', 'gas', 'ice', 'oil', 'paper'], // Sponge: Absorbs liquids and gases, flexible material, filters particles 'sponge': ['water', 'metal', 'air', 'paper', 'gas', 'rock', 'sand', 'smoke'], // Smoke: Obscures vision, suffocates, corrodes metals, covers surfaces 'smoke': ['ice', 'gun', 'rock', 'paper', 'air', 'metal', 'water', 'oil'], // Gas: Expands and fills spaces, displaces air, creates pressure, volatile 'gas': ['paper', 'ice', 'gun', 'smoke', 'air', 'scissors', 'sponge', 'sand'], // Metal: Strong and durable, conducts electricity, resists cutting, heavy 'metal': ['scissors', 'tree', 'ice', 'fire', 'gun', 'oil', 'rock', 'sand'], // Ice: Freezes liquids, slippery surface, preserves, expands when frozen 'ice': ['air', 'water', 'paper', 'sponge', 'fire', 'smoke', 'gun', 'lightning'], // Sand: Abrasive particles, absorbs liquids, extinguishes fire, buries objects 'sand': ['scissors', 'ice', 'gun', 'fire', 'air', 'paper', 'rock', 'lightning'], // Oil: Slippery liquid, flammable, coats surfaces, lubricates mechanisms 'oil': ['rock', 'scissors', 'gun', 'metal', 'water', 'gas', 'lightning', 'fire'] }; // Action keywords for how elements defeat others var actionKeywords = { 'rock': { 'scissors': 'crushes', 'sponge': 'crushes', 'gas': 'disperses', 'metal': 'breaks', 'ice': 'shatters', 'gun': 'blocks', 'tree': 'crushes', 'sand': 'compacts' }, 'paper': { 'rock': 'wraps', 'metal': 'covers', 'water': 'absorbs', 'gas': 'captures', 'sand': 'covers', 'ice': 'insulates', 'air': 'blocks', 'smoke': 'filters' }, 'scissors': { 'paper': 'cuts', 'sponge': 'cuts', 'air': 'cuts', 'tree': 'cuts', 'gas': 'cuts', 'oil': 'cuts', 'ice': 'cuts', 'smoke': 'cuts' }, 'water': { 'fire': 'extinguishes', 'rock': 'erodes', 'scissors': 'rusts', 'gas': 'dissolves', 'oil': 'displaces', 'sand': 'washes', 'tree': 'nourishes', 'metal': 'rusts' }, 'fire': { 'paper': 'burns', 'scissors': 'melts', 'sponge': 'burns', 'ice': 'melts', 'tree': 'burns', 'sand': 'heats', 'oil': 'ignites', 'smoke': 'burns' }, 'air': { 'fire': 'feeds', 'gas': 'disperses', 'smoke': 'clears', 'metal': 'oxidizes', 'rock': 'erodes', 'oil': 'evaporates', 'tree': 'sways', 'gun': 'deflects' }, 'lightning': { 'water': 'electrifies', 'metal': 'conducts', 'gun': 'shorts', 'air': 'ionizes', 'paper': 'ignites', 'sponge': 'shocks', 'smoke': 'disperses', 'sand': 'vitrifies' }, 'tree': { 'water': 'absorbs', 'paper': 'grows over', 'sponge': 'outgrows', 'smoke': 'filters', 'gun': 'blocks', 'sand': 'roots in', 'ice': 'breaks', 'gas': 'absorbs' }, 'gun': { 'scissors': 'shoots', 'rock': 'shatters', 'tree': 'shoots through', 'metal': 'pierces', 'gas': 'ignites', 'ice': 'shatters', 'oil': 'ignites', 'paper': 'pierces' }, 'sponge': { 'water': 'absorbs', 'metal': 'corrodes', 'air': 'filters', 'paper': 'soaks', 'gas': 'absorbs', 'rock': 'erodes', 'sand': 'absorbs', 'smoke': 'filters' }, 'smoke': { 'ice': 'melts', 'gun': 'jams', 'rock': 'corrodes', 'paper': 'stains', 'air': 'pollutes', 'metal': 'corrodes', 'water': 'pollutes', 'oil': 'mixes with' }, 'gas': { 'paper': 'dissolves', 'ice': 'sublimates', 'gun': 'corrodes', 'smoke': 'displaces', 'air': 'displaces', 'scissors': 'corrodes', 'sponge': 'fills', 'sand': 'displaces' }, 'metal': { 'scissors': 'dulls', 'tree': 'cuts', 'ice': 'breaks', 'fire': 'conducts', 'gun': 'reinforces', 'oil': 'repels', 'rock': 'crushes', 'sand': 'compacts' }, 'ice': { 'air': 'freezes', 'water': 'freezes', 'paper': 'freezes', 'sponge': 'freezes', 'fire': 'extinguishes', 'smoke': 'condenses', 'gun': 'jams', 'lightning': 'grounds' }, 'sand': { 'scissors': 'dulls', 'ice': 'melts', 'gun': 'jams', 'fire': 'smothers', 'air': 'fills', 'paper': 'abrades', 'rock': 'erodes', 'lightning': 'grounds' }, 'oil': { 'rock': 'lubricates', 'scissors': 'lubricates', 'gun': 'lubricates', 'metal': 'lubricates', 'water': 'floats on', 'gas': 'dissolves', 'lightning': 'insulates', 'fire': 'feeds' } }; // Game state variables var gameState = 'selection'; // 'selection', 'battle', 'result' var elementButtons = []; var playerElement = null; var aiElement = null; var playerBattleElement = null; var aiBattleElement = null; var vsText = null; var consecutiveWins = 0; var difficultyLevel = 1; var battleTimer = 0; var hoveredButton = null; // Track which button is currently hovered var victoryArrows = []; // Array to store victory arrows var usedPlayerElements = []; // Track elements used by player var usedAIElements = []; // Track elements used by AI // Function to create victory arrow between two element buttons function createVictoryArrow(fromElement, toElement) { var fromButton = null; var toButton = null; // Find the buttons for the given elements for (var i = 0; i < elementButtons.length; i++) { if (elementButtons[i].elementType === fromElement) { fromButton = elementButtons[i]; } if (elementButtons[i].elementType === toElement) { toButton = elementButtons[i]; } } if (!fromButton || !toButton) { return; // Can't create arrow if buttons not found } // Calculate arrow properties var dx = toButton.x - fromButton.x; var dy = toButton.y - fromButton.y; var distance = Math.sqrt(dx * dx + dy * dy); var angle = Math.atan2(dy, dx); // Create arrow container var arrowContainer = new Container(); // Create arrow shaft (line) var shaftLength = distance - 200; // Shorter than full distance to avoid overlapping buttons var shaftWidth = 8; for (var i = 0; i < Math.floor(shaftLength / 10); i++) { var segment = arrowContainer.attachAsset('winEffect', { width: 10, height: shaftWidth, anchorX: 0.5, anchorY: 0.5 }); segment.x = i * 10; segment.tint = 0x00ff00; // Green color } // Create arrowhead var arrowHead = arrowContainer.attachAsset('winEffect', { width: 30, height: 30, anchorX: 0.5, anchorY: 0.5 }); arrowHead.x = shaftLength; arrowHead.tint = 0x00ff00; // Green color arrowHead.scaleY = 0.5; // Make it more arrow-like // Position and rotate the arrow arrowContainer.x = fromButton.x + Math.cos(angle) * 100; // Start 100px from button center arrowContainer.y = fromButton.y + Math.sin(angle) * 100; arrowContainer.rotation = angle; arrowContainer.alpha = 0; // Add to game and animate game.addChild(arrowContainer); victoryArrows.push(arrowContainer); // Animate arrow appearance tween(arrowContainer, { alpha: 1 }, { duration: 500 }); // Auto-remove arrow after 3 seconds LK.setTimeout(function () { if (arrowContainer.parent) { arrowContainer.destroy(); var index = victoryArrows.indexOf(arrowContainer); if (index !== -1) { victoryArrows.splice(index, 1); } } }, 3000); } // Text positioning parameter - distance to move text toward wheel center var textOffsetTowardCenter = 160; // Adjustable parameter for text positioning // UI elements var titleText = new Text2('ULTIMATE ELEMENTS SHOWDOWN', { size: 48, fill: 0xFFFFFF }); titleText.anchor.set(0.5, 0); LK.gui.top.addChild(titleText); titleText.y = 50; var instructionText = new Text2('Choose your element', { size: 32, fill: 0xCCCCCC }); instructionText.anchor.set(0.5, 0.5); game.addChild(instructionText); instructionText.x = 1024; instructionText.y = 400; var scoreText = new Text2('Score: 0', { size: 36, fill: 0xFFFFFF }); scoreText.anchor.set(1, 0); LK.gui.topRight.addChild(scoreText); scoreText.x = -20; scoreText.y = 20; var winsText = new Text2('Wins: 0', { size: 32, fill: 0xFFFFFF }); winsText.anchor.set(1, 0); LK.gui.topRight.addChild(winsText); winsText.x = -20; winsText.y = 70; // Create element selection grid function createElementButtons() { var centerX = 1024; var centerY = 1400; var radius = 800; for (var i = 0; i < elements.length; i++) { var angle = i / elements.length * Math.PI * 2 - Math.PI / 2; var x = centerX + Math.cos(angle) * radius; var y = centerY + Math.sin(angle) * radius; var button = game.addChild(new ElementButton(elements[i], i)); button.x = x; button.y = y; button.positionTextTowardCenter(centerX, centerY); elementButtons.push(button); } } // Select element function function selectElement(elementType) { if (gameState !== 'selection') { return; } // Check if element has already been used by player if (usedPlayerElements.indexOf(elementType) !== -1) { return; // Don't allow selection of already used elements } playerElement = elementType; // Update button states for (var i = 0; i < elementButtons.length; i++) { elementButtons[i].setSelected(elementButtons[i].elementType === elementType); } // Start battle after short delay LK.setTimeout(function () { startBattle(); }, 500); } // AI element selection function getAIElement() { // Get available elements (not used by AI yet) var availableElements = []; for (var i = 0; i < elements.length; i++) { if (usedAIElements.indexOf(elements[i]) === -1) { availableElements.push(elements[i]); } } // If no available elements, use all elements (shouldn't happen in normal gameplay) if (availableElements.length === 0) { availableElements = elements.slice(); } // Basic AI that becomes more strategic with difficulty if (difficultyLevel === 1) { // Random selection from available elements return availableElements[Math.floor(Math.random() * availableElements.length)]; } else if (difficultyLevel === 2) { // 30% chance to counter player's last choice if (Math.random() < 0.3 && playerElement) { var counters = []; for (var i = 0; i < availableElements.length; i++) { if (defeats[availableElements[i]] && defeats[availableElements[i]].indexOf(playerElement) !== -1) { counters.push(availableElements[i]); } } if (counters.length > 0) { return counters[Math.floor(Math.random() * counters.length)]; } } return availableElements[Math.floor(Math.random() * availableElements.length)]; } else { // 50% chance to counter player's choice if (Math.random() < 0.5 && playerElement) { var counters = []; for (var i = 0; i < availableElements.length; i++) { if (defeats[availableElements[i]] && defeats[availableElements[i]].indexOf(playerElement) !== -1) { counters.push(availableElements[i]); } } if (counters.length > 0) { return counters[Math.floor(Math.random() * counters.length)]; } } return availableElements[Math.floor(Math.random() * availableElements.length)]; } } // Start battle phase function startBattle() { gameState = 'battle'; aiElement = getAIElement(); // Track used elements if (usedPlayerElements.indexOf(playerElement) === -1) { usedPlayerElements.push(playerElement); } if (usedAIElements.indexOf(aiElement) === -1) { usedAIElements.push(aiElement); } // Reset hover state hoveredButton = null; // Hide selection elements and disable them for (var i = 0; i < elementButtons.length; i++) { elementButtons[i].setDisabled(true); tween(elementButtons[i], { alpha: 0 }, { duration: 300 }); } instructionText.setText('BATTLE!'); // Create battle elements playerBattleElement = game.addChild(new BattleElement(playerElement, true)); playerBattleElement.x = 400; playerBattleElement.y = 1100; playerBattleElement.alpha = 0; aiBattleElement = game.addChild(new BattleElement(aiElement, false)); aiBattleElement.x = 1648; aiBattleElement.y = 1100; aiBattleElement.alpha = 0; // Animate battle elements in tween(playerBattleElement, { alpha: 1, x: 512 }, { duration: 500 }); tween(aiBattleElement, { alpha: 1, x: 1536 }, { duration: 500 }); // Add VS text vsText = new Text2('VS', { size: 72, fill: 0xFF6B35 }); vsText.anchor.set(0.5, 0.5); vsText.x = 1024; vsText.y = 1100; vsText.alpha = 0; game.addChild(vsText); tween(vsText, { alpha: 1, scaleX: 1.5, scaleY: 1.5 }, { duration: 300, onFinish: function onFinish() { LK.getSound('battle').play(); // Start battle timer battleTimer = 0; } }); } // Get action keyword for how one element defeats another function getActionKeyword(winner, loser) { if (actionKeywords[winner] && actionKeywords[winner][loser]) { return actionKeywords[winner][loser]; } return 'defeats'; } // Check battle result function checkBattleResult() { var playerWins = defeats[playerElement] && defeats[playerElement].indexOf(aiElement) !== -1; var aiWins = defeats[aiElement] && defeats[aiElement].indexOf(playerElement) !== -1; if (playerWins) { return 'player'; } else if (aiWins) { return 'ai'; } else { return 'tie'; } } // Show battle result function showBattleResult() { gameState = 'result'; var result = checkBattleResult(); if (result === 'player') { LK.getSound('win').play(); playerBattleElement.playWinAnimation(); aiBattleElement.playLoseAnimation(); consecutiveWins++; var points = 10 * difficultyLevel * consecutiveWins; LK.setScore(LK.getScore() + points); var actionWord = getActionKeyword(playerElement, aiElement); instructionText.setText(playerElement.toUpperCase() + ' ' + actionWord + ' ' + aiElement.toUpperCase() + '!\nYOU WIN! +' + points + ' points'); instructionText.tint = 0x00ff00; // Increase difficulty every 3 wins if (consecutiveWins % 3 === 0 && difficultyLevel < 3) { difficultyLevel++; } } else if (result === 'ai') { LK.getSound('lose').play(); playerBattleElement.playLoseAnimation(); aiBattleElement.playWinAnimation(); consecutiveWins = 0; var actionWord = getActionKeyword(aiElement, playerElement); instructionText.setText(aiElement.toUpperCase() + ' ' + actionWord + ' ' + playerElement.toUpperCase() + '!\nYOU LOSE!'); instructionText.tint = 0xff0000; } else { instructionText.setText('TIE!'); instructionText.tint = 0xffff00; } // Update UI scoreText.setText('Score: ' + LK.getScore()); winsText.setText('Wins: ' + consecutiveWins); // Return to selection after delay LK.setTimeout(function () { resetForNextRound(); }, 2000); } // Reset for next round function resetForNextRound() { gameState = 'selection'; // Clean up battle elements if (playerBattleElement) { playerBattleElement.destroy(); playerBattleElement = null; } if (aiBattleElement) { aiBattleElement.destroy(); aiBattleElement = null; } if (vsText) { vsText.destroy(); vsText = null; } // Reset instruction text instructionText.setText('Choose your element'); instructionText.tint = 0xcccccc; // Show selection elements and re-enable only unused ones for (var i = 0; i < elementButtons.length; i++) { elementButtons[i].setSelected(false); var elementType = elementButtons[i].elementType; var isUsed = usedPlayerElements.indexOf(elementType) !== -1 || usedAIElements.indexOf(elementType) !== -1; elementButtons[i].setDisabled(isUsed); tween(elementButtons[i], { alpha: 1 }, { duration: 300 }); } // Create victory arrow after elements are visible again LK.setTimeout(function () { var result = checkBattleResult(); if (result === 'player') { // Create victory arrow from player's element to AI's element createVictoryArrow(playerElement, aiElement); } else if (result === 'ai') { // Create victory arrow from AI's element to player's element createVictoryArrow(aiElement, playerElement); } }, 400); // Wait for wheel elements to fade in // Clean up any remaining victory arrows for (var i = victoryArrows.length - 1; i >= 0; i--) { if (victoryArrows[i].parent) { victoryArrows[i].destroy(); } } victoryArrows = []; // Reset battle timer battleTimer = 0; } // Game move handler for hover effects game.move = function (x, y, obj) { if (gameState !== 'selection') { return; } var newHoveredButton = null; // Check which button is under the cursor for (var i = 0; i < elementButtons.length; i++) { var button = elementButtons[i]; // Calculate distance from cursor to button center var dx = x - button.x; var dy = y - button.y; var distance = Math.sqrt(dx * dx + dy * dy); // Use button's actual width/height to determine hit area (button is anchored at center) var hitRadius = 150; // Approximate radius for the button hit area if (distance < hitRadius) { newHoveredButton = button; break; } } // Handle hover state changes if (hoveredButton !== newHoveredButton) { // Handle leave event for previously hovered button if (hoveredButton && !hoveredButton.isSelected && !hoveredButton.isDisabled) { // Stop any existing scale tweens tween.stop(hoveredButton, { scaleX: true, scaleY: true }); // Scale back to normal tween(hoveredButton, { scaleX: 1.0, scaleY: 1.0 }, { duration: 150 }); } // Handle hover event for new button if (newHoveredButton && !newHoveredButton.isSelected && !newHoveredButton.isDisabled) { // Stop any existing scale tweens tween.stop(newHoveredButton, { scaleX: true, scaleY: true }); // Scale up on hover tween(newHoveredButton, { scaleX: 1.1, scaleY: 1.1 }, { duration: 150 }); } hoveredButton = newHoveredButton; } }; // Initialize game createElementButtons(); // Game update loop game.update = function () { if (gameState === 'battle' && playerBattleElement && aiBattleElement) { battleTimer++; // Show result after 3 seconds if (battleTimer >= 180) { // 3 seconds at 60 FPS showBattleResult(); } } };
===================================================================
--- original.js
+++ change.js
@@ -380,8 +380,10 @@
var difficultyLevel = 1;
var battleTimer = 0;
var hoveredButton = null; // Track which button is currently hovered
var victoryArrows = []; // Array to store victory arrows
+var usedPlayerElements = []; // Track elements used by player
+var usedAIElements = []; // Track elements used by AI
// Function to create victory arrow between two element buttons
function createVictoryArrow(fromElement, toElement) {
var fromButton = null;
var toButton = null;
@@ -506,8 +508,12 @@
function selectElement(elementType) {
if (gameState !== 'selection') {
return;
}
+ // Check if element has already been used by player
+ if (usedPlayerElements.indexOf(elementType) !== -1) {
+ return; // Don't allow selection of already used elements
+ }
playerElement = elementType;
// Update button states
for (var i = 0; i < elementButtons.length; i++) {
elementButtons[i].setSelected(elementButtons[i].elementType === elementType);
@@ -518,46 +524,64 @@
}, 500);
}
// AI element selection
function getAIElement() {
+ // Get available elements (not used by AI yet)
+ var availableElements = [];
+ for (var i = 0; i < elements.length; i++) {
+ if (usedAIElements.indexOf(elements[i]) === -1) {
+ availableElements.push(elements[i]);
+ }
+ }
+ // If no available elements, use all elements (shouldn't happen in normal gameplay)
+ if (availableElements.length === 0) {
+ availableElements = elements.slice();
+ }
// Basic AI that becomes more strategic with difficulty
if (difficultyLevel === 1) {
- // Random selection
- return elements[Math.floor(Math.random() * elements.length)];
+ // Random selection from available elements
+ return availableElements[Math.floor(Math.random() * availableElements.length)];
} else if (difficultyLevel === 2) {
// 30% chance to counter player's last choice
if (Math.random() < 0.3 && playerElement) {
var counters = [];
- for (var i = 0; i < elements.length; i++) {
- if (defeats[elements[i]] && defeats[elements[i]].indexOf(playerElement) !== -1) {
- counters.push(elements[i]);
+ for (var i = 0; i < availableElements.length; i++) {
+ if (defeats[availableElements[i]] && defeats[availableElements[i]].indexOf(playerElement) !== -1) {
+ counters.push(availableElements[i]);
}
}
if (counters.length > 0) {
return counters[Math.floor(Math.random() * counters.length)];
}
}
- return elements[Math.floor(Math.random() * elements.length)];
+ return availableElements[Math.floor(Math.random() * availableElements.length)];
} else {
// 50% chance to counter player's choice
if (Math.random() < 0.5 && playerElement) {
var counters = [];
- for (var i = 0; i < elements.length; i++) {
- if (defeats[elements[i]] && defeats[elements[i]].indexOf(playerElement) !== -1) {
- counters.push(elements[i]);
+ for (var i = 0; i < availableElements.length; i++) {
+ if (defeats[availableElements[i]] && defeats[availableElements[i]].indexOf(playerElement) !== -1) {
+ counters.push(availableElements[i]);
}
}
if (counters.length > 0) {
return counters[Math.floor(Math.random() * counters.length)];
}
}
- return elements[Math.floor(Math.random() * elements.length)];
+ return availableElements[Math.floor(Math.random() * availableElements.length)];
}
}
// Start battle phase
function startBattle() {
gameState = 'battle';
aiElement = getAIElement();
+ // Track used elements
+ if (usedPlayerElements.indexOf(playerElement) === -1) {
+ usedPlayerElements.push(playerElement);
+ }
+ if (usedAIElements.indexOf(aiElement) === -1) {
+ usedAIElements.push(aiElement);
+ }
// Reset hover state
hoveredButton = null;
// Hide selection elements and disable them
for (var i = 0; i < elementButtons.length; i++) {
@@ -689,12 +713,14 @@
}
// Reset instruction text
instructionText.setText('Choose your element');
instructionText.tint = 0xcccccc;
- // Show selection elements and re-enable them
+ // Show selection elements and re-enable only unused ones
for (var i = 0; i < elementButtons.length; i++) {
elementButtons[i].setSelected(false);
- elementButtons[i].setDisabled(false);
+ var elementType = elementButtons[i].elementType;
+ var isUsed = usedPlayerElements.indexOf(elementType) !== -1 || usedAIElements.indexOf(elementType) !== -1;
+ elementButtons[i].setDisabled(isUsed);
tween(elementButtons[i], {
alpha: 1
}, {
duration: 300
A hand with its fingers symbolizing gas
Make the background darker (blue)
Make the bacgkground color darker(blue)
a triangle pointing down. In-Game asset. 2d. High contrast. No shadows
This place after a draught
This place in very windy conditions
This place but it's raining
This place but there is an electric storm
a popup frame, retro pixel style, rectangular. In-Game asset. 2d. High contrast. No shadows
A version of this frame that symbolizes that this button has boosted / improved power
a minimalistic pixel button, no text on it, just the buton. White.. In-Game asset. 2d. High contrast. No shadows
A win effect that will be over a round button and that will triger for some seconds after a win happens, scaling in x and y as an effect.. In-Game asset. 2d. High contrast. No shadows
Lose
The frame should be ice related too
The frame should be earth related too
The frame should be water related too
The frame should be wind too
A hand with its fingers symbolizing ash
A hand with its fingers symbolizing sun
A hand with its fingers symbolizing moon
A hand with a piece of leather
A hand with a piece of plastic
A hand with a piece of opaque plastic
A hand with its fingers symbolizing salt
Can you make this picture slightly lighter
Can you make this image lighter please? But not a lot lighter, just a little
A frame that symbolizes that the element inside is penalized, unboosted, has a minus to its effect. It should be shown in the frame, not inside! With some VFX effect
One drop of rain. In-Game asset. 2d. High contrast. No shadows
Yellow / Orange colour
wind. In-Game asset. 2d. High contrast. No shadows
A pixel style magician from Magicka who has an arc around him of elements to be casted (fire, water, ice, rock, etc). In-Game asset. 2d. High contrast. No shadows
Tint the wizard to blue
Make the black border of the start twice thicker
A '?' (question mark) symbol inside
A white shield. In-Game asset. 2d. High contrast. No shadows
background
Music
air
Music
storm
Music
rain
Music
draught
Music
rock
Sound effect
paper
Sound effect
scissors
Sound effect
fire
Sound effect
metal
Sound effect
water
Sound effect
airy
Sound effect
lightning
Sound effect
tree
Sound effect
gun
Sound effect
sponge
Sound effect
smoke
Sound effect
gas
Sound effect
ice
Sound effect
sand
Sound effect
oil
Sound effect
plastic
Sound effect
leather
Sound effect
sun
Sound effect
glass
Sound effect
cloth
Sound effect
ash
Sound effect
fungus
Sound effect
moon
Sound effect
salt
Sound effect
select
Sound effect
spinning
Sound effect
win
Sound effect