This repository has been archived by the owner on May 29, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (109 loc) · 5.04 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Chasse au sous-marin</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/sweetalert2.css">
<script src="js/script.js"></script>
<script src="js/sweetalert2.js"></script>
</head>
<body onload="initJeu(8,0);">
<header>
<h2>Chasse au sous-marin</h2>
</header>
<div class="container">
<section class="regles">
<h3>Règles du jeu</h3>
<p>Un plateau de jeu va se génerer dans lequel vous devrez trouver un sous-marin ennemi !
En utilisant le principe de la bataille navale, vous allez pouvoir cliquer sur les cases du tableau pour
tenter de couler le sous-marin !
En fonction de là où vous allez cliquer, trois messages pouront s'afficher :
</p>
<ul>
<li><span class="bold">A l'eau !</span> Vous vous trouvez dans les 8 cases aux alentours du sous-marin.
</li>
<li><span class="bold">Sauve qui peut !</span> Vous vous rapprochez du sous-marin, entre 1 et 8 cases.
<br> Le nombre de cases qui vous sépare du sous-marin est indiqué.</li>
<li><span class="bold">Touché !</span> Vous avez coulé le sous marin, félicitations vous avez gagné la
partie ! 🎉</li>
</ul>
<p>Maintenant que vous connaissez les règles du jeu, amusez-vous bien !</p>
</section>
<section class="plateau">
<div id="zoneJeu">
<!-- Ici la grille de jeu -->
</div>
</section>
<section class="commandes">
<div class="align-left">
<div id="cpt">
<!-- Ici le compteur -->
</div>
<div id="info">
<!-- Ici les résultat de chaque tir -->
</div>
<div class="buttons">
<div>
<button class="button" onclick="initJeu(8,0);">Facile</button>
<button class="button" onclick="initJeu(10,0);">Moyen</button>
<button class="button" onclick="initJeu(15,0);">Difficile</button>
<button class="button" onclick="initJeu(15,1)">Très Difficile</button>
</div>
<br>
<label class="switch">
<input id="tips" name="tips" type="checkbox" onchange="surDeVous();" checked>
<span class="slider round"></span>
</label>
<label for="tips">
<small>Afficher les indications de distance sur la grille</small>
</label>
<br>
<label class="switch">
<input id="sound" name="sound" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label for="sound">
<small>Activer les effets sonores</small>
</label>
<br>
<label class="switch">
<input id="musicswitch" name="musicswitch" type="checkbox" onchange="muteunmute()" checked>
<span class="slider round"></span>
</label>
<label for="musicswitch">
<small>Activer la musique</small>
</label>
<br><br>
<small>Choisir une nouvelle grille réinitialisera la partie.</small>
<br>
<small>En mode très difficile le sous-marin peut se déplacer.</small>
</div>
</div>
</section>
</div>
<footer>
© Nathan Bonnemains, Quentin Carré, Mathilde Goré - Site réalisé dans le cadre du cours d'IHM de
M. Brutus
<audio id="music">
<source src="audio/whitesand_voyage_remastered.mp3" type="audio/mp3">
Votre navigateur ne supporte pas l'élément <code>audio</code>.
</audio>
<audio id="bomb">
<source src="audio/bomb.mp3" type="audio/mp3">
Votre navigateur ne supporte pas l'élément <code>audio</code>.
</audio>
<audio id="alarm">
<source src="audio/alarm.mp3" type="audio/mp3">
Votre navigateur ne supporte pas l'élément <code>audio</code>.
</audio>
<audio id="splash">
<source src="audio/splash.mp3" type="audio/mp3">
Votre navigateur ne supporte pas l'élément <code>audio</code>.
</audio>
</footer>
</body>
</html>