depot initial TD3

This commit is contained in:
JunkJumper 2020-02-12 17:01:08 +01:00
parent e0ebb54c8d
commit 2d38d12955
10 changed files with 193 additions and 0 deletions

6
TD3/README.MD Normal file
View File

@ -0,0 +1,6 @@
# Programmation Web client riche - TD3
## Exercice 1
> Que pouvez-vous dire de larchitecture de lapplication ?

BIN
TD3/TP3_JS_M413_2016.pdf Normal 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>

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

@ -0,0 +1,18 @@
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);
}
//console.log(grille);
}
function selection(event) {
console.log(event.currentTarget.tagName);
var e = event.target;
}

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

@ -0,0 +1,5 @@
/*<![CDATA[*/
function init(){
}
/*]]>*/

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>

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>