Compare commits
No commits in common. "8e8bc514ad39e58f5b500595c3d03c7382c73256" and "7d82c1071310b18510448a2ff29d09bdb59f2c22" have entirely different histories.
8e8bc514ad
...
7d82c10713
|
|
@ -4,8 +4,6 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Phaser 3 Card Battle Game</title>
|
<title>Phaser 3 Card Battle Game</title>
|
||||||
<!-- Prevent favicon.ico request that causes errors -->
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChgGA60e6kgAAAABJRU5ErkJggg==" />
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -29,10 +27,7 @@
|
||||||
<!-- Load Phaser 3 from CDN -->
|
<!-- Load Phaser 3 from CDN -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js"></script>
|
||||||
|
|
||||||
<!-- Card data scripts -->
|
|
||||||
<script src="src/card-data.js"></script>
|
|
||||||
|
|
||||||
<!-- Game script -->
|
<!-- Game script -->
|
||||||
<script src="src/main.js"></script>
|
<script src="src/main.js" type="module"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
// Card data definitions for different decks
|
|
||||||
// Each deck contains 10 cards with attack, shield, health and required-army-size attributes
|
|
||||||
|
|
||||||
// Deck 1 - Player's default deck (will be assigned to player)
|
|
||||||
window.deck1 = [
|
|
||||||
{ id: 1, number: 1, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 2, number: 2, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 3, number: 3, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 4, number: 4, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 5, number: 5, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 6, number: 6, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 7, number: 7, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 8, number: 8, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 9, number: 9, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 10, number: 10, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 }
|
|
||||||
];
|
|
||||||
|
|
||||||
// Deck 2 - Warrior deck
|
|
||||||
window.deck2 = [
|
|
||||||
{ id: 1, number: 1, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 2, number: 2, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 3, number: 3, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 4, number: 4, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 5, number: 5, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 6, number: 6, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 7, number: 7, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 8, number: 8, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 9, number: 9, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 10, number: 10, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 }
|
|
||||||
];
|
|
||||||
|
|
||||||
// Deck 3 - Mage deck
|
|
||||||
window.deck3 = [
|
|
||||||
{ id: 1, number: 1, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 2, number: 2, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 3, number: 3, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 4, number: 4, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 5, number: 5, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 6, number: 6, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 7, number: 7, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 8, number: 8, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 9, number: 9, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 10, number: 10, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 }
|
|
||||||
];
|
|
||||||
|
|
||||||
// Deck 4 - Archer deck
|
|
||||||
window.deck4 = [
|
|
||||||
{ id: 1, number: 1, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 2, number: 2, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 3, number: 3, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 4, number: 4, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 5, number: 5, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 6, number: 6, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 7, number: 7, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 8, number: 8, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 9, number: 9, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 },
|
|
||||||
{ id: 10, number: 10, type: 'creature', attack: Math.floor(Math.random() * 5) + 1, shield: Math.floor(Math.random() * 5) + 1, health: Math.floor(Math.random() * 5) + 1, requiredArmySize: 1 }
|
|
||||||
];
|
|
||||||
|
|
||||||
// Make all decks available globally for the game
|
|
||||||
window.allDecks = [window.deck1, window.deck2, window.deck3, window.deck4];
|
|
||||||
181
src/main.js
181
src/main.js
|
|
@ -141,8 +141,17 @@ function create() {
|
||||||
currentPlayer: 'player'
|
currentPlayer: 'player'
|
||||||
};
|
};
|
||||||
|
|
||||||
// Assign the first deck (deck1) to the player
|
// Create a 10-card deck with numbers 1-10
|
||||||
this.gameState.playerDeck = [...window.deck1];
|
this.gameState.playerDeck = [];
|
||||||
|
for (let i = 1; i <= 10; i++) {
|
||||||
|
this.gameState.playerDeck.push({
|
||||||
|
id: i,
|
||||||
|
number: i,
|
||||||
|
type: 'creature', // placeholder type
|
||||||
|
attack: Math.floor(Math.random() * 5) + 1, // random attack value
|
||||||
|
health: Math.floor(Math.random() * 5) + 1 // random health value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Shuffle the deck using Fisher-Yates algorithm (using Phaser's scope)
|
// Shuffle the deck using Fisher-Yates algorithm (using Phaser's scope)
|
||||||
shuffleDeck(this.gameState.playerDeck);
|
shuffleDeck(this.gameState.playerDeck);
|
||||||
|
|
@ -230,30 +239,13 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
|
||||||
|
|
||||||
hitArea.on('pointerout', () => {
|
hitArea.on('pointerout', () => {
|
||||||
// Return the card to its original position
|
// Return the card to its original position
|
||||||
if (card.sprite && !card.isLocked) {
|
if (card.sprite) {
|
||||||
card.sprite.setY(originalY);
|
card.sprite.setY(originalY);
|
||||||
}
|
}
|
||||||
if (card.text && !card.isLocked) {
|
if (card.text) {
|
||||||
card.text.setY(originalY - 20);
|
card.text.setY(originalY - 20);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add click event to lock the card in place
|
|
||||||
hitArea.on('pointerdown', () => {
|
|
||||||
// Lock the card in its current position
|
|
||||||
card.isLocked = true;
|
|
||||||
|
|
||||||
// Remove hover effects while locked
|
|
||||||
if (card.sprite) {
|
|
||||||
card.sprite.setY(originalY - 30); // Keep it raised up when locked
|
|
||||||
}
|
|
||||||
if (card.text) {
|
|
||||||
card.text.setY(originalY - 50);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create Play and Cancel buttons above the card
|
|
||||||
createCardButtons.call(this, card, xPosition, originalY - 30);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -263,153 +255,6 @@ function update() {
|
||||||
// Game logic updates go here
|
// Game logic updates go here
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Create Play and Cancel buttons for a locked card
|
|
||||||
*/
|
|
||||||
function createCardButtons(card, xPosition, yPosition) {
|
|
||||||
const buttonWidth = 60;
|
|
||||||
const buttonHeight = 30;
|
|
||||||
const spacing = 10;
|
|
||||||
|
|
||||||
// Position the buttons above the card (at yPosition - 40)
|
|
||||||
const playButtonX = xPosition - buttonWidth - spacing / 2; // Left of card
|
|
||||||
const cancelButtonX = xPosition + buttonWidth + spacing / 2; // Right of card
|
|
||||||
const buttonY = yPosition - 40;
|
|
||||||
|
|
||||||
// Create Play button
|
|
||||||
const playButton = this.add.rectangle(playButtonX, buttonY, buttonWidth, buttonHeight, 0x00ff00); // Green color
|
|
||||||
playButton.setOrigin(0.5);
|
|
||||||
playButton.setInteractive();
|
|
||||||
|
|
||||||
// Add text to the Play button
|
|
||||||
const playText = this.add.text(playButtonX, buttonY, 'Play', {
|
|
||||||
fontSize: '14px',
|
|
||||||
fill: '#ffffff'
|
|
||||||
});
|
|
||||||
playText.setOrigin(0.5);
|
|
||||||
|
|
||||||
// Create Cancel button
|
|
||||||
const cancelButton = this.add.rectangle(cancelButtonX, buttonY, buttonWidth, buttonHeight, 0xff0000); // Red color
|
|
||||||
cancelButton.setOrigin(0.5);
|
|
||||||
cancelButton.setInteractive();
|
|
||||||
|
|
||||||
// Add text to the Cancel button
|
|
||||||
const cancelText = this.add.text(cancelButtonX, buttonY, 'Cancel', {
|
|
||||||
fontSize: '14px',
|
|
||||||
fill: '#ffffff'
|
|
||||||
});
|
|
||||||
cancelText.setOrigin(0.5);
|
|
||||||
|
|
||||||
// Store references to buttons in the card object
|
|
||||||
card.playButton = playButton;
|
|
||||||
card.cancelButton = cancelButton;
|
|
||||||
card.playButtonText = playText;
|
|
||||||
card.cancelButtonText = cancelText;
|
|
||||||
|
|
||||||
// Add click events for the buttons
|
|
||||||
playButton.on('pointerdown', () => {
|
|
||||||
// Move the card to the player's field (center of screen)
|
|
||||||
moveCardToField.call(this, card);
|
|
||||||
|
|
||||||
// Remove buttons and unlock the card
|
|
||||||
removeCardButtons(card);
|
|
||||||
});
|
|
||||||
|
|
||||||
cancelButton.on('pointerdown', () => {
|
|
||||||
// Return card to original position in hand
|
|
||||||
returnCardToHand.call(this, card);
|
|
||||||
|
|
||||||
// Remove buttons and unlock the card
|
|
||||||
removeCardButtons(card);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Move a card to the player's field (center of screen)
|
|
||||||
*/
|
|
||||||
function moveCardToField(card) {
|
|
||||||
// For now, we'll just remove it from hand and add it to field
|
|
||||||
// In a real implementation this would involve more complex logic
|
|
||||||
const index = this.gameState.playerHand.indexOf(card);
|
|
||||||
if (index > -1) {
|
|
||||||
this.gameState.playerHand.splice(index, 1);
|
|
||||||
this.gameState.playerField.push(card);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove the card from display
|
|
||||||
if (card.sprite) {
|
|
||||||
card.sprite.destroy();
|
|
||||||
}
|
|
||||||
if (card.text) {
|
|
||||||
card.text.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Re-display the player's hand to update positions of remaining cards
|
|
||||||
// Clear existing hand display first by removing all sprites and texts
|
|
||||||
this.gameState.playerHand.forEach(handCard => {
|
|
||||||
if (handCard.sprite) {
|
|
||||||
handCard.sprite.destroy();
|
|
||||||
}
|
|
||||||
if (handCard.text) {
|
|
||||||
handCard.text.destroy();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Redisplay the updated player's hand at the bottom of the screen
|
|
||||||
displayPlayerHand.call(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Return a locked card to its original position in the player's hand
|
|
||||||
*/
|
|
||||||
function returnCardToHand(card) {
|
|
||||||
// Reset the locked state
|
|
||||||
card.isLocked = false;
|
|
||||||
|
|
||||||
// Remove buttons and text references from the card object
|
|
||||||
if (card.playButton) {
|
|
||||||
card.playButton.destroy();
|
|
||||||
card.playButtonText.destroy();
|
|
||||||
}
|
|
||||||
if (card.cancelButton) {
|
|
||||||
card.cancelButton.destroy();
|
|
||||||
card.cancelButtonText.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset positions to original hand position
|
|
||||||
const yPosition = 850; // Original hand position at bottom of screen
|
|
||||||
const originalY = yPosition;
|
|
||||||
|
|
||||||
if (card.sprite) {
|
|
||||||
card.sprite.setY(originalY);
|
|
||||||
}
|
|
||||||
if (card.text) {
|
|
||||||
card.text.setY(originalY - 20);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove buttons from a locked card
|
|
||||||
*/
|
|
||||||
function removeCardButtons(card) {
|
|
||||||
// Reset the locked state
|
|
||||||
card.isLocked = false;
|
|
||||||
|
|
||||||
// Destroy button elements if they exist
|
|
||||||
if (card.playButton) {
|
|
||||||
card.playButton.destroy();
|
|
||||||
card.playButtonText.destroy();
|
|
||||||
delete card.playButton;
|
|
||||||
delete card.playButtonText;
|
|
||||||
}
|
|
||||||
if (card.cancelButton) {
|
|
||||||
card.cancelButton.destroy();
|
|
||||||
card.cancelButtonText.destroy();
|
|
||||||
delete card.cancelButton;
|
|
||||||
delete card.cancelButtonText;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialize the game when the page loads
|
* Initialize the game when the page loads
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue