From 8c672a568ad096f28d4c3a2ba95b01ecc30cc3ce Mon Sep 17 00:00:00 2001 From: Cristiano Magro <cristiano.magro@vola.it> Date: Thu, 26 Dec 2024 23:51:23 +0100 Subject: [PATCH] draw bar healt after attack --- 04 - monster slayer game/prj-monster-01-starting-setup/index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 50 insertions(+), 0 deletions(-) diff --git a/04 - monster slayer game/prj-monster-01-starting-setup/index.html b/04 - monster slayer game/prj-monster-01-starting-setup/index.html new file mode 100644 index 0000000..5532162 --- /dev/null +++ b/04 - monster slayer game/prj-monster-01-starting-setup/index.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Vue Basics</title> + <link + href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" + rel="stylesheet" + /> + <link rel="stylesheet" href="styles.css" /> + <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script> + <script src="app.js" defer></script> + </head> + <body> + <header> + <h1>Monster Slayer</h1> + </header> + <div id="game"> + <section id="monster" class="container"> + <h2>Monster Health</h2> + <div class="healthbar"> + <div + class="healthbar__value" + :style="monsterBarStyle" + ></div> + </div> + </section> + <section id="player" class="container"> + <h2>Your Health</h2> + <div class="healthbar"> + <div + class="healthbar__value" + :style="playerBarStyle" + ></div> + </div> + </section> + <section id="controls"> + <button @click="attackMonster">ATTACK</button> + <button>SPECIAL ATTACK</button> + <button>HEAL</button> + <button>SURRENDER</button> + </section> + <section id="log" class="container"> + <h2>Battle Log</h2> + <ul></ul> + </section> + </div> + </body> +</html> -- Gitblit v1.8.0