School-DUT-info/M413-Programmation-Web-Client-Riche
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refonte debut module

Browse Source
This commit is contained in:
JunkJumper
2021-01-21 09:37:31 +01:00
parent baaf398e5d
commit a2e304bb63
41 changed files with 871 additions and 1203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
2019-2020/TD3/README.MD Normal file
View File

@ -0,0 +1,5 @@
# Programmation Web – client riche - TD3
## Exercice 1
Alors j'ai utilisé un buffer pour stocker le innerHTML afin de terminer toutes les instructions concernant un objet/une variable avant de passer à/au suivant.e.

BIN
2019-2020/TD3/TP3_JS_M413_2016.pdf Normal file
View File

Binary file not shown.

43
2019-2020/TD3/css/td3-exo1.css Normal file
View File

@ -0,0 +1,43 @@
html {
font-size: 62.5%;
}
body {
margin: 0px;
padding: 0px;
}
#jeu {
border-style:solid;
border-width:1px;
background-color:#00008B;
margin:0px;
width: 306px;
height:306px;
position: absolute;
}
.case {
border-style:solid;
border-width:1px;
background-color:#1E90FF;
margin:0px;
padding: 0px;
width: 100px;
height:100px;
position: absolute;
z-index:1;
transition-property : top, left;
transition-duration : 1s;
}
div{
padding:0px;
}
h1{
text-align: center;
font-size: 4rem;
margin:0;
padding: 27px 0px;
}
.vide {
background-color:#00008B;
z-index:0;
border:none
}

40
2019-2020/TD3/css/td3-exo2.css Normal file
View File

@ -0,0 +1,40 @@
html { font-size: 62.5%; }
body { margin: 0px; padding: 0px; color : black}
#jeu {
border-style:solid;
border-width:1px;
background-color:#00008B;
margin:0px;
width: 408px;
height:408px;
}
#commande {
margin:0px;
height:30px;
position: absolute;
left : 410px;
top: 0px;
}
.case {
border-style:solid;
border-width:1px;
border-color:black;
background-color:#1E90FF;
margin:0px;
padding: 0px;
width: 100px;
height:100px;
position: absolute;
z-index:1;
transition-property : top, left;
transition-duration : 1s;
text-align: center;
font-size: 4rem;
line-height: 100px;
}
.new {
color : red;
}
.videold { background-color:#00008B; z-index:0; border:none}

21
2019-2020/TD3/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>M4103 - Programmation Web Client Riche</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='../css/main.css'>
<h1>M4103 - Programmation Web Client Riche</h1>
<h2>Sommaire TD3</h2>
</head>
<body>
<ul>
<li><a href="./td3-exo1.html">Le jeu du taquin</a></li>
<li><a href="./td3-exo2.html">Le jeu du 2048</a></li>
</ul>
</body>
</html>

29
2019-2020/TD3/js/td3-exo1.js Normal file
View File

@ -0,0 +1,29 @@
console.log("Chargement...");
function init() {
console.log("Initialisation...");
var div = document.querySelectorAll(".case");
for (var i = 0; i < div.length; i++) {
div[i].addEventListener("click", selection);
}
}
function selection(event) {
var maCase = event.currentTarget;
var vide = document.body.querySelector(".case.vide");
if ((maCase.offsetTop == vide.offsetTop && Math.abs(maCase.offsetLeft - vide.offsetLeft) == 102) ||
(maCase.offsetLeft == vide.offsetLeft && Math.abs(maCase.offsetTop - vide.offsetTop) == 102)) {
console.log("Déplacement effectué !");
maCase.className = "case vide";
var buff = maCase.innerHTML;
maCase.innerHTML = "";
vide.className = "case";
vide.innerHTML = buff;
}
var e = event.target;
}

5
2019-2020/TD3/js/td3-exo2.js Normal file
View File

@ -0,0 +1,5 @@
console.log("js linkef");
function init() {
console.log("init ok");
}

22
2019-2020/TD3/td3-exo1.html Normal file
View File

@ -0,0 +1,22 @@
<!doctype html>
<html lang="fr">
<head>
<title>Taquin</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/td3-exo1.css" media="all">
<script type="text/javascript" src="js/td3-exo1.js"></script>
</head>
<body onload="init();">
<div id="jeu">
<div style="top:0px;left:0px;" class="case"><h1>6</h1></div>
<div style="top:0px;left:102px;" class="case"><h1>1</h1></div>
<div style="top:0px;left:204px;" class="case"><h1>7</h1></div>
<div style="top:102px;left:0px;" class="case"><h1>3</h1></div>
<div style="top:102px;left:102px;" class="case"><h1>4</h1></div>
<div style="top:102px;left:204px;" class="case"><h1>8</h1></div>
<div style="top:204px;left:0px;" class="case"><h1>5</h1></div>
<div style="top:204px;left:102px;" class="case"><h1>2</h1></div>
<div style="top:204px;left:204px;" class="case vide"><h1> </h1></div>
</div>
</body>
</html>

37
2019-2020/TD3/td3-exo2.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Jeu 2048</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/td3-exo2.css" />
<script type="text/javascript" src="js/td3-exo2.js"> </script>
</head>
<body onload="init();">
<div id="jeu">
<div class="ligne">
<div style="top:0px;left:0px;" class="case"></div>
<div style="top:0px;left:102px;" class="case"></div>
<div style="top:0px;left:204px;" class="case"></div>
<div style="top:0px;left:306px;" class="case"></div>
</div>
<div class="ligne">
<div style="top:102px;left:0px;" class="case"></div>
<div style="top:102px;left:102px;" class="case"></div>
<div style="top:102px;left:204px;" class="case"></div>
<div style="top:102px;left:306px;" class="case"></div>
</div>
<div class="ligne">
<div style="top:204px;left:0px;" class="case"></div>
<div style="top:204px;left:102px;" class="case"></div>
<div style="top:204px;left:204px;" class="case"></div>
<div style="top:204px;left:306px;" class="case"></div>
</div>
<div class="ligne">
<div style="top:306px;left:0px;" class="case"></div>
<div style="top:306px;left:102px;" class="case"></div>
<div style="top:306px;left:204px;" class="case"></div>
<div style="top:306px;left:306px;" class="case"></div>
</div>
</div>
</body>
</html>