You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

175 lines
5.3 KiB

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="img/joePiece.png" type="png">
<title>JOE'S GARDEN</title>
<meta charset="utf-8">
<link rel="stylesheet" href="jeu.css"/>
<script src="Sprite.js"></script>
<script src="Joueur.js"></script>
<script src="Objet.js"></script>
<script src="Start.js"></script>
<script src="Regles.js"></script>
<script src="Shop.js"></script>
<script src="Options.js"></script>
<script src="Scene.js"></script>
<script src="Jeu.js"></script>
<!-- Inclure ici les fichiers JavaScript necessaires a la scene. -->
<script>
let scene;
function load() {
scene = new Jeu(document.getElementById("scene"));
scene.start();
scene.resize();
}
</script>
</head>
<body onload="load()" onresize="scene.resize()">
<div class="audios">
<audio src="sfx/musiqueFond.mp3" id="musiqueFond"></audio>
<audio src="sfx/ouvrirMenu.wav" id="ouvertureMenu"></audio>
<audio src="sfx/fermerMenu.wav" id="fermetureMenu"></audio>
<audio src="sfx/ouvrirShop.wav" id="ouvrirShop"></audio>
<audio src="sfx/fermerShop.wav" id="fermerShop"></audio>
<audio src="sfx/moptions.wav" id="ouvrirOption"></audio>
<audio src="sfx/foptions.wav" id="fermerOption"></audio>
</div>
<div id="scene">
<!-- Definir ici les elements HTML qui seront manipules dans la scene. -->
<div id="partieFinie">
<h1>LA PARTIE EST TERMINÉE</h1>
<div class="score">
<h1 id="scoreFinal"></h1>
</div>
</div>
<div class="time">
<h1 id="temps"></h1>
</div>
<div id="starting">
<img style="justify-self: center;" src="img/logo.png" width="165" height="150" alt="Logo rond de joe" id="logo">
<h2 style="text-align: center;">Bienvenue dans le jardin de Joe !</h2>
<p>Devenez le jardinier le plus rapide en rammassant le plus de fruits dans le temps imparti !</p>
<h2 style="text-align: center;">Aides</h2>
<p>Dans ce petit jeu, vous avez 1 minute et 30 secondes pour rammassez des fruits !!!<br>
Vous trouvez sûrement un petit peu de sous dans les feuillages, <br>histoire de pouvoir s'équiper au fil de votre aventure :)<br>
Soyez rapide sinon ils disparaîtront, et gare aux autre objets qui traine sur la route !</p>
<h3 id="demarrer">DÉMARRER</h3>
</div>
<div id="MetS">
<div class="monnaie">
<img src="img/joePiece.png" width="50" height="50" alt="">
<h1 id="monnaie"></h1>
</div>
<div class="score">
<img src="img/score.png" width="50" height="50" alt="">
<h1 id="score"></h1>
</div>
</div>
<div id="jeu"></div>
<div class="popup">
<h2 style="color: white;" id="popupFruit"></h2>
<h2 style="color: crimson;" id="popupPoison"></h2>
<h2 style="color: gold;" id="popupPlante"></h2>
</div>
<img src="img/menu_regles.png" width="75" height="75" alt="Menu des règles" id="menu">
<img src="img/menu_shop.png" width="75" height="75" alt="Menu des règles" id="menu_">
<img src="img/menu_options.png" width="75" height="75" alt="Menu des règles" id="menu__">
<div class="fondFlou"></div>
<div id="Shop">
<img src="img/fermer.png" width="50" height="50" alt="bouton fermer" id="fermer_">
<h1 style="text-align: center ;">Le Bac de Joe !</h1>
<p>Quand il a du temps, Joe n'hésite pas à vendre ses vieux objets contre un petit peu de sous, vous savez... l'argent ne pousse pas sous terre ;)</p>
<div class="accessoires">
<div id="pelle">
<img class="pelle" src="img/shop/pelle.png" width="150" height="150" alt="">
<div class="cout">
<img id="oui" src="img/joePiece.png" width="50" height="50" alt="">
<h2>150</h2>
</div>
</div>
<div id="arrosoir">
<img src="img/shop/arrosoir.png" width="150" height="150" alt="">
<div class="cout">
<img id="oui" src="img/joePiece.png" width="50" height="50" alt="">
<h2>250</h2>
</div>
</div>
</div>
</div>
<div id="regles">
<img src="img/couperson.png" width="50" height="50" alt="bouton fermer" id="son">
<img src="img/remettreleson.png" width="50" height="50" alt="bouton fermer" id="sonOui">
<img style="justify-self: center;" src="img/logo.png" width="165" height="150" alt="Logo rond de joe" id="logo">
<img src="img/fermer.png" width="50" height="50" alt="bouton fermer" id="fermer">
<h3><i>Déplacement<i></h3>
<ul>
<li>⇧ : Se diriger vers le haut</li>
<li>⇨ : Se diriger vers la droite</li>
<li>⇦ : Se diriger vers la gauche</li>
<li>⇩ : Se dirigier vers le bas</li>
</ul>
</div>
<div id="options">
<img src="img/fermer.png" width="50" height="50" alt="bouton fermer" id="fermer__">
<h1>MENU DES OPTIONS</h1>
<div class="choix">
<div id="recommencer">
<img src="img/redemarrer.png" width="100" height="100" alt="">
</div>
<div id="quitter">
<img src="img/porte.png" width="100" height="100" alt="">
</div>
</div>
</div>
<!-- Le code ci-dessous permet affiche un bouton pour le plein ecran -->
<!-- <div id="fullscreen" onmousedown="scene.toggleFullscreen(event);">F</div> -->
</div>
</body>
</html>