Aller au contenu. | Aller à la navigation

Outils personnels

Navigation

S1-2013 Maison

Le premier projet de la semestrielle... une bascule jour/nuit sur un SVG

HTML icon Sem1-Maison.html — HTML, 2 ko (2633 bytes)

Contenu du fichier

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="author" content="Bertrand Emery" />
	<title>Maison Jour/Nuit</title>
	<style>
		h1, p {text-align:center;}
		svg {display:block; margin:auto;}
	</style>
</head>
<body>
	<h1>Une maison, de jour ou de nuit.</h1>
	<p>Clique sur la porte...</p>
	<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<rect id="ciel" x="0" y="0" width="300" height="200" fill="blue" /> <!-- le ciel -->
		<rect id="terre" x="0" y="200" width="300" height="200" fill="green" /> <!-- la terre -->
		<circle id="lune" cx="50" cy="50" r="20" fill="none" /> <!-- la lune initialement invisible càd sans couleur... ou éventuellement invisible -->
		<g transform="translate(50 50), scale(20 20)"> <!-- On crée un groupe pour faire un zoom, car c'est plus facile de dessiner dans un carré de 10x10 puis de zoomer, et comme il n'y a pas de perte de qualité en SVG, c'est sans problème. -->
			<rect x="1" y="4" width="8" height="6" fill="red" /> <!-- les murs -->
			<rect x="2" y="1" width="1" height="3" fill="grey" /> <!-- la cheminée -->
			<rect onclick="JourNuit();" x="4" y="7" width="2" height="3" fill="brown" /> <!-- la porte -->
			<polygon points="0,4 5,0 10,4" fill="brown" /> <!-- le toit -->
			<g id="fenetres" fill="lightblue"> <!-- on crée un groupe pour pouvoir changer toutes les fenêtres d'un coup, mais on aurait pu procéder comme pour le sapin de Noël de la semestrielle de 2012 -->
				<rect x="2" y="5" width="1" height="1" />
				<rect x="2" y="7" width="1" height="1" />
				<rect x="7" y="5" width="1" height="1" />
				<rect x="7" y="7" width="1" height="1" />
				<circle cx="5" cy="2" r="0.7" />
			</g>
		</g>
	</svg>
	
	<script type="text/javascript">
		var bascule=true; // on crée une bascule (une variable à 2 états)
		
		function JourNuit() {
			if (bascule) {
				document.getElementById('fenetres').style.fill="yellow"; // on change la couleur des fenêtres
				document.getElementById('ciel').style.fill="darkblue"; // on change la couleur du ciel
				document.getElementById('lune').style.fill="lightgrey"; // on change la couleur de la lune
				bascule=false; //on inverse la bascule
			}
			else {
				document.getElementById('fenetres').style.fill="lightblue"; // on change la couleur des fenêtres
				document.getElementById('ciel').style.fill="blue"; // on change la couleur du ciel
				document.getElementById('lune').style.fill="none"; // on change la couleur de la lune
				bascule=true; //on inverse la bascule
			}
		}
	</script>
</body>
</html>