refonte debut module
This commit is contained in:
5
2019-2020/TD3/README.MD
Normal file
5
2019-2020/TD3/README.MD
Normal 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
BIN
2019-2020/TD3/TP3_JS_M413_2016.pdf
Normal file
Binary file not shown.
43
2019-2020/TD3/css/td3-exo1.css
Normal file
43
2019-2020/TD3/css/td3-exo1.css
Normal 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
40
2019-2020/TD3/css/td3-exo2.css
Normal 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
21
2019-2020/TD3/index.html
Normal 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
29
2019-2020/TD3/js/td3-exo1.js
Normal 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
5
2019-2020/TD3/js/td3-exo2.js
Normal file
@ -0,0 +1,5 @@
|
||||
console.log("js linkef");
|
||||
|
||||
function init() {
|
||||
console.log("init ok");
|
||||
}
|
22
2019-2020/TD3/td3-exo1.html
Normal file
22
2019-2020/TD3/td3-exo1.html
Normal 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
37
2019-2020/TD3/td3-exo2.html
Normal 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>
|
Reference in New Issue
Block a user