exo2
This commit is contained in:
@@ -44,4 +44,57 @@ http.
|
|||||||
<a href="http://www.imdb.com/title/tt0068646" target="_blank">The Godfather</a><span>1972</span>
|
<a href="http://www.imdb.com/title/tt0068646" target="_blank">The Godfather</a><span>1972</span>
|
||||||
</li>
|
</li>
|
||||||
```
|
```
|
||||||
|
#### Ex2
|
||||||
|
Le but, dans un premier temps, est d'écrire une interface, avec ajax, qui permette de joueur au jeu suivant :
|
||||||
|
|
||||||
|
- On a une grille dans laquelle sont cachés des renards (on en connait le nombre initial).
|
||||||
|
|
||||||
|
- A chaque tour, on choisit de tirer sur un case. On a l'alternative suivante :
|
||||||
|
- on tue un renard,
|
||||||
|
- on récupére les nombres de renards sur la grille sur la ligne, colonne et diagonales de la case.
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="img/renard1.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Le jeu utilise un serveur http à l'url suivante
|
||||||
|
|
||||||
|
```
|
||||||
|
https://dwarves.iut-fbleau.fr/foxes/foxes.php
|
||||||
|
```
|
||||||
|
|
||||||
|
Voici les urls du jeu :
|
||||||
|
|
||||||
|
```
|
||||||
|
https://dwarves.iut-fbleau.fr/foxes/foxes.php?new&size=10&foxes=10
|
||||||
|
```
|
||||||
|
|
||||||
|
initialise la partie , avec la taille de la grille et le nombre de renards
|
||||||
|
dont la position est aléatoire (le script utilise des sessions de cinq minutes).
|
||||||
|
|
||||||
|
La réponse normale, en json :
|
||||||
|
|
||||||
|
```json
|
||||||
|
{"status":"ok","foxes":10,"tries":0}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
https://dwarves.iut-fbleau.fr/foxes/foxes.php?X=1&Y=3
|
||||||
|
```
|
||||||
|
|
||||||
|
permet de tirer sur une case. Le serveur répond
|
||||||
|
|
||||||
|
```json
|
||||||
|
{"status":"ok","foxes":2,"tries":1}
|
||||||
|
```
|
||||||
|
|
||||||
|
`foxes` vaut -1 si le coup est gagnant, sinon donne le nombre de renards de la colonne, ligne et diagonales de la case.
|
||||||
|
|
||||||
|
|
||||||
|
En cas de victoire, le status est `win`. En cas d'erreur, le status est `nok`.
|
||||||
|
|
||||||
|
|
||||||
|
**Remarque**
|
||||||
|
|
||||||
|
Ajouter l'option `credentials` à vos requêtes pour utiliser la session en cours.
|
||||||
|
|||||||
BIN
R4.01_R4.A.10/td_tp/tp4/img/renard1.png
Normal file
BIN
R4.01_R4.A.10/td_tp/tp4/img/renard1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
36
R4.01_R4.A.10/td_tp/tp4/src/ex2/app.js
Normal file
36
R4.01_R4.A.10/td_tp/tp4/src/ex2/app.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import loader from './loader.js';
|
||||||
|
const board = document.querySelector("div.board");
|
||||||
|
const form = document.querySelector("form");
|
||||||
|
const message = document.querySelector("#message");
|
||||||
|
const ld = new loader(document.getElementById("loader"));
|
||||||
|
|
||||||
|
let url = 'https://dwarves.iut-fbleau.fr/foxes/foxes.php';
|
||||||
|
|
||||||
|
let foxes;
|
||||||
|
let size;
|
||||||
|
|
||||||
|
let newBoard = ( (size ) => {
|
||||||
|
let frag = document.createDocumentFragment();
|
||||||
|
for (let i = 0; i< size; i++){
|
||||||
|
let div = document.createElement("div");
|
||||||
|
for(let j = 0; j < size; j++){
|
||||||
|
let span = document.createElement("span");
|
||||||
|
span.dataset.num = size*i + j;
|
||||||
|
div.appendChild(span);
|
||||||
|
}
|
||||||
|
frag.appendChild(div);
|
||||||
|
}
|
||||||
|
board.replaceChildren(frag);
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
form.addEventListener("submit", (async (ev) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
// TODO
|
||||||
|
}))
|
||||||
|
|
||||||
|
|
||||||
|
board.addEventListener("click", ( async (ev) => {
|
||||||
|
// TODO
|
||||||
|
}))
|
||||||
54
R4.01_R4.A.10/td_tp/tp4/src/ex2/css/style.css
Normal file
54
R4.01_R4.A.10/td_tp/tp4/src/ex2/css/style.css
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
article {
|
||||||
|
text-align : center;
|
||||||
|
}
|
||||||
|
.board > div {
|
||||||
|
display : flex;
|
||||||
|
}
|
||||||
|
article .board {
|
||||||
|
display : inline-block;
|
||||||
|
}
|
||||||
|
.board span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align:baseline;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
/*padding : 1em;*/
|
||||||
|
margin : 0.1em;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid #444;
|
||||||
|
/*background: radial-gradient(rgb(150,250,150), #00ee00);*/
|
||||||
|
}
|
||||||
|
.board span:hover {
|
||||||
|
background: #3AB903;
|
||||||
|
background: radial-gradient(rgb(66, 255, 66), #065006);
|
||||||
|
}
|
||||||
|
|
||||||
|
.board span.on {
|
||||||
|
background: #009900;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.is-loading {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
overflow: show;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
div.is-loading:after {
|
||||||
|
animation: spinAround 500ms infinite linear;
|
||||||
|
border: 2px solid hsl(0deg, 0%, 86%);
|
||||||
|
border-radius: 9999px;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
top: calc(50% - 5em);
|
||||||
|
left: calc(50% - 5em);
|
||||||
|
width: 10em;
|
||||||
|
height: 10em;
|
||||||
|
border-width: 0.25em;
|
||||||
|
}
|
||||||
35
R4.01_R4.A.10/td_tp/tp4/src/ex2/foxes.html
Normal file
35
R4.01_R4.A.10/td_tp/tp4/src/ex2/foxes.html
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title></title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||||
|
>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div id="loader" ></div>
|
||||||
|
|
||||||
|
<hgroup>
|
||||||
|
<h4>Foxes</h4>
|
||||||
|
<p>Le but est de tuer tous les renards en minimisant le nombre de coups joués.</p>
|
||||||
|
</hgroup>
|
||||||
|
<p id="message"></p>
|
||||||
|
<article>
|
||||||
|
<div class="board">
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<form>
|
||||||
|
<fieldset role="group">
|
||||||
|
<input type="text" name="size" placeholder="Size">
|
||||||
|
<input type="text" name="foxes" placeholder="Foxes">
|
||||||
|
<input type="submit" value="New Game">
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<script type="module" src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
R4.01_R4.A.10/td_tp/tp4/src/ex2/loader.js
Normal file
12
R4.01_R4.A.10/td_tp/tp4/src/ex2/loader.js
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
class loader {
|
||||||
|
constructor(node){
|
||||||
|
this.node = node
|
||||||
|
}
|
||||||
|
set(loading){
|
||||||
|
if (loading)
|
||||||
|
this.node.classList.add("is-loading")
|
||||||
|
else
|
||||||
|
this.node.classList.remove("is-loading")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default loader
|
||||||
Reference in New Issue
Block a user