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

Merge pull request #2 from JunkJumper/Td3

Browse Source 
Td3
This commit is contained in:
JunkJumper 2020-02-12 18:36:59 +01:00 committed by GitHub
commit d7b74d77eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 203 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
TD3/README.MD Normal file
View File

@ -0,0 +1,6 @@
# Programmation Web – client riche - TD3
## Exercice 1
> Que pouvez-vous dire de l’architecture de l’application ?

BIN
TD3/TP3_JS_M413_2016.pdf Normal file
View File

Binary file not shown.

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

28
TD3/js/td3-exo1.js Normal file
View File

@ -0,0 +1,28 @@
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("1");
maCase.className = "case vide";
vide.className = "case";
}
console.log(event.currentTarget.className + " : " + event.currentTarget.innerText);
var e = event.target;
}

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

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

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

1
index.html
View File

@ -16,6 +16,7 @@
<ul>
<li><a href="./TD1/">TD1</a></li>
<li><a href="./TD2/">TD2</a></li>
<li><a href="./TD3/">TD3</a></li>
</ul>
</body>