diff --git a/README.md b/README.md index b8501d1..55d69a6 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ # Dragon_Repeller-RPG -A text-based role playing game built as part of my JavaScript certification. \ No newline at end of file +A text-based role playing game built as part of my JavaScript certification. + +[View Gane](https://codepen.io/stevenhaskell/pen/dyrdeYe) \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1b6738e --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + RPG - Dragon Repeller + + + + +
+
+ +

Dragon Repeller!

+

Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town.

+
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..3f08fdb --- /dev/null +++ b/script.js @@ -0,0 +1,288 @@ +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText = document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: ' dagger', power: 30 }, + { name: ' claw hammer', power: 50 }, + { name: ' sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, easterEgg], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + if (fighting === 2) { + winGame(); + } else { + defeatMonster(); + } + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + const numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.includes(guess)) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + if (health <= 0) { + lose(); + } + } +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4b2ab02 --- /dev/null +++ b/styles.css @@ -0,0 +1,93 @@ +body { + background-color: #115413; + } + + header { + text-align: center; + padding:16px; + } + + #dragon { + width: 100px; + height: auto; + } + + h1 { + color: #000000; + font-family: 'Pixelify Sans', sans-serif; + font-weight: 400; + } + + p { + color:#000000; + font-family: 'Pixelify Sans', sans-serif; + font-weight: 400; + font-size: 16px; + } + + #text { + background-color: #E8EB1C; + color: #000000; + padding: 10px; + font-family: 'Pixelify Sans', sans-serif; + font-weight: 400; + border-radius: 0px 0px 4px 4px; + border: 1px solid #0a0a23; + border-top-style: none + } + + #game { + max-width: 500px; + background-color: #ffffff; + color: #ffffff; + margin: 30px auto 0px; + padding: 10px; + border-radius: 4px; + } + + #stats { + border: 1px solid #0a0a23; + padding: 5px; + color: #0a0a23; + font-family: 'Pixelify Sans', sans-serif; + font-weight: 400; + border-radius: 4px 4px 0px 0px; + border-bottom-style: none; + } + + #controls{ + border: 1px solid #0a0a23; + padding: 5px; + color: #0a0a23; + font-family: 'Pixelify Sans', sans-serif; + font-weight: 400; + } + + + #monsterStats { + display: none; + border: 1px solid #0a0a23; + border-top-style: none; + padding: 5px; + color: #ffffff; + background-color: #c70d0d; + font-family: 'Pixelify Sans', sans-serif; + font-weight: 400; + } + + .stat { + padding-right: 10px; + } + + button { + cursor: pointer; + color: #0a0a23; + background-color: #feac32; + background-image: linear-gradient(#fecc4c, #ffac33); + border: 3px solid #feac32; + border-radius: 4px; + font-family: 'Pixelify Sans', sans-serif; + font-weight: 400; + font-size: 14px; + margin-bottom: 2px; + } \ No newline at end of file