Bonsoir!
Etant en 1ère s spé informatique, ma classe a eu un projet à réaliser à la maison. :mad2:
En bref nous devons créer un jeu du pendu, malheureusement je ne sais pas du tout comment m'y prendre et par quoi commencer. Sachant que je maîtrise l'html, css, javascript, les canvas puis plusieurs autres petits trucs basiques.
J'ai commencé à faire mes trois pages toutes simples sur notepad++, je ne sais pas si je vais avoir besoin d'un canvas car après plusieurs recherches, je n'ai pas trouvé de réponse, j'arrive juste à m'embrouiller encore plus.. :((
l'html: (j'aime beaucoup personnaliser ainsi les sites que je créais, au grand plaisir de mon prof:pff:)
<body><!-- début du corps de la page -->
<img src="hellokitty.gif" height="100" width="100" align=left>
<img src="hellokitty.gif" height="100" width="100" align=right>
<h1>*(●￣(ｴ)￣●)ﾉ* Le jeu du pendu *(●￣(ｴ)￣●)ﾉ*</h1>
<br><br><br>
<table>
<td><p>La potence prête à accueillir le pendu.
Le Pendu est un jeu consistant à trouver un mot en devinant quelles sont les lettres qui
le composent. Le jeu se joue traditionnellement à deux, avec un papier
et un crayon, selon un déroulement bien particulier.<p></td>
</table>
<br><br><br>
<div style="text-align:center">
<canvas id="pane" width="500" height="500"></canvas>
</div>
<div id="boutons">
<input type="button" id="bouton1" value="Exécuter le programme"><!-- création d'un bouton qui permettra d'exécuter le programme -->
</div>
</body><!-- fin du corps de la page -->
le css: (un peu inutile ici..)
body{background-color:#EEE6F1
}
#pane{background-color:#EACFF1}
h1{
text-align: center;
text-decoration: underline #AB94B2;
}
table {
border: medium solid #C09DCA;
margin: 0 auto;
width:600px;
height: 100px;
}
p{
text-align: center;
}
puis le javascript:
(j'ai juste fait un petit carré pour vérifier si tout fonctionne)
//la fonction abonnements permet l'assignation de gestionnaires d'évènements à un élément cible
var abonnements = function() {
var monBouton = document.getElementById("bouton1");
monBouton.addEventListener("click",prog1);//ici on assigne la fonction nommée prog1 au bouton1,
//cette assignation se fera par un click de souris sur le bouton
}
window.addEventListener("load",abonnements);// lance la fonction abonnements après le chargement de ma page html
//quand on appuie sur le bouton on appellera cette fonction prog1
var prog1 = function(){
alert("Bonjour");
//tracer un carré dans le canvas
var c = document.getElementById("pane").getContext('2d');
var size = 80;
c.beginPath();
c.strokeStyle = "green";
c.strokeRect(20, 20, size, size);
c.closePath();
//enregistrement du texte de la fenêtre de saisie dans la variable t
var t = document.getElementById("tex").value;
alert(t);
document.getElementById("texBis").value=t;
};
Voilà voilà, si quelqu'un a le temps de m'expliquer rien qu'un petit peu la démarche à suivre, j'en serais très reconnaissante!! merci beaucoup! :fs: