wamster/JS
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fin du TP03

Browse Source
This commit is contained in:
Alexis WAMSTER 2024-02-27 17:32:57 +01:00
parent 0d2bffb2a0
commit 7675a4c739
4 changed files with 181 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TP03/EX02/js/memory.js
View File

@ -5,7 +5,6 @@ var perduView;
var gagneView;
var btnStart;
var scoreView;
var listeEtatAmpouleInitiale = [];
var listeEtatAmpoule = [];
var ALLUMEE = 1;

46
TP03/EX03/css/style.css Normal file
View File

@ -0,0 +1,46 @@
.slot{
width:52px;
height:52px;
padding:2px;
margin:11px;
border:1px solid #aaaaaa;
background-color:#ffffff;
display:inline-block;
vertical-align:middle;
}
.drag{
width:50px;
height:50px;
border:1px solid #aaaaaa;
background-color:#eeeeee;
text-align:center;
font-size:25px;
line-height:52px;
}
.ct{
height:100px;
margin:10px;
line-height:100px;
text-align:center;
}
.normal{
background-color:#1583CC;
}
.good{
background-color:#00867F;
}
.wrong{
background-color:#eeaaaa;
}
[draggable=true] {
cursor: move;
}

72
TP03/EX03/js/tri.js Normal file
View File

@ -0,0 +1,72 @@
document.addEventListener('DOMContentLoaded', chargementPage);
var listeChiffreView = [];
var listeChiffre = [];
var listeChiffreTriee = [];
var start;
var end;
var listeEnd;
var score = 0;
function chargementPage(){
listeChiffreView = document.getElementsByClassName("drag");
start = document.getElementById("start");
end = document.getElementById("end");
listeEnd = end.getElementsByClassName("slot");
start.addEventListener("dragstart", drag);
end.addEventListener("dragover", allowDrop);
end.addEventListener("drop", drop);
remplirChiffre(0,100);
trierChiffre();
}
function remplirChiffre(min,max){
for (let i=0; i<listeChiffreView.length; i++){
listeChiffre[i] = getRandomInt(min, max);
listeChiffreView[i].textContent = listeChiffre[i];
}
}
function trierChiffre(){
listeChiffreTriee = listeChiffre.slice().sort((a,b) => (a-b));
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min
}
function findIndex(tableau, element){
for (var i = 0; i < tableau.length; i++) {
if (tableau[i] === element) {
return i;
}
}
return null;
}
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("objet", event.target.id);
}
function drop(event) {
var numSlot = findIndex(listeEnd, event.target);
if (numSlot !== null){
event.preventDefault();
var idObjet = event.dataTransfer.getData("objet");
var objet = document.getElementById(idObjet);
event.target.appendChild(objet);
if (objet.textContent !== ""+listeChiffreTriee[numSlot]){
score --;
}
if (score < 0){
end.classList.replace("good", "normal")
if (score < -3){
end.classList.replace("normal", "wrong")
}
}
}
}

63
TP03/EX03/tri.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/tri.js"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h3>Drag and Drop</h3>
<!-- Le tableau initial -->
<div class="ct normal" id="start">
<div class="slot">
<div id="drag1" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag2" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag3" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag4" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag5" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag6" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag7" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag8" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag9" class="drag" draggable="true"></div>
</div>
<div class="slot">
<div id="drag10" class="drag" draggable="true"></div>
</div>
</div>
<!-- Le tableau doit être trié ici -->
<div class="ct good" id="end">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
</body>
</html>