39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
<!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> |