Vous êtes sur la page 1sur 7

Classes 

: 3ème Info Matière : STI Séries JavaScript 1,2,3,4,5,6 et 7

Série 1
Abdellatif M.
JavaScri
pt
Exercice 00 : [Actions & DOM | Jeu « memory »

On veut implémenter un jeu de « memory ». Au début du jeu les cartes sont faces cachées, l'interface doit
permettre d'en retourner deux. Si les deux cartes sont identiques elles restent visibles, sinon elles disparaissent
après un court laps de temps. Le jeu se termine quand toutes les paires ont été découvertes.

1. Récupérer huit images de même taille et coder en HTML/CSS la disposition des seize cartes.
2. Programmer en JavaScript le mélange des cartes, par exemple en répétant une centaine de fois le
processus suivant : tirer deux cartes au hasard et les échanger.
Ce mélange doit avoir lieu au chargement de la page.

Page - 1 - Mr Abdellatif Mohamed v5-05.03.2021 Lycée Ali Belhouane - Nabeul | 3ème STI 2020-2021
Classes : 3ème Info Matière : STI Séries JavaScript 1,2,3,4,5,6 et 7
3. Utiliser la CSS pour rendre les cartes invisibles.
Programmer en JavaScript le retournement d'une carte quand on clique sur elle.
(optionnel) Produire un joli effet visuel quand la carte apparaît.
4. Permettre de cliquer sur deux cartes cachées. Tester si les deux images dévoilées sont les mêmes. Si

Abdellatif M.
les images sont différentes, les faire disparaître après une seconde d'affichage.
5. Interdire le clic sur une image déjà apparente. Interdire le clic sur une troisième carte pendant que les
deux cartes cliquées sont apparentes.
6. Compter le nombre de paires découvertes, compter les nombre de clics utilisés.
Compléter en produisant des messages en cours de partie (découverte d'une paire, nombre de clics
utilisés, message de victoire, etc.).
7. Ajouter deux boutons : l'un qui permet de commencer une nouvelle partie, l'autre qui donne la solution
8.
en découvrant toutes les cartes.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Memory</title>
<style>
div.jeu {
height: 520px;
width: 520px;
margin: 2em auto 2em auto;
}
div.case {
height: 100px;
width: 100px;
border: 1px solid black;
float: left;
margin: 10px;
background-color: #9999FF;
}
img {
height: 100px;
width: 100px;
visibility: hidden;
}
hr {
clear: both;
visibility: hidden;
}
</style>
<script>
var precedente = -1;
var attente = 0;
var img;
var imgp;

function cachephotos () {
img.style.visibility = 'hidden';
imgp.style.visibility = 'hidden';
attente = 0;
}

function clic (n) {


if (attente != 1) {
img = document.getElementById('img'+n);
img.style.visibility = 'visible';
if (precedente<0) {
precedente = n;
} else {
imgp = document.getElementById('img'+precedente);
if (imgp.src==img.src) {
} else {
attente = 1;

Page - 2 - Mr Abdellatif Mohamed v5-05.03.2021 Lycée Ali Belhouane - Nabeul | 3ème STI 2020-2021
Classes : 3ème Info Matière : STI Séries JavaScript 1,2,3,4,5,6 et 7
setTimeout('cachephotos();',800);
}
precedente = -1;
}
}

Abdellatif M.
}

function initgame () {
for (var i=1 ; i<=200 ; i++) {
var n1 = Math.ceil(16*Math.random());
var n2 = Math.ceil(16*Math.random());
var img1 = document.getElementById('img'+n1);
var img2 = document.getElementById('img'+n2);
var src1 = img1.src;
var src2 = img2.src;
img1.src = src2;
img2.src = src1;
}
}
</script>
</head>
<body onload="initgame();">
<h1>Jeu de memory</h1>
<div class="jeu">
<div class="case" onclick="clic(1);"><img id="img1" src="images/chat.jpg"
/></div>
<div class="case" onclick="clic(2);"><img id="img2" src="images/chat.jpg"
/></div>
<div class="case" onclick="clic(3);"><img id="img3" src="images/chien.jpg"
/></div>
<div class="case" onclick="clic(4);"><img id="img4" src="images/chien.jpg"
/></div>
<hr />
<div class="case" onclick="clic(5);"><img id="img5"
src="images/grenouille.jpg" /></div>
<div class="case" onclick="clic(6);"><img id="img6"
src="images/grenouille.jpg" /></div>
<div class="case" onclick="clic(7);"><img id="img7"
src="images/autruche.jpg" /></div>
<div class="case" onclick="clic(8);"><img id="img8"
src="images/autruche.jpg" /></div>
<hr />
<div class="case" onclick="clic(9);"><img id="img9"
src="images/souris.jpg" /></div>
<div class="case" onclick="clic(10);"><img id="img10"
src="images/souris.jpg" /></div>
<div class="case" onclick="clic(11);"><img id="img11"
src="images/sanglier.jpg" /></div>
<div class="case" onclick="clic(12);"><img id="img12"
src="images/sanglier.jpg" /></div>
<hr />
<div class="case" onclick="clic(13);"><img id="img13"
src="images/cochon.jpg" /></div>
<div class="case" onclick="clic(14);"><img id="img14"
src="images/cochon.jpg" /></div>
<div class="case" onclick="clic(15);"><img id="img15"
src="images/lapin.jpg" /></div>
<div class="case" onclick="clic(16);"><img id="img16"
src="images/lapin.jpg" /></div>
</div>
</body>
</html>

Page - 3 - Mr Abdellatif Mohamed v5-05.03.2021 Lycée Ali Belhouane - Nabeul | 3ème STI 2020-2021
Classes : 3ème Info Matière : STI Séries JavaScript 1,2,3,4,5,6 et 7

Abdellatif M.

Exercice 5
Énoncé
■ Réaliser à l'aide de HTML5, CSS et JavaScript l'équivalent de la page web suivante (5.html):

 Le fichier HTML doit contenir deux balises div et une balise span seulement
 Votre page doive être "responsive"
 La couleur de la page body background-color :#58b1e7 ; ce trouve dans un fichier séparé css est
appelé cssheureDigital.css
 La couleur de l’élément entête est background-color :#000 ;
 La couleur de l'élément horloge est background-color:#000 ;
 Cette page utilise une fonction prédéfinie setInterval() qui s'appelle elle-même toutes les secondes.
Cette fonction commence par retrouver l'élément HTML qui est destiné à afficher l'heure.
 Cette fonction JavaScript se trouve dans un fichier JavaScript séparé appelé jsheureDegital.js.
 La date affichée est accompagnée de pm ou am.
 Colorer les deux points dans l'heure avec une couleur différente.

Page - 4 - Mr Abdellatif Mohamed v5-05.03.2021 Lycée Ali Belhouane - Nabeul | 3ème STI 2020-2021
Classes : 3ème Info Matière : STI Séries JavaScript 1,2,3,4,5,6 et 7

Abdellatif M.
Exercice 13
Énoncé
Ecrire un script en JavaScript pour réaliser un petit jeu “Deviner un nombre”.
Le principe de ce jeu est le suivant :
 l’ordinateur choisit un nombre aléatoire entre 10 et 100.
 Le but est de deviner ce nombre, qui sera saisit dans une zone de texte.
 À chaque fois qu’on propose un nombre, on indique si le nombre à deviner est plus petit ou plus
grand que celui-ci.
 Le nombre d’essai autorisé est de 10, l’utilisateur est averti pour chaque essai concernant le
nombre d’essai restant.
 Quand l’utilisateur gagne, on affiche le nombre de coups qu’il lui a fallu.
 Le schéma suivant représente le résultat souhaité :

Exercice 20 (20.html) Traduction


 Créer un script JavaScript qui permet de changer le texte contenu dans un <div> en fonction de trois
langues
 L’image suivant montre le résultat attendu :

Page - 5 - Mr Abdellatif Mohamed v5-05.03.2021 Lycée Ali Belhouane - Nabeul | 3ème STI 2020-2021
Classes : 3ème Info Matière : STI Séries JavaScript 1,2,3,4,5,6 et 7

Exercice 27 SMS Abdellatif M.


Énoncé
L’objectif de cet exercice est de créer une interface qui ressemble celle d’envoi d’un SMS.
Créer une page HTML5 qui contient :
 Une zone de texte (ou textarea) pour que l’internaute puisse y saisir un texte quelconque.
 Une zone de texte en bas du textarea qui affiche le nombre de caractères restants.
 Ce nombre sera automatiquement calculé à chaque modification du texte par le clavier

Le schéma suivant décrit le résultat qui sera obtenu :

Correction :

Page - 6 - Mr Abdellatif Mohamed v5-05.03.2021 Lycée Ali Belhouane - Nabeul | 3ème STI 2020-2021
Classes : 3ème Info Matière : STI Séries JavaScript 1,2,3,4,5,6 et 7

Abdellatif M.

Page - 7 - Mr Abdellatif Mohamed v5-05.03.2021 Lycée Ali Belhouane - Nabeul | 3ème STI 2020-2021

Vous aimerez peut-être aussi