premier jet
This commit is contained in:
commit
c889fbcb01
28
index.html
Normal file
28
index.html
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr-FR">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="color-scheme" content="light dark" />
|
||||||
|
<title>LOTUS</title>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<h1>LOTUS</h1>
|
||||||
|
<div id="grille"></div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div style="display: none">
|
||||||
|
<audio preload src="sons/lettre-non-trouve.wav" id="sonLettreNonTrouvee"></audio>
|
||||||
|
<audio preload src="sons/lettre-mal-place.wav" id="sonLettreMalPlacee"></audio>
|
||||||
|
<audio preload src="sons/lettre-bien-place.wav" id="sonLettreBienPlacee"></audio>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="mots.js" charset="UTF-8"></script>
|
||||||
|
<script src="script.js" charset="UTF-8"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2674
mots_accentues.js
Normal file
2674
mots_accentues.js
Normal file
File diff suppressed because it is too large
Load Diff
146
script.js
Normal file
146
script.js
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
const periode = 500 //ms
|
||||||
|
|
||||||
|
var substition = {
|
||||||
|
"é": "e",
|
||||||
|
"è": "e",
|
||||||
|
"ê": "e",
|
||||||
|
"ë": "e",
|
||||||
|
"â": "a",
|
||||||
|
"à": "a",
|
||||||
|
"î": "i",
|
||||||
|
"ô": "o",
|
||||||
|
"œ": "oe",
|
||||||
|
"û": "u",
|
||||||
|
"ù": "u",
|
||||||
|
"ü": "u",
|
||||||
|
"ç": "c"
|
||||||
|
}
|
||||||
|
|
||||||
|
var motATrouver
|
||||||
|
var lettresTrouvees
|
||||||
|
var nbLettres
|
||||||
|
function nouvellePartie() {
|
||||||
|
motATrouver = mots[Math.floor(mots.length * Math.random())]
|
||||||
|
motATrouver = Array.from(motATrouver).map((lettre) => substition[lettre] || lettre)
|
||||||
|
nbLettres = motATrouver.length
|
||||||
|
|
||||||
|
lettresTrouvees = [motATrouver[0]]
|
||||||
|
|
||||||
|
grille.innerHTML = ""
|
||||||
|
|
||||||
|
nouvelEssai()
|
||||||
|
}
|
||||||
|
|
||||||
|
var form
|
||||||
|
var lettresATrouver
|
||||||
|
var nbLettresBienPlacees
|
||||||
|
function nouvelEssai() {
|
||||||
|
form = document.createElement("form")
|
||||||
|
form.action = "#"
|
||||||
|
form.onsubmit = onsubmit
|
||||||
|
|
||||||
|
lettresATrouver = Array.from(motATrouver)
|
||||||
|
nbLettresBienPlacees = 0
|
||||||
|
|
||||||
|
motATrouver.forEach((lettre, indice) => {
|
||||||
|
var input = document.createElement("input")
|
||||||
|
input.type = "text"
|
||||||
|
input.required = true
|
||||||
|
input.minLength = 1
|
||||||
|
input.maxLength = 1
|
||||||
|
input.size = 1
|
||||||
|
input.pattern = "[a-z]"
|
||||||
|
input.onfocus = onfocus
|
||||||
|
input.onkeydown = onkeydown
|
||||||
|
input.oninput = oninput
|
||||||
|
input.onkeyup = onkeyup
|
||||||
|
input.tabIndex = indice + 1
|
||||||
|
if (lettresTrouvees[indice]) input.value = lettresTrouvees[indice]
|
||||||
|
form.appendChild(input)
|
||||||
|
})
|
||||||
|
|
||||||
|
grille.appendChild(form)
|
||||||
|
|
||||||
|
form.children[0].focus()
|
||||||
|
}
|
||||||
|
|
||||||
|
function onfocus() {
|
||||||
|
this.select()
|
||||||
|
}
|
||||||
|
|
||||||
|
function oninput() {
|
||||||
|
var lettre = this.value.toLowerCase()
|
||||||
|
if (substition[lettre]) lettre = substition[lettre]
|
||||||
|
this.value = lettre
|
||||||
|
if (this.checkValidity()) {
|
||||||
|
this.nextSibling?.focus()
|
||||||
|
} else {
|
||||||
|
this.value = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onkeydown(event) {
|
||||||
|
if (event.key == "Backspace" && this.value == "") {
|
||||||
|
this.previousSibling?.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onkeyup(event) {
|
||||||
|
switch(event.key) {
|
||||||
|
case "Enter": form.onsubmit(); break
|
||||||
|
case "ArrowLeft": this.previousSibling?.focus(); break
|
||||||
|
case "ArrowRight": this.nextSibling?.focus(); break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onsubmit(event) {
|
||||||
|
if (this.checkValidity()) {
|
||||||
|
if (mots.includes(Array.from(form.children).map((input) => input.value).join(""))) {
|
||||||
|
var inputsNonValides = Array.from(form.children)
|
||||||
|
motATrouver.forEach((lettre, indice) => {
|
||||||
|
var input = this.children[indice]
|
||||||
|
if (input.value == lettre) {
|
||||||
|
if (!lettresTrouvees[indice]) lettresTrouvees[indice] = lettre
|
||||||
|
delete(lettresATrouver[indice])
|
||||||
|
delete(inputsNonValides[indice])
|
||||||
|
nbLettresBienPlacees++
|
||||||
|
setTimeout(() => {
|
||||||
|
input.className = "lettre-bien-placee"
|
||||||
|
sonLettreBienPlacee.play()
|
||||||
|
}, periode * indice)
|
||||||
|
}
|
||||||
|
input.readOnly = true
|
||||||
|
})
|
||||||
|
|
||||||
|
inputsNonValides.forEach((input, indice) => {
|
||||||
|
var index = lettresATrouver.indexOf(input.value)
|
||||||
|
if (index >= 0) {
|
||||||
|
delete(lettresATrouver[index])
|
||||||
|
setTimeout(() => {
|
||||||
|
input.className = "lettre-mal-placee"
|
||||||
|
sonLettreMalPlacee.play()
|
||||||
|
}, periode * indice)
|
||||||
|
} else {
|
||||||
|
setTimeout(() => sonLettreNonTrouvee.play(), periode * indice)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (nbLettresBienPlacees == nbLettres) {
|
||||||
|
alert("Bien joué gros !\nUne nouvelle partie ?")
|
||||||
|
nouvellePartie()
|
||||||
|
} else nouvelEssai()
|
||||||
|
}, motATrouver.length * periode)
|
||||||
|
|
||||||
|
} else {
|
||||||
|
for(input of form.children) input.readOnly = true
|
||||||
|
sonLettreMalPlacee.play()
|
||||||
|
nouvelEssai()
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.reportValidity()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nouvellePartie()
|
||||||
BIN
sons/lettre-bien-place.wav
Normal file
BIN
sons/lettre-bien-place.wav
Normal file
Binary file not shown.
BIN
sons/lettre-mal-place.wav
Normal file
BIN
sons/lettre-mal-place.wav
Normal file
Binary file not shown.
BIN
sons/lettre-non-trouve.wav
Normal file
BIN
sons/lettre-non-trouve.wav
Normal file
Binary file not shown.
29
style.css
Normal file
29
style.css
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grille {
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grille input[type=text] {
|
||||||
|
font-size: 2em;
|
||||||
|
text-transform: capitalize;
|
||||||
|
width: 1.2em;
|
||||||
|
height: 1.2em;
|
||||||
|
padding: 0.2rem;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lettre-bien-placee {
|
||||||
|
background-image: linear-gradient(#D93526A0, #D93526A0);
|
||||||
|
background-clip: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lettre-mal-placee {
|
||||||
|
background-image: radial-gradient(ellipse at center, #FFBF00A0 70%, transparent 70%);
|
||||||
|
background-origin: content-box;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user