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>
|
||||
</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