-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
160 lines (132 loc) · 7.07 KB
/
Index.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Aenor et la légendes des Dragons</title>
<script src="Script.js"></script>
<script src="Histoire.js"></script>
<link rel="stylesheet" href="Styles.css">
</head>
<Body>
<div class="box" style="position: absolute; ">
<!-- Div de rédaction de l'histoire -->
<div style="width: 50%;height:30%; border:1px solid black; background-image:url('Img/Parchemin.jpg');background-size:100% 100%;">
<p id="Histoire" style="font-family: URW Chancery L, cursive; font-style: italic;" >Bienvenue dans l'histoire d'Aenor et la légende des dragons</p>
<!-- Div de rédaction de l'histoire -->
<!-- Bouton qui passe l'histoire -->
</form>
<input id="btnSuite" onclick="MonHistoire();" type="button" value="Continuer">
</form>
<!-- Bouton qui passe l'histoire -->
<!-- Bouton qui permet de recommencer -->
<form style="visibility:hidden">
<input id="btnReco" onclick="Recommencer();" type="button" value="Recommencer">
</form>
<!-- Bouton qui permet de recommencer -->
<!-- Bouton qui passe l'histoire avec le choix indiqué -->
<form id="btnChoix" style="visibility:hidden">
<input id="btnChoix1" onclick="choix=1;MonHistoire();" type="button" value="Choisir">
<input id="btnChoix2" onclick="choix=2;MonHistoire();" type="button" value="Choisir">
</form>
</div>
<!-- Bouton qui passe l'histoire avec le choix indiqué -->
<!-- Div de fond pour les combats -->
<div class="Background_fight"style="width: 50%; height:69.35%; border:1px solid black;" >
<div class="box_fight">
<!-- Div de fond pour les combats -->
<!-- Interface du personnage Héroïne -->
<div class="Affrontement">
<p id="Heros">
<img id="img_Aenor"src="Img/Aenor.png" style="position: absolute; left:-21%; top:1%;">
<div class="Border_Allie">
<p> AENOR</p> <br>
</div>
<div class="Border_Allie">
<div class=Attributs>
<br> <img src="Img/Heart.png"> <strong id="VieHeros" ></strong>
<br> <img src="Img/Shield.png"> <strong id="DefHeros" ></strong>
<br> <img src="Img/Sword.png"> <strong id="ForceHeros" ></strong>
</div>
</div>
</p>
</div>
<!-- Interface du personnage Héroïne -->
<!-- Interface du personnage Ennemi -->
<div style="visibility:hidden" class="Affrontement" id="Ennemi" >
<p>
<img id="img_Ennemi"src="Img/Guerrier.png" style="position: absolute; left:-22%; top:38%; z-index: 2; ">
<div class="Border_Ennemi">
<p>
<strong id="NomEnnemi" ></strong>
</p> <br>
</div>
<div class="Border_Ennemi" style="z-index: 3;">
<div class=Attributs>
<br> <img src="Img/Heart.png" > <strong id="VieEnnemi" ></strong>
<br> <img src="Img/Shield.png"> <strong id="DefEnnemi" ></strong>
<br> <img src="Img/Sword.png"> <strong id="ForceEnnemi" ></strong>
</div>
</div>
</p>
</div>
<!-- Interface du personnage Ennemi -->
<!-- Interface du personnage Allié -->
<div style="visibility:hidden" class="Affrontement" style="left:15%; " id="Allie">
<p>
<img id="img_Allie"src="Img/Grizius.png" style="position: absolute; left:10%;">
<div class="Border_Allie">
<p>
<strong id="NomAllie" ></strong>
</p> <br>
</div>
<div class="Border_Allie">
<div class=Attributs>
<br> <img src="Img/Heart.png"> <strong id="VieAllie" ></strong>
<br> <img src="Img/Shield.png"> <strong id="DefAllie" ></strong>
<br> <img src="Img/Sword.png"> <strong id="ForceAllie" ></strong>
</div>
</div>
</p>
</div>
<!-- Interface du personnage Allié -->
<!-- Interface du personnage Basket -->
<div style="visibility:hidden" class="Affrontement" style="left:15%; " id="Basket">
<p>
<img id="img_Basket"src="Img/Basket.png" style="position: absolute; left:23%; top:45%;">
<div class="Border_Basket" style=" background: linear-gradient( lime, firebrick); ">
<p>
<strong id="NomBasket" ></strong>
</p> <br>
</div>
<div style=" background: linear-gradient( firebrick, lime);"class="Border_Basket">
<div class=Attributs>
<br> <img src="Img/Heart.png"> <strong id="VieBasket" ></strong>
<br> <img src="Img/Shield.png"> <strong id="DefBasket" ></strong>
<br> <img src="Img/Sword.png"> <strong id="ForceBasket" ></strong>
</div>
</div>
</p>
</div>
<!-- Interface du personnage Basket -->
</div>
</div>
<!-- Div d'illustration de l'histoire -->
<div style=" width: 49.77%; height:99.78%; border:1px solid black;">
<img src="Img/Chateau.jpg" style="height:100%; width:100%;" >
</div>
<!-- Div d'illustration de l'histoire -->
</div>
<!-- Bouton qui permet d'attaquer -->
<form id="btnAttaque" style="visibility:hidden">
<input onclick="Attaque();" type="button" value="Attaquer">
</form>
<!-- Bouton qui permet d'attaquer -->
</Body>
<Script>
// Lancement des interfaces dans l'HTML afin de rendre les chiffes dynamique
interfaceHeros();
interfaceAllie();
interfaceEnnemi();
interfaceBasket();
</Script>
</Html>