diff --git a/Slay the Spire/index.html b/Slay the Spire/index.html new file mode 100644 index 00000000..f5e48a49 --- /dev/null +++ b/Slay the Spire/index.html @@ -0,0 +1,26 @@ + + + + + + + Card Battle Game + + + +
+

Card Battle Game

+
+

Player

+

Health: 50

+
+
+
+

Enemy

+

Health: 30

+
+ +
+ + + diff --git a/Slay the Spire/manifest.json b/Slay the Spire/manifest.json new file mode 100644 index 00000000..9f9c8806 --- /dev/null +++ b/Slay the Spire/manifest.json @@ -0,0 +1,27 @@ +{ + "name": "Card Battle Game", + "short_name": "Card Battle", + "description": "A web-based deck-building roguelike game inspired by Slay the Spire.", + "version": "1.0.0", + "manifest_version": 2, + "start_url": "index.html", + "display": "standalone", + "background_color": "#f5f5f5", + "theme_color": "#ffffff", + "orientation": "portrait", + "icons": [ + { + "src": "icons/icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "icons/icon-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "permissions": [ + "storage" + ] +} diff --git a/Slay the Spire/script.js b/Slay the Spire/script.js new file mode 100644 index 00000000..90d8dbcd --- /dev/null +++ b/Slay the Spire/script.js @@ -0,0 +1,42 @@ + +document.addEventListener('DOMContentLoaded', () => { + const playerHealthElement = document.getElementById('playerHealth'); + const enemyHealthElement = document.getElementById('enemyHealth'); + const playerDeckElement = document.getElementById('playerDeck'); + const drawCardButton = document.getElementById('drawCardButton'); + + let playerHealth = 50; + let enemyHealth = 30; + + const cards = [ + { name: 'Attack', damage: 10 }, + { name: 'Heal', heal: 10 } + ]; + + function updateHealth() { + playerHealthElement.textContent = `Health: ${playerHealth}`; + enemyHealthElement.textContent = `Health: ${enemyHealth}`; + } + + function drawCard() { + const randomCard = cards[Math.floor(Math.random() * cards.length)]; + const cardElement = document.createElement('div'); + cardElement.classList.add('card'); + cardElement.textContent = randomCard.name; + cardElement.addEventListener('click', () => playCard(randomCard, cardElement)); + playerDeckElement.appendChild(cardElement); + } + + function playCard(card, cardElement) { + if (card.damage) { + enemyHealth -= card.damage; + } else if (card.heal) { + playerHealth += card.heal; + } + updateHealth(); + cardElement.remove(); + } + + drawCardButton.addEventListener('click', drawCard); + updateHealth(); +}); diff --git a/Slay the Spire/styles.css b/Slay the Spire/styles.css new file mode 100644 index 00000000..e6134db5 --- /dev/null +++ b/Slay the Spire/styles.css @@ -0,0 +1,38 @@ + +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f5f5f5; +} + +.container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +#player, #enemy { + margin: 20px 0; +} + +#playerDeck { + display: flex; + justify-content: center; + gap: 10px; +} + +.card { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + cursor: pointer; +} + +.card:hover { + background-color: #f0f0f0; +}