Inital commit.
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
# Dragon_Repeller-RPG
|
||||
|
||||
A text-based role playing game built as part of my JavaScript certification.
|
||||
|
||||
[View Gane](https://codepen.io/stevenhaskell/pen/dyrdeYe)
|
||||
39
index.html
Normal file
39
index.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;700&display=swap');
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<header>
|
||||
<img src="https://gifdb.com/images/high/green-dragon-pixel-cartoon-qda25k85h97vw6fq.gif" id="dragon">
|
||||
<h1>Dragon Repeller!</h1>
|
||||
<p>Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. </p>
|
||||
</header>
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
288
script.js
Normal file
288
script.js
Normal file
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
93
styles.css
Normal file
93
styles.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user