Skip to content

Instantly share code, notes, and snippets.

@TravisL12

TravisL12/index.html

Created February 3, 2020 15:07
Show Gist options
  • Save TravisL12/303492dbc4f7aa24b1eae7546869f607 to your computer and use it in GitHub Desktop.
Save TravisL12/303492dbc4f7aa24b1eae7546869f607 to your computer and use it in GitHub Desktop.
Download ZIP
Cave Forest Game
Raw
index.html
<html>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<body>
<div class="content">
<div class="half-container">
<h3>
<span id="top-label">What Awaits? :</span
><span id="top-message"></span>
</h3>
<h3>
<span id="bottom-label">What will you do? :</span
><span id="bottom-message"></span>
</h3>
<h3 id="game-message">!</h3>
<h3>
<button id="buttonList1"></button>
<button id="buttonList2"></button>
</h3>
<h3 id="player-roll">
Your roll: <br />
<span id="player-roll-sub"></span>
</h3>
<div id="small-stat-container">
<h3 class="small-stat">GOLD : <span id="gold-page"></span></h3>
<h3 class="small-stat">XP : <span id="wins-page"></span></h3>
</div>
</div>
<div align="right" id="right-div" style="width: 45%">
<span id="right-span"></span>
</div>
</div>
</body>
<script src="js/play.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</html>
Raw
player.js
class Player {
constructor(options) {
this.update(options);
}
update(options) {
this.ac = options.ac || this.ac || 0;
this.atkMod = options.atkMod || this.atkMod || 0;
this.class = options.class || this.class;
this.dexMod = options.dexMod || this.dexMod;
this.dexterity = options.dexterity || this.dexterity || 0;
this.dmgDie = options.dmgDie || this.dmgDie;
this.firstAttack = options.firstAttack || this.firstAttack;
this.gold = options.gold || this.gold || 100;
this.hd = options.hd || this.hd;
this.health = options.health || this.health || 100;
this.name = options.name || this.name;
this.hpMax = options.hpMax || this.hpMax || 100;
this.inventory = options.inventory || this.inventory;
this.level = options.level || this.level;
this.rollAttack = function() {} || this.rollAttack;
this.rollResult = options.rollResult || this.rollResult;
this.strength = options.strength || this.strength || 100;
this.strMod = options.strMod || this.strMod;
}
setFighter() {
this.update({
strength: 100,
strMod: Math.floor((this.strength - 10) / 2),
atkMod: this.strMod,
dexterity: 100,
dexMod: Math.floor((this.dexterity - 10) / 2),
dmgDie: 8,
hd: 10,
hpMax: Math.floor(100 - 10) + 20,
health: this.hpMax,
ac: 14 + this.dexMod
});
}
setRogue() {
this.update({
class: "rogue",
dexterity: 100,
dexMod: Math.floor((this.dexterity - 10) / 2),
atkMod: this.dexMod,
dmgDie: 6,
hd: 8,
hpMax: Math.floor(100 - 10) + 16,
health: this.hpMax,
ac: 12 + this.dexMod
});
}
}
class ActionButton {
constructor(id) {
this.element = document.getElementById(id);
this.listener = null;
this.name = null;
}
setButton(name, method) {
this.element.removeEventListener("click", this.listener);
this.listener = method;
this.element.addEventListener("click", this.listener);
this.element.textContent = name;
}
}
class Game {
constructor() {
this.sceneObj = {
name: "cave",
pName: "cave"
};
this.currentLog = "";
this.page = {
wins: 0,
scene: null
};
this.player = new Player({
gold: 0,
health: 1,
level: 1,
firstAttack: true,
inventory: []
});
this.opponent = new Player({
name: "goomba",
health: 10,
power: 2,
ac: null,
atkMod: null,
boss: null,
dmgDie: null,
health: null,
name: null,
rollResult: null
});
}
selectMonster() {
const pick =
this.page.wins >= 100
? Math.floor(Math.random() * 6)
: Math.floor(Math.random() * 5);
this.opponent = enemies[pick];
this.page.xpPrize =
this.opponent.health +
this.opponent.dmgDie +
this.opponent.atkMod +
this.opponent.ac;
}
//Rolls rolling attack traits rolls
roll(d) {
if (d) {
return Math.floor(Math.random() * d + 1);
}
this.player.rollResult = Math.floor(Math.random() * 20) + 1;
this.opponent.rollResult = Math.floor(Math.random() * 20) + 1;
}
rollStats = () => {
this.page.playerStats = [];
for (let i = 0; i < 6; i++) {
this.page.playerStats.push(this.roll(6) + this.roll(6) + 6);
}
this.page.playerStats.sort((a, b) => b - a);
gameMessage.innerText = "What class do you choose?";
buttonList1.setButton("Fighter", this.fighter.bind(this));
buttonList2.setButton("Rogue", this.rogue.bind(this));
this.currentLog += `Your stats are ${this.page.playerStats}`;
this.render();
};
determineAttack(power) {
return this.roll(power.dmgDie) + power.atkMod;
}
fight() {
this.roll();
let playerAttack = this.determineAttack(this.player);
if (this.player.rollResult + this.player.atkMod >= this.opponent.ac) {
if (this.player.class === "rogue") {
if (this.player.firstAttack === true) {
let snd = this.roll(6);
playerAttack += snd;
this.player.firstAttack = false;
}
}
this.opponent.health -= playerAttack;
this.currentLog += `You hit with a ${this.player.rollResult +
this.player.atkMod} for ${playerAttack} damage.`;
} else {
this.currentLog += `Your ${this.player.rollResult +
this.player.atkMod} did not hit against AC.`;
}
if (this.isGameOver(this.opponent.health)) {
gameMessage.innerText = "Player won!";
this.player.firstAttack = true;
this.win();
buttonList1.setButton("Go Home!", this.home.bind(this));
buttonList2.setButton("Fight more!", this.fightAgain.bind(this));
} else {
buttonList1.setButton("Fight!", this.fight.bind(this));
buttonList2.setButton("Run off!", this.run.bind(this));
gameMessage.innerText = "The opponent lunges!";
let opponentAttack = this.determineAttack(this.opponent);
if (this.opponent.rollResult + this.opponent.atkMod >= this.player.ac) {
gameMessage.innerText = "You got hit!";
this.player.health -= opponentAttack;
} else {
gameMessage.innerText = "They Missed you!";
}
if (this.isGameOver(this.player.health)) {
gameMessage.innerText = "Opponent won!";
buttonList1.setButton("YOU", alert("game over"));
buttonList2.setButton("DIED", alert("It's Over!"));
this.render();
return;
}
}
this.render();
}
fighter() {
this.player.setFighter();
this.currentLog += `
You are a beefy fighter: + ${this.player.strMod} is your attack modifier,
and you have ${this.player.hpMax} health. \n Your AC is: ${this.player.ac} \n
You are good at killing; in fact, you were just trying to kill this ${this.opponent.name}`;
buttonList1.setButton("Fight!", this.fight.bind(this));
buttonList2.setButton("Run off!", this.run.bind(this));
gameMessage.innerText = "What do you do?";
this.render();
}
rogue() {
this.player.setRogue();
this.currentLog += `
You are a sneaky rogue : + ${this.player.dexMod} is your attack modifier,
and you have ${this.player.hpMax} health. \n Your AC is: ${this.player.ac} \n
You are good escaping; in fact, you were just trying to escape this ${this.opponent.name}`;
buttonList1.setButton("Fight!", this.fight.bind(this));
buttonList2.setButton("Run off!", this.run.bind(this));
this.render();
}
//actions
giveUp() {
buttonList1.element.disabled = true;
buttonList2.element.disabled = true;
buttonList1.setButton("YOU", () => null);
buttonList2.setButton("QUIT!?", () => null);
}
isGameOver(health) {
return health <= 0;
}
reset() {
window.alert("Resetting");
setTimeout(() => {
this.player.health = 10;
this.opponent.health = 10;
this.render();
}, 1000);
}
run() {
this.roll();
if (
this.opponent.rollResult >=
this.player.rollResult + this.player.dexMod
) {
this.player.health -= this.roll(this.opponent.dmgDie);
buttonList1.setButton("Fight!", this.fight.bind(this));
buttonList2.setButton("Run off!", this.run.bind(this));
this.currentLog += "You try to run, but are struck!";
gameMessage.innerText = "You're struck, and stuck!";
} else {
this.currentLog += "You make it away from the " + this.opponent.name;
this.player.firstAttack = true;
this.home();
return;
}
this.render();
}
fightAgain() {
this.selectMonster();
if (this.page.scene) {
this.setScene(this.page.scene);
} else {
buttonList1.setButton("Youre", this.home.bind(this));
buttonList2.setButton("LOST!", this.home.bind(this));
this.currentLog += "You need to go back home, you've lost your way";
this.render();
}
}
win() {
if (this.opponent.boss) {
this.player.gold += Math.floor(Math.random() * 88) + 55;
}
this.player.gold += Math.floor(Math.random() * 5) + 2;
this.page.wins += this.page.xpPrize;
xpDisplay.innerText = this.page.wins;
}
advanceCheck() {
let xpLevel = Math.floor(this.page.wins / 100) + 1;
if (xpLevel > this.player.level) {
this.player.level += 1;
this.player.hpMax += this.roll(this.player.hd);
}
}
setScene(scene) {
this.sceneObj.name = scene;
this.page.scene = scene;
buttonList1.setButton("Fight!", this.fight.bind(this));
buttonList2.setButton("Run off!", this.run.bind(this));
this.render();
}
home() {
this.sceneObj.name = "tavern";
if (this.player.gold > 1) {
this.player.gold -= 1;
this.advanceCheck();
this.page.scene = "tavern";
this.currentLog +=
"You make it back to the Slippery Corkscrew, the local inn and tavern. \n Micah passes you a beer from behind the bar. \n He says he'll have a plate out soon. \n";
this.player.health = this.player.hpMax;
this.currentLog += `Your health is ${this.player.health} and you're ready to go out and fight again!`;
} else {
this.currentLog +=
"You get to the inn, but Micah turns you away as the pauper you are. \n \"Don't come back until you've some gold to pay!";
}
//determine MONTSHTER //
this.selectMonster();
buttonList1.setButton("Cave!", () => this.setScene("cave"));
buttonList2.setButton("Forest!", () => this.setScene("forest"));
this.render();
}
render() {
backgroundImage.style.backgroundImage = `url('css/img/${this.sceneObj.name}.jpg')`;
if (this.sceneObj.name === "tavern") {
topDiv.innerText = "Back at the Slippery Corkscrew";
topMessage.innerText = " you seek food and lodging.";
} else {
rollDisplay.innerText = this.player.rollResult || "";
this.page.opponentName = this.opponent.name;
topDiv.innerText = `You face a ${this.page.opponentName} :`;
topMessage.innerText = `Your opponent has ${this.opponent.health} health`;
}
if (this.currentLog) {
gameLog.innerText += "\n" + this.currentLog + "\n";
this.currentLog = "";
}
goldDiv.innerText = this.player.gold;
bottomMessage.innerText = "You have " + this.player.health + " health";
gameLog.scrollTop = gameLog.scrollHeight;
}
}
const enemies = [
new Player({
name: "bat",
health: 3,
dmgDie: 4,
atkMod: 1,
ac: 12,
boss: false
}),
new Player({
name: "bandit",
health: 18,
dmgDie: 6,
atkMod: 3,
ac: 10,
boss: false
}),
new Player({
name: "wolf",
health: 12,
dmgDie: 8,
atkMod: 2,
ac: 8,
boss: false
}),
new Player({
name: "orc",
health: 21,
dmgDie: 6,
atkMod: 4,
ac: 6,
boss: false
}),
new Player({
name: "giant spider",
health: 8,
dmgDie: 12,
atkMod: 1,
ac: 9,
boss: false
}),
new Player({
name: "Leshen",
health: 35,
dmgDie: 8,
atkMod: 7,
ac: 15,
boss: true
})
];
const game = new Game();
const gameMessage = document.getElementById("game-message");
const video = document.querySelector("video");
const video1 = document.querySelector("source");
const backgroundImage = document.querySelector("body");
const goldDiv = document.getElementById("gold-page");
const topDiv = document.getElementById("top-label");
const topMessage = document.getElementById("top-message");
const bottomDiv = document.getElementById("bottom-label");
const bottomMessage = document.getElementById("bottom-message");
const rollDisplay = document.getElementById("player-roll-sub");
const gameLog = document.getElementById("right-div");
const xpDisplay = document.getElementById("wins-page");
const buttonList1 = new ActionButton("buttonList1");
const buttonList2 = new ActionButton("buttonList2");
const mealPrice = game.player.level * 3;
game.selectMonster();
buttonList1.setButton("Roll Scores", game.rollStats);
buttonList2.setButton("Give up", game.giveUp);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment