motif js + inte ecran accueil

Author: cedricmarteau

css/style.css

@@ -134,6 +134,9 @@ html, body {
 	border:3px solid #66b345;
 	padding:0px 67px;
 }
+#home{
+	display:block;
+}
 #home ul li{
 	margin-bottom:90px;
 }
@@ -183,6 +186,21 @@ html, body {
 	margin-bottom:85px;
 }
 
+#titreEcran{
+position:relative;
+top:0px;
+}
+
+#textEcran{
+position:relative;
+top:130px;
+}
+
+#boutonEcran{
+position:relative;
+top:300px;
+}
+
 #content{
 	width:960px;
 	height:600px;

img/mouton_vue_aerienne.png

@@ -51,35 +51,40 @@ <h1><a href="index.html">WINTER IS COMING</a></h1>
 				<section id="home" class="ecran">
 					<p></p>
 					<ul>
-						<li><a href="#" class="bouton">JOUER</a></li>
-						<li><a href="#" class="bouton">RÈGLES DU JEU</a></li>
-						<li><a href="#" class="bouton">TOP SCORE</a></li>
+						<li><a href="#" class="bouton" onclick="display(0); return false;">JOUER</a></li>
+						<li><a href="#" class="bouton" onclick="display(1); return false;">INSTRUCTIONS</a></li>
+						<li><a href="#" class="bouton" onclick="display(2); return false;">TOP SCORE</a></li>
 					</ul>
 				</section>
 				<section id="intro" class="ecran">
 					<p>
 					LES CONDITIONS DE VIE PLUTONIENNES DEVIENNENT DE PLUS EN PLUS DIFFICILES POUR SES HABITANTS. AVEC L’HIVER QUI APPROCHE, LES PLUTONIENS N’ONT PLUS LE CHOIX : POUR SURVIVRE, ILS PARTENT EN EXPÉDITION VERS LA TERRE POUR RAMENER LE PLUS DE MOUTONS ET SE COUVRIR DE LAINE POUR SE RÉCHAUFFER. ATTENTION, LE TEMPS EST LIMITÉ ET LES HUMAINS NE VOUS LAISSERONT PAS FAIRE SI FACILEMENT. AU COMMANDE DE LA SOUCOUPE VOLANTE, VOUS ÊTES EN CHARGE DE CETTE IMPORTANTE MISSION.
 					</p>
-					<a href="#" class="bouton">LANCER LA MISSION</a>
+					<a href="#" class="bouton" onclick="display(3); return false;">LANCER LA MISSION</a>
 				</section>
 				<section id="scores" class="ecran">
-					<p>TOP SCORES</p>
+					<p>TOP SCORE</p>
 					<ul>
 						<li>GEORGE <span>856345 PTS<span></li>
 						<li>GEORGE <span>856345 PTS<span></li>
 						<li>GEORGE <span>856345 PTS<span></li>
 						<li>GEORGE <span>856345 PTS<span></li>
 						<li>GEORGE <span>856345 PTS<span></li>
 					</ul>
-					<a href="#" class="bouton">LANCER LA MISSION</a>
+					<a href="#" class="bouton" onclick="display(4); return false;">MENU PRINCIPAL</a>
 				</section>
 				<section id="touches" class="ecran">
 					<div>
 						<p>A : MONTER<br/>Z : DESCENDRE</p>
 						<p>SE DÉPLACER</p>
 						<p>CAPTURER UN MOUTON</p>
 					</div>
-					<a href="#" class="bouton">MENU</a>
+					<a href="#" id="#retour_menu" class="bouton" onclick="display(5); return false;">MENU PRINCIPAL</a>
+				</section>
+				<section id="gameOver" class="ecran">
+					<p id="titreEcran">GAME OVER</p>
+					<p id="textEcran">LES PLUTONIENS MEURENT DE FROID.</p>
+					<a href="#" class="bouton" id="boutonEcran" onclick="display(6); return false;">RELANCEZ L'EXPEDITION</a>
 				</section>
 				<div class="moutons"></div>
 			</section>

index.html

@@ -264,4 +264,35 @@ function highScore(scorePerso)
 
 function isset(variable) {
    return (typeof variable != 'undefined');
+}
+
+function display(div){
+	switch (div) {
+		case 0:
+			document.getElementById("intro").style.display="block";
+			document.getElementById("home").style.display="none";
+		break;
+		case 1:
+			document.getElementById("touches").style.display="block";
+			document.getElementById("home").style.display="none";
+		break;
+		case 2:
+			document.getElementById("scores").style.display="block";
+			document.getElementById("home").style.display="none";
+		break;
+		case 3:
+			document.getElementById("intro").style.display="none";
+		break;
+		case 4:
+			document.getElementById("home").style.display="block";
+			document.getElementById("scores").style.display="none";
+		break;
+		case 5:
+			document.getElementById("home").style.display="block";
+			document.getElementById("touches").style.display="none";
+		break;
+		case 6:
+			document.getElementById("gameOver").style.display="none";
+		break;
+	}
 }