Skip to content

Instantly share code, notes, and snippets.

@mibi88

mibi88/pendu.html

Last active October 4, 2021 06:51
Show Gist options
  • Save mibi88/5b1e1ecaa420ed29b449f84081661ee0 to your computer and use it in GitHub Desktop.
Save mibi88/5b1e1ecaa420ed29b449f84081661ee0 to your computer and use it in GitHub Desktop.
Download ZIP
Un jeu du pendu en javascript/html 4.01
Raw
pendu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<header>
<meta charset="utf-8"/>
<meta lang="fr"/>
<title>Le jeu du pendu HTML de mibi88</title>
<style type="text/css">
.letter {
width: 30px;
}
button {
height: 20px;
font-size: 14px;
border: 1px solid gray;
background: lightgray;
border-radius: 0px;
}
html {
background: white;
font-family: sans-serif;
color: black;
}
p {
font-size: 16px;
}
h1 {
font-size: 24;
}
</style>
<script type="text/javascript">
var mot = "none";
var motaffiche = "";
var restant = 10;
var letterstested = "";
function tryletter(letter) {
if (letterstested.indexOf(letter) > -1) {
document.getElementById("error").innerHTML="<b>Vous avez déjà cliqué sur \"" + letter + "\"</b>";
} else if(mot != "none") {
document.getElementById("error").innerHTML="";
oldmotaffiche = motaffiche;
bon = 0;
motaffiche = "";
for(var i = 0; i < mot.length; i++){
letterm = mot.charAt(i);
if (letterm == letter) {
motaffiche = motaffiche + letter;
bon = 1;
} else {
chartoinsert = oldmotaffiche.charAt(i);
// alert(chartoinsert);
if (chartoinsert == "*") {
motaffiche = motaffiche + "*";
} else {
motaffiche = motaffiche + chartoinsert;
}
}
// alert(motaffiche);
}
if (bon == 0) {
restant = restant - 1;
document.getElementById("restant").innerHTML="Nombre d'essais restants : " + restant;
}
document.getElementById("motaffichehtml").innerHTML=motaffiche;
if (motaffiche == mot) {
document.getElementById("stat").innerHTML="GAGNÉ !";
mot = "none";
motaffiche = "";
restant = 10;
letterstested = "";
}
if (restant == 0) {
document.getElementById("stat").innerHTML="GAME OVER !";
mot = "none";
motaffiche = "";
restant = 10;
letterstested = "";
}
letterstested = letterstested + letter
} else {
document.getElementById("error").innerHTML="<b>Veillez cliquer sur \"Nouveau mot\" pour (re)lancer le jeu.</b>";
}
}
function start() {
document.getElementById("stat").innerHTML="";
mots = Array("HAMBURG", "PARIS", "DRESDE", "BERLIN", "TOULOUSE", "TOURS", "BORDEAUX", "DIJON", "MONTPELLIER", "MARSEILLE", "NICE", "MUNICH");
mot = mots[Math.floor(Math.random() * mots.length)];
motaffiche = "";
for(var i = 0; i < mot.length; i++) {
motaffiche = motaffiche + "*";
}
// restant = 10;
// alert(mot);
// alert(motaffiche);
document.getElementById("motaffichehtml").innerHTML=motaffiche;
document.getElementById("error").innerHTML="";
restant = 10;
letterstested = "";
}
function reset() {
document.getElementById("motaffichehtml").innerHTML="Mot à deviner";
document.getElementById("restant").innerHTML="Nombre d'essais restants";
document.getElementById("error").innerHTML="";
document.getElementById("stat").innerHTML="";
mot = "none";
motaffiche = "";
restant = 10;
letterstested = "";
}
</script>
</header>
<body>
<h1>Jeu du pendu</h1>
<div>
<div>
<div>
<button class="letter" type="button" name="A" onclick="tryletter('A')">A</button>
<button class="letter" type="button" name="B" onclick="tryletter('B')">B</button>
<button class="letter" type="button" name="C" onclick="tryletter('C')">C</button>
<button class="letter" type="button" name="D" onclick="tryletter('D')">D</button>
</div>
<div>
<button class="letter" type="button" name="E" onclick="tryletter('E')">E</button>
<button class="letter" type="button" name="F" onclick="tryletter('F')">F</button>
<button class="letter" type="button" name="G" onclick="tryletter('G')">G</button>
<button class="letter" type="button" name="H" onclick="tryletter('H')">H</button>
</div>
<div>
<button class="letter" type="button" name="I" onclick="tryletter('I')">I</button>
<button class="letter" type="button" name="J" onclick="tryletter('J')">J</button>
<button class="letter" type="button" name="K" onclick="tryletter('K')">K</button>
<button class="letter" type="button" name="L" onclick="tryletter('L')">L</button>
</div>
<div>
<button class="letter" type="button" name="M" onclick="tryletter('M')">M</button>
<button class="letter" type="button" name="N" onclick="tryletter('N')">N</button>
<button class="letter" type="button" name="O" onclick="tryletter('O')">O</button>
<button class="letter" type="button" name="P" onclick="tryletter('P')">P</button>
</div>
<div>
<button class="letter" type="button" name="Q" onclick="tryletter('Q')">Q</button>
<button class="letter" type="button" name="R" onclick="tryletter('R')">R</button>
<button class="letter" type="button" name="S" onclick="tryletter('S')">S</button>
<button class="letter" type="button" name="T" onclick="tryletter('T')">T</button>
</div>
<div>
<button class="letter" type="button" name="U" onclick="tryletter('U')">U</button>
<button class="letter" type="button" name="V" onclick="tryletter('V')">V</button>
<button class="letter" type="button" name="W" onclick="tryletter('W')">W</button>
<button class="letter" type="button" name="X" onclick="tryletter('X')">X</button>
</div>
<div>
<button class="letter" type="button" name="Y" onclick="tryletter('Y')">Y</button>
<button class="letter" type="button" name="Z" onclick="tryletter('Z')">Z</button>
</div>
</div>
<div>
<p id = "motaffichehtml">Mot à deviner</p>
<p id = "restant">Nombre d'essais restants</p>
<p id="stat"></p>
<p id="error"></p>
<button type="button" name="restart" onclick = "start()">Nouveau mot</button>
<button type="button" name="reinit" onclick = "reset()">Réinitialiser le jeu</button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment