Skip to content

Instantly share code, notes, and snippets.

@TravisL12

TravisL12/index.html

Created February 3, 2020 15:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save TravisL12/303492dbc4f7aa24b1eae7546869f607 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save TravisL12/303492dbc4f7aa24b1eae7546869f607 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. TravisL12 created this gist Feb 3, 2020.
    37 changes: 37 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <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>
    420 changes: 420 additions & 0 deletions player.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,420 @@
    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);