Finale version with comments
This commit is contained in:
parent
128e8ad197
commit
f2769ef257
2 changed files with 36 additions and 20 deletions
36
script.js
36
script.js
|
@ -15,6 +15,10 @@ readTextFile("words.txt");
|
||||||
aleatoire();
|
aleatoire();
|
||||||
setMyKeyDownListener();
|
setMyKeyDownListener();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//------------------------------Changement de couleur Keys et Divs------------------
|
||||||
|
|
||||||
function change_color_good_letter(coord){
|
function change_color_good_letter(coord){
|
||||||
var case_div = document.getElementById(coord);
|
var case_div = document.getElementById(coord);
|
||||||
case_div.style.color = good_letter_text_color;
|
case_div.style.color = good_letter_text_color;
|
||||||
|
@ -52,41 +56,46 @@ function key_color_bad_letter(key){
|
||||||
|
|
||||||
function key_color_mid_letter(key){
|
function key_color_mid_letter(key){
|
||||||
var key_div = document.getElementById(key);
|
var key_div = document.getElementById(key);
|
||||||
if (key_div.style.backgroundColor != good_letter_color){
|
console.log(key_div.style.backgroundColor);
|
||||||
|
if (key_div.style.backgroundColor != "rgb(152, 217, 139)"){
|
||||||
|
|
||||||
key_div.style.backgroundColor = mid_letter_color;
|
key_div.style.backgroundColor = mid_letter_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//------------------------------END - Changement de couleur Keys et Divs------------------
|
||||||
|
|
||||||
|
//Fonction de mise a jour lettre par lettre
|
||||||
function update(x) {
|
function update(x) {
|
||||||
if (free_box[1]==6) {
|
if (free_box[1]==6) {
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
word += x.toLowerCase();
|
word += x.toLowerCase();
|
||||||
free = free_box.map(num=>{return String(num)}).join("");
|
free = free_box.map(num=>{return String(num)}).join(""); // free prends la valeur des deux indices de la case courante concatenes (ex:[1,2] devient 12)
|
||||||
document.getElementById(free).innerHTML = x;
|
document.getElementById(free).innerHTML = x; // on affiche la lettre dans la case du tableau d'affichage a l'aide de l'id free /
|
||||||
free_box[1]+=1;
|
free_box[1]+=1;
|
||||||
if (word.length == 5){
|
if (word.length == 5){
|
||||||
if(arrWords.includes(word)){
|
if (!(arrWords.includes(word))){ //affichage de l'existance d'un mot ou non/
|
||||||
}
|
|
||||||
else {
|
|
||||||
document.getElementById("info").innerHTML="NOT A WORD";
|
document.getElementById("info").innerHTML="NOT A WORD";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction de suppression de lettres dans divs
|
||||||
function Supprimer() {
|
function Supprimer() {
|
||||||
document.getElementById("info").innerHTML="";
|
document.getElementById("info").innerHTML=""; //reset l'information sur l'existance d'un mot ou non car il y a au max 4 lettres/
|
||||||
word = word.slice(0,-1);
|
word = word.slice(0,-1);
|
||||||
if (free_box[1]==1) {
|
if (free_box[1]==1) {
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
free_box[1]+=-1;
|
free_box[1]+=-1;
|
||||||
}
|
}
|
||||||
free = free_box.map(num=>{return String(num)}).join("");
|
free = free_box.map(num=>{return String(num)}).join(""); // free prends la valeur des deux indices de la case courante concatenes (ex:[1,2] devient 12) /
|
||||||
document.getElementById(free).innerHTML = "";
|
document.getElementById(free).innerHTML = ""; //on retire la lettre dans la case du tableau d'affichage a l'aide de l'id free */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction de vérification du mot
|
||||||
function Enter() {
|
function Enter() {
|
||||||
if (verifWord() && free_box[0]!=6) {
|
if (verifWord() && free_box[0]!=6) {
|
||||||
write_result(verifLettres(word));
|
write_result(verifLettres(word));
|
||||||
|
@ -102,6 +111,7 @@ function Enter() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction de vérification de la lettre : bonne place, bonne lettre + changement couleur clavier
|
||||||
function verifLettres() {
|
function verifLettres() {
|
||||||
let verif = [0,0,0,0,0];
|
let verif = [0,0,0,0,0];
|
||||||
for(let i=0 ; i<5; i++){
|
for(let i=0 ; i<5; i++){
|
||||||
|
@ -122,6 +132,7 @@ function verifLettres() {
|
||||||
return verif;
|
return verif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction de vérification de la lettre : bonne place, bonne lettre
|
||||||
function write_result(verif){
|
function write_result(verif){
|
||||||
let pos = "";
|
let pos = "";
|
||||||
pos = free_box[0].toString();
|
pos = free_box[0].toString();
|
||||||
|
@ -145,6 +156,7 @@ function write_result(verif){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction de redémarrage du jeu
|
||||||
function recommencer (){
|
function recommencer (){
|
||||||
word="";
|
word="";
|
||||||
let coord;
|
let coord;
|
||||||
|
@ -168,6 +180,7 @@ function recommencer (){
|
||||||
free_box = [1,1];
|
free_box = [1,1];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction de lecture du fichier texte words.txt dans une variable arrwords
|
||||||
function readTextFile(file) { //Merci StackOverflow
|
function readTextFile(file) { //Merci StackOverflow
|
||||||
var rawFile = new XMLHttpRequest();
|
var rawFile = new XMLHttpRequest();
|
||||||
rawFile.open("GET", file, false);
|
rawFile.open("GET", file, false);
|
||||||
|
@ -182,25 +195,28 @@ function readTextFile(file) { //Merci StackOverflow
|
||||||
rawFile.send(null);
|
rawFile.send(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction de vérification de l'existence d'un mot
|
||||||
function verifWord() {
|
function verifWord() {
|
||||||
let exist = false;
|
let exist = false;
|
||||||
if (word.length == 5){
|
if (word.length == 5){
|
||||||
if(arrWords.includes(word)){
|
if(arrWords.includes(word)){
|
||||||
exist = true;
|
exist = true;
|
||||||
}
|
}
|
||||||
else {
|
else { //affichage de l'existance d'un mot ou non/
|
||||||
document.getElementById("info").innerHTML="NOT A WORD";
|
document.getElementById("info").innerHTML="NOT A WORD";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return exist;
|
return exist;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction d'attribution d'un mot aléatoire à deviner
|
||||||
function aleatoire() {
|
function aleatoire() {
|
||||||
let rand = Math.floor(Math.random() * arrWords.length);
|
let rand = Math.floor(Math.random() * arrWords.length);
|
||||||
reponse = arrWords[rand];
|
reponse = arrWords[rand];
|
||||||
console.log(reponse);
|
console.log(reponse);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Fonction pour lire les entrées du clavier physique
|
||||||
function setMyKeyDownListener() {
|
function setMyKeyDownListener() {
|
||||||
window.addEventListener("keydown",
|
window.addEventListener("keydown",
|
||||||
function(event){
|
function(event){
|
||||||
|
|
|
@ -16,7 +16,7 @@ section{ /* Alignement du tableau de jeu */
|
||||||
padding-top: 5%;
|
padding-top: 5%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.info{ /* Alignement du tableau de jeu */
|
.info{ /* Alignement du texte NOT A WORD et fin de jeu */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
}
|
}
|
||||||
|
@ -64,7 +64,7 @@ footer{ /* Fond et alignement du clavier */
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
|
||||||
}
|
}
|
||||||
footer div {
|
footer div { /* Placement du clavier dans le footer */
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
@ -74,7 +74,7 @@ footer div {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button { /* Apparence touches clavier */
|
button { /* Apparence touches clavier + Start Over */
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
|
@ -86,7 +86,7 @@ button { /* Apparence touches clavier */
|
||||||
border:none;
|
border:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover{ /* Apparence touches clavier quand suvolées */
|
button:hover{ /* Apparence touches clavier quand suvolées + Start Over */
|
||||||
background-color:rgb(75, 24, 15);
|
background-color:rgb(75, 24, 15);
|
||||||
color : rgb(245, 230, 230);
|
color : rgb(245, 230, 230);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue