RPG-Game/index.html at master · cbaddeley/RPG-Game · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
	<title>Final Fantasy RPG - Bootcamp Homework</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>

<header>Final Fantasy RPG - Boot Camp Homework</header>

<div class="container">
<audio id="victorySound" src="assets/sounds/victory.mp3"></audio>
<audio id="musicSound" src="assets/sounds/music.mp3"></audio>
<audio id="gameOverSound" src="assets/sounds/gameOver.mp3"></audio>
<audio id="attackSound" src="assets/sounds/attack.mp3"></audio>

<div id="charSelectScreen">
	<audio id="hover" src="assets/sounds/mouseHover.mp3"></audio>
	<h2>Select Your Character</h2>
	<input type="image" id="black" arrRef=0 src="assets/images/blackMageLeft.png">
	<input type="image" id="knight" arrRef=1 src="assets/images/knightLeft.png">
	<input type="image" id="blue" arrRef=2 src="assets/images/blueMageLeft.png">
	<input type="image" id="dragoon" arrRef=3 src="assets/images/dragoonLeft.png">


</div>

<div class="loadUp">
	<div id="instructions">
	<ul>
		<li>Select an opponent to fight.</li>
		<li>Press the attack button to attack. Each subsequent attack increases your attack power.</li>
		<li>If the enemy is still alive, they will initiate a counter attack.</li>
		<li>After killing an opponent, select a new one. The game ends when you have defeated all three opponents.</li>
		<li>Note: Each character has different stats. Your goal is to identify and kill the weaker characters while building your attack power.</li>
	</ul>
	</div>
	<div id="attackerArea"></div>

	<div id="defenderArea"></div>

	<div id="opponentArea"></div>


	<div id="statsArea">
		<button id="attackButton" onclick="attack()">Attack</button>
		<div class="fighterName">
			<div id="attackerName"></div>
			<div id="defenderName"></div>
		</div>
		<div id="attackerHealth"></div>
		<div id="defenderHealth"></div>
		<div id="healthBarAtt"><div id="attHealthPerct"></div></div>
		<div id="healthBarDef"><div id="defHealthPerct"></div></div>
	</div>
</div>

<div id="victory">Victory</div>
<div id="gameOver">Game Over</div>
<button id="playAgain">Play Again</div>

</div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/javascript/game.js" ></script>

</body>
</html>