Merge branch 'master' of https://git.etud.insa-toulouse.fr/blavigna/projet_prog_web
This commit is contained in:
Brunetto Marie
commit
8db0ec99c4
3 changed files with 150 additions and 104 deletions
201
index.html
201
index.html
|
|
@ -1,111 +1,112 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Document</title>
|
<title>WORDLE MAIS L'INSA</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<script type="text/javascript" src="script.js"></script>
|
<script type="text/javascript" src="script.js"></script>
|
||||||
</head>
|
|
||||||
<body>
|
</head>
|
||||||
|
<body>
|
||||||
<header>WORDLE INSA</header>
|
|
||||||
|
<header>WORDLE INSA</header>
|
||||||
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
<p id="info" class="info"></p>
|
||||||
|
<div class="grille_haut"> <!-- Grille de mots -->
|
||||||
|
<div id="ligne1">
|
||||||
|
<div id="case11"><p id="11"></p></div>
|
||||||
|
<div id="case12"><p id="12"></p></div>
|
||||||
|
<div id="case13"><p id="13"></p></div>
|
||||||
|
<div id="case14"><p id="14"></p></div>
|
||||||
|
<div id="case15"><p id="15"></p></div>
|
||||||
|
</div>
|
||||||
|
<div id="ligne2">
|
||||||
|
<div id="case21"><p id="21"></p></div>
|
||||||
|
<div id="case22"><p id="22"></p></div>
|
||||||
|
<div id="case23"><p id="23"></p></div>
|
||||||
|
<div id="case24"><p id="24"></p></div>
|
||||||
|
<div id="case25"><p id="25"></p></div>
|
||||||
|
</div>
|
||||||
|
<div id="ligne3">
|
||||||
|
<div id="case31"><p id="31"></p></div>
|
||||||
|
<div id="case32"><p id="32"></p></div>
|
||||||
|
<div id="case33"><p id="33"></p></div>
|
||||||
|
<div id="case34"><p id="34"></p></div>
|
||||||
|
<div id="case35"><p id="35"></p></div>
|
||||||
|
</div>
|
||||||
|
<div id="ligne4">
|
||||||
|
<div id="case41"><p id="41"></p></div>
|
||||||
|
<div id="case42"><p id="42"></p></div>
|
||||||
|
<div id="case43"><p id="43"></p></div>
|
||||||
|
<div id="case44"><p id="44"></p></div>
|
||||||
|
<div id="case45"><p id="45"></p></div>
|
||||||
|
</div>
|
||||||
|
<div id="ligne5">
|
||||||
|
<div id="case51"><p id="51"></p></div>
|
||||||
|
<div id="case52"><p id="52"></p></div>
|
||||||
|
<div id="case53"><p id="53"></p></div>
|
||||||
|
<div id="case54"><p id="54"></p></div>
|
||||||
|
<div id="case55"><p id="55"></p></div>
|
||||||
|
</div>
|
||||||
|
<div id="ligne6">
|
||||||
|
<div id="case61"><p id="61"></p></div>
|
||||||
|
<div id="case62"><p id="62"></p></div>
|
||||||
|
<div id="case63"><p id="63"></p></div>
|
||||||
|
<div id="case64"><p id="64"></p></div>
|
||||||
|
<div id="case65"><p id="65"></p></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grille_haut"> <!-- Grille de mots -->
|
</div> <!-- Fin Grille de mots -->
|
||||||
<div id="ligne1">
|
|
||||||
<div id="case11"><p id="11"></p></div>
|
|
||||||
<div id="case12"><p id="12"></p></div>
|
|
||||||
<div id="case13"><p id="13"></p></div>
|
|
||||||
<div id="case14"><p id="14"></p></div>
|
|
||||||
<div id="case15"><p id="15"></p></div>
|
|
||||||
</div>
|
|
||||||
<div id="ligne2">
|
|
||||||
<div id="case21"><p id="21"></p></div>
|
|
||||||
<div id="case22"><p id="22"></p></div>
|
|
||||||
<div id="case23"><p id="23"></p></div>
|
|
||||||
<div id="case24"><p id="24"></p></div>
|
|
||||||
<div id="case25"><p id="25"></p></div>
|
|
||||||
</div>
|
|
||||||
<div id="ligne3">
|
|
||||||
<div id="case31"><p id="31"></p></div>
|
|
||||||
<div id="case32"><p id="32"></p></div>
|
|
||||||
<div id="case33"><p id="33"></p></div>
|
|
||||||
<div id="case34"><p id="34"></p></div>
|
|
||||||
<div id="case35"><p id="35"></p></div>
|
|
||||||
</div>
|
|
||||||
<div id="ligne4">
|
|
||||||
<div id="case41"><p id="41"></p></div>
|
|
||||||
<div id="case42"><p id="42"></p></div>
|
|
||||||
<div id="case43"><p id="43"></p></div>
|
|
||||||
<div id="case44"><p id="44"></p></div>
|
|
||||||
<div id="case45"><p id="45"></p></div>
|
|
||||||
</div>
|
|
||||||
<div id="ligne5">
|
|
||||||
<div id="case51"><p id="51"></p></div>
|
|
||||||
<div id="case52"><p id="52"></p></div>
|
|
||||||
<div id="case53"><p id="53"></p></div>
|
|
||||||
<div id="case54"><p id="54"></p></div>
|
|
||||||
<div id="case55"><p id="55"></p></div>
|
|
||||||
</div>
|
|
||||||
<div id="ligne6">
|
|
||||||
<div id="case61"><p id="61"></p></div>
|
|
||||||
<div id="case62"><p id="62"></p></div>
|
|
||||||
<div id="case63"><p id="63"></p></div>
|
|
||||||
<div id="case64"><p id="64"></p></div>
|
|
||||||
<div id="case65"><p id="65"></p></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> <!-- Fin Grille de mots -->
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="clavier">
|
<div class="clavier">
|
||||||
<div class="line1">
|
<div class="line1">
|
||||||
<!--la fonction update sera la fonction qui écrit la lettre dans la grille quand on clique dessus-->
|
<!--la fonction update sera la fonction qui écrit la lettre dans la grille quand on clique dessus-->
|
||||||
<button type="button" onclick="update('Q')">Q</button>
|
<button type="button Q" onclick="update('Q')">Q</button>
|
||||||
<button type="button" onclick="update('W')">W</button>
|
<button type="button W" onclick="update('W')">W</button>
|
||||||
<button type="button" onclick="update('E')">E</button>
|
<button type="button E" onclick="update('E')">E</button>
|
||||||
<button type="button" onclick="update('R')">R</button>
|
<button type="button R" onclick="update('R')">R</button>
|
||||||
<button type="button" onclick="update('T')">T</button>
|
<button type="button T" onclick="update('T')">T</button>
|
||||||
<button type="button" onclick="update('Y')">Y</button>
|
<button type="button Y" onclick="update('Y')">Y</button>
|
||||||
<button type="button" onclick="update('U')">U</button>
|
<button type="button U" onclick="update('U')">U</button>
|
||||||
<button type="button" onclick="update('I')">I</button>
|
<button type="button I" onclick="update('I')">I</button>
|
||||||
<button type="button" onclick="update('O')">O</button>
|
<button type="button O" onclick="update('O')">O</button>
|
||||||
<button type="button" onclick="update('P')">P</button>
|
<button type="button P" onclick="update('P')">P</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="line2" style="padding-left: 22px;">
|
<div class="line2" style="padding-left: 22px;">
|
||||||
<button type="button" onclick="update('A')">A</button>
|
<button type="button A" onclick="update('A')">A</button>
|
||||||
<button type="button" onclick="update('S')">S</button>
|
<button type="button S" onclick="update('S')">S</button>
|
||||||
<button type="button" onclick="update('D')">D</button>
|
<button type="button D" onclick="update('D')">D</button>
|
||||||
<button type="button" onclick="update('F')">F</button>
|
<button type="button F" onclick="update('F')">F</button>
|
||||||
<button type="button" onclick="update('G')">G</button>
|
<button type="button G" onclick="update('G')">G</button>
|
||||||
<button type="button" onclick="update('H')">H</button>
|
<button type="button H" onclick="update('H')">H</button>
|
||||||
<button type="button" onclick="update('J')">J</button>
|
<button type="button J" onclick="update('J')">J</button>
|
||||||
<button type="button" onclick="update('K')">K</button>
|
<button type="button K" onclick="update('K')">K</button>
|
||||||
<button type="button" onclick="update('L')">L</button>
|
<button type="button L" onclick="update('L')">L</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="line3">
|
<div class="line3">
|
||||||
<button style="width:67px;" type="button" onclick="Enter()">ENTER</button>
|
<button style="width:67px;" type="button" onclick="Enter()">ENTER</button>
|
||||||
<button type="button" onclick="update('Z')">Z</button>
|
<button type="button Z" onclick="update('Z')">Z</button>
|
||||||
<button type="button" onclick="update('X')">X</button>
|
<button type="button X" onclick="update('X')">X</button>
|
||||||
<button type="button" onclick="update('C')">C</button>
|
<button type="button C" onclick="update('C')">C</button>
|
||||||
<button type="button" onclick="update('V')">V</button>
|
<button type="button V" onclick="update('V')">V</button>
|
||||||
<button type="button" onclick="update('B')">B</button>
|
<button type="button B" onclick="update('B')">B</button>
|
||||||
<button type="button" onclick="update('N')">N</button>
|
<button type="button N" onclick="update('N')">N</button>
|
||||||
<button type="button" onclick="update('M')">M</button>
|
<button type="button M" onclick="update('M')">M</button>
|
||||||
<button style="width:68px;" type="button" onclick="Supprimer()">SUPPR</button>
|
<button style="width:68px;" type="button" onclick="Supprimer()">SUPPR</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
48
script.js
48
script.js
|
|
@ -9,6 +9,7 @@ let arrWords;
|
||||||
readTextFile("words.txt");
|
readTextFile("words.txt");
|
||||||
|
|
||||||
aleatoire();
|
aleatoire();
|
||||||
|
setMyKeyDownListener();
|
||||||
|
|
||||||
function change_color_good_letter(coord){
|
function change_color_good_letter(coord){
|
||||||
coord = "case".concat(coord)
|
coord = "case".concat(coord)
|
||||||
|
|
@ -31,6 +32,27 @@ function change_color_mid_letter(coord){
|
||||||
case_div.style.backgroundColor = mid_letter_color;
|
case_div.style.backgroundColor = mid_letter_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function key_color_good_letter(coord){
|
||||||
|
coord = "case".concat(coord)
|
||||||
|
console.log(coord)
|
||||||
|
var case_div = document.getElementById(coord);
|
||||||
|
case_div.style.backgroundColor = good_letter_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
function key_color_bad_letter(coord){
|
||||||
|
coord = "case".concat(coord)
|
||||||
|
console.log(coord)
|
||||||
|
var case_div = document.getElementById(coord);
|
||||||
|
case_div.style.backgroundColor = bad_letter_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
function key_color_mid_letter(coord){
|
||||||
|
coord = "case".concat(coord)
|
||||||
|
console.log(coord)
|
||||||
|
var case_div = document.getElementById(coord);
|
||||||
|
case_div.style.backgroundColor = mid_letter_color;
|
||||||
|
}
|
||||||
|
|
||||||
function update(x) {
|
function update(x) {
|
||||||
if (free_box[1]==6) {
|
if (free_box[1]==6) {
|
||||||
}
|
}
|
||||||
|
|
@ -44,6 +66,7 @@ function update(x) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function Supprimer() {
|
function Supprimer() {
|
||||||
|
document.getElementById("info").innerHTML="";
|
||||||
word = word.slice(0,-1);
|
word = word.slice(0,-1);
|
||||||
if (free_box[1]==1) {
|
if (free_box[1]==1) {
|
||||||
}
|
}
|
||||||
|
|
@ -145,16 +168,35 @@ function verifWord() {
|
||||||
let exist = false;
|
let exist = false;
|
||||||
if (word.length == 5){
|
if (word.length == 5){
|
||||||
for(let i = 0; i< arrWords.length;i++){
|
for(let i = 0; i< arrWords.length;i++){
|
||||||
if(arrWords[i]==word){
|
if(arrWords[i]==word){
|
||||||
exist = true;
|
exist = true;
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById("info").innerHTML="NOT A WORD";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return exist;
|
return exist;
|
||||||
}
|
}
|
||||||
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setMyKeyDownListener() {
|
||||||
|
window.addEventListener("keydown",
|
||||||
|
function(event){
|
||||||
|
console.log(event.key)
|
||||||
|
if (event.key == "Enter"){
|
||||||
|
Enter();
|
||||||
|
}
|
||||||
|
else if (event.key == "Backspace") {
|
||||||
|
Supprimer();
|
||||||
|
}
|
||||||
|
else if (event.key != "Control" & event.key != "Fn" & event.key != "Alt" & event.key != "Tab" & event.key != "CapsLock"){
|
||||||
|
update(event.key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,10 @@ section{ /* Alignement du tableau de jeu */
|
||||||
padding-top: 5%;
|
padding-top: 5%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.info{ /* Alignement du tableau de jeu */
|
||||||
|
text-align: center;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
.grille_haut { /* Alignement du tableau de jeu */
|
.grille_haut { /* Alignement du tableau de jeu */
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue