Premier cours CE2

Premiers pas en
programmation
La section 1.1 aborde les différents composants d’un ordinateur et leur fonctionnalités.
1.2) Je sais allumer et éteindre l’équipement informatique ; je
Niveau CE2
sais lancer et quitter un logiciel.
Ces apprentissages seront validés par la manipulation pratique en salle informatique.
Fabrice Derepas
1.3) Je sais déplacer le pointeur, placer le curseur, sélectionner,
Ce cours de programmation a deux objectifs pédagogiques : effacer et valider.
– le premier objectif est de permettre aux enfants de s’approCes apprentissages sont mis en œuvre à plusieurs reprises.
prier des contenus numériques, en étant acteur face à l’or- 1.4) Je sais accéder à un dossier, ouvrir et enregistrer un fichier.
dinateur. Ainsi à chaque cours des aspects graphiques et
Ces notions sont présentées à la page 9. Elles sont validées
logiques sont développés pour créer de petits jeux vidéos. dans l’exercice 2.1.
– le deuxième objectif est de structurer la démarche
créatrice, principalement à travers les exercices. L’ordinateur n’étant pas doué d’intelligence, il faut décomposer
notre pensée en petits bouts qui pourront être programmés
dans la machine.
Le cours est basé sur l’environnement Scratch. Cet environnement est disponible gratuitement. Il a été réalisé par des
chercheurs du Massachusetts Institute of Technology (MIT)
dans le but de faciliter l’apprentissage de la programmation.
Il connait depuis quelques années un vif succès dans le milieu
scolaire. Cet environnement reprend les concepts élaborés dans
le langage Logo au cours des années 70 pour l’apprentissage de
la programmation en école primaire. Ils sont ici remis au goût
du jour avec l’évolution des ordinateurs.
L’environnement Scratch permet également de se familiariser avec les concepts utilisés dans les suites bureautiques :
menus, manipulation de fichiers etc ...
Structure et objectifs du cours :
– Cours 1, le poisson et l’aquarium : faire bouger un poisson grâce à la souris. Objectifs : réaliser un dessin simple,
appréhender le concept d’objet, de test logique, d’interaction avec l’utilisateur.
– Cours 2, le poisson et le requin : faire bouger le petit poisson pour éviter le requin. Objectifs : réaliser un dessin
avec des ombres pour donner une impression de relief,
faire bouger automatiquement des objets, repérer un objet sur une droite, appréhender le concept de variable.
La difficulté des exercices est indiquée avec des étoiles :
– * : l’élève doit avoir assimilé les notions de l’exercice à la
fin du cours.
– ** : l’exercice permet la mise en œuvre des concepts du
cours.
– *** : l’exercice permet d’approfondir certains thèmes.
Les logiciels utilisés dans le cours sont disponibles gratuitement sur internet :
– Scratch http://scratch.mit.edu
– Gimp http://gimp.org
– Inkscape http://inkscape.org
Voici les compétences du Brevet Informatique et Internet
(B2I) qui sont abordées dans ces cours :
1 - S’approprier un environnement informatique de travail
1.1) Je sais désigner et nommer les principaux éléments composant l’équipement informatique que j’utilise et je sais à quoi
ils servent.
Premiers pas en programmation
1/15
2/15
Premiers pas en programmation
Chapitre 1
Le poisson et l’aquarium
cliquez sur l’icone de Scratch pour lancer l’application. Voici
l’icone de scratch :
Exercice 1.1 * Motivation
Question 1 Citer trois usages différents des ordinateurs.
Question 2 À votre avis les ordinateurs sont-ils intelligents ?
Question 3 Comment faire fonctionner quelque chose qui n’a
aucune intelligence ?
Le but de cette première session est de construire à l’aide de
scratch un aquarium et un poisson qui réagira aux mouvements
de notre souris.
Tout d’abord voici l’écran d’accueil quand on lance Scratch :
1.1 Composition d’un ordinateur
Un ordinateur est généralement composé des éléments suivants :
– un écran pour l’affichage des informations,
– un clavier pour saisir des lettres et des symboles,
– une souris pour déplacer un pointeur à l’écran
– enfin l’unité centrale à laquelle sont reliés les
périphériques précédents.
L’unité centrale effectue les calculs et conserve des informations.
affichage des jeux
UNITE
CENTRALE
ECRAN
zone des palettes
LECTEUR
CD ET DVD
zone de travail
liste des objets
La zone de gauche comprend les palettes qui permettent de
donner des instructions à l’ordinateur. Au centre se situe la zone
de travail dans laquelle les instructions vont être assemblées
pour réaliser des programmes qui piloteront l’ordinateur. Enfin
sur la droite on trouve : en haut l’écran de l’ordinateur qui permet de voir le monde sur lequel le programme agit et en bas la
liste des objets. On démarre initialement avec un chat (nommé
Objet1) et un scène toute blanche.
CLAVIER
SOURIS
1.3 L’aquarium
1.2 Lancer scratch
Pour réaliser les jeux nous allons lancer une application
Nous allons tout d’abord supprimer l’objet1 et mettre un
qui permet de les créer. Une fois l’ordinateur allumé, un fond fond qui représente un aquarium. Pour supprimer l’objet 1, il
d’écran apparait avec des petits dessins dessus. cet espace faut cliquer avec le bouton droit de la souris dessus et choisir
se nomme le bureau et les petits dessins des icones. Double l’option supprimer :
3
Sélectionnons finalement un dégradé :
Pour créer un fond d’aquarium cliquons sur sur l’onglet Il suffit alors simplement de cliquer sur le fond blanc pour qu’il
se colorie :
≪ arrière plan ≫ dans la zone de travail :
Nous allons maintenant faire le sable dans le fond de l’aquarium. Choisissons pour cela l’outil pinceau :
Choisissons tout d’abord une couleur bleue pour faire l’eau :
Prenons ensuite une couleur proche du jaune et choissons une
brosse de taille importante :
le bout de la pipette selectionne la couleur
Choisissons ensuite l’outil
ci-dessous :
4/15
≪
Nous pouvons alors tracer un fond d’aquarium en jaune. On
pot de peinture ≫ comme illustré peut également ajouter une petite plante et un petit rocher en
suivant la même technique :
Premiers pas en programmation
Nous pouvons alors dessiner une forme de poisson en utilisant
l’outil ≪ pinceau ≫. Le fond en damier gris et blanc signifie que
l’image est transparente là où le damier apparait.
1.4 Sauvegarder son travail
Il est important d’enregistrer le travail effectué jusqu’à
présent.
Avec la souris cliquer dans le menu ≪ Fichier ≫ et choisir
Nous pouvons enfin remplir le poisson de couleur à l’aide de
l’item ≪ Enregistrer ≫ comme illustré ci-dessous :
l’outil ≪ pot de peinture ≫, comme nous l’avions déjà fait pour
la couleur bleue de l’aquarium :
Une boite de dialogue apparait alors :
L’objet ainsi créé est nommé ≪ Objet1 ≫. Changeons son nom
en ≪ poisson ≫ en cliquant dans l’espace de travail comme indiqué ci-dessous :
Rentrer le nom du projet dans la case à droite de ≪ Nouveau
nom de fichier ≫. On peut choisir un nom comm poisson par
exemple.
Il faut régulièrement pense à sauvegarder son travail pour ne
pas le perdre au cas où l’ordinateur viendrait à s’éteindre.
Nous allons ensuite faire pointer le poisson en direction de la
souris. Pour cela il faut, à partir de la palette ≪ mouvement ≫,
cliquer sur ≪ pointer vers ≫ puis le faire glisser vers l’espace de
travail.
1.5 Le poisson
Nous allons maintenant rajouter le poisson dans l’aquarium. Nous allons faire pour cela un nouvel objet en appuyant
sur l’icône avec une étoile et un pinceau, comme illustré cidessous :
Premiers pas en programmation
5/15
Une fois sur l’espace de travail choisir vers quoi le poisson va On peut alors sauver notre travail dans un projet. Il faut pour
pointer. A ce stade nous ne disposons que d’un choix à savoir cela choisir enregistrer dans le menu fichier comme illustré cile pointeur de souris.
dessous :
Nous allons ensuite demander au poisson de pointer en permanence vers le pointeur de souris. Pour cela sélectionnons la
palette ≪ Contrôle ≫ :
1.6 Dire bonjour
Nous allons maintenant faire dire bonjour au Poisson quand
la souris le touche. Nous allons pour cela nous servir des trois
instructions ci-dessous :
Elles se trouvent respectivement dans les palettes ≪ Contrôle ≫,
Capteur ≫ et ≪ Apparence ≫.
Faisons ensuite glisser dans l’espace de travail un bloc ≪ répéter
L’instruction ≪ si ≫ permet d’exécuter les instructions du
indéfiniment ≫ puis mettre dedans l’instruction précédente,
bloc si la condition dans l’hexagone est vraie. L’instruction
comme illustré ci-dessous :
≪ touché ? ≫ permet de savoir si un objet ou la souris est
touchée. L’instruction ≪ dire Bonjour ! pendant 2 secondes ≫,
permet d’afficher ≪ Bonjour ! ≫ pendant 2 secondes.
Nous obtenons alors les instructions suivantes pour le poisson
:
Il faut alors double cliquer sur la boucle infinie pour la rendre active. Son contour est alors entouré de blanc et le poisson
tourne avec les mouvements de la souris :
≪
1.7 Le son
On peut facilement rajouter des sons. Nous allons rajouter un
son de bulles qui sera joué quand on appuie sur ≪ espace ≫.
Cliquons pour cela sur l’onglet ≪ sons ≫, dans la zone de travail, puis sur le bouton ≪ importer ≫.
Pour arrêter le programme on peut cliquer sur le bouton rouge
situé au dessus de l’écran :
Dans la fenètre qui s’affiche choisir le répertoire ≪ Effects ≫.
6/15
Premiers pas en programmation
Exercice 1.2 * Ajouter une bulle qui monte
Nous avons produit un bruit de bulle quand l’utilisateur appuie sur espace. Le but de cet exercice est de rajouter une bulle
qui apparaisse au niveau du poisson quand l’utilisateur appuie
sur espace puis qui rejoint le haut de l’aquarium.
Choisir alors le fichier nommé
bouton ≪ OK ≫.
≪
Bubbles ≫ et cliquer sur le
Question 1 Créons l’objet bulle comme nous avons fait pour le
poisson. On pourra se servir de l’outil ≪ ellipse ≫ pour tracer la
bulle.
Nous allons maintenant rajouter les instructions pour l’objet
bulle que nous venons de créer.
pour mettre la bulle
Question 2 Utiliser l’instruction
au niveau du poisson quand l’utilisateur appuie sur espace.
Question 3 Utiliser les trois instructions ci-dessous pour orienter la bulle vers le haut et la faire avancer 50 fois de 10 pas :
Dans la palette ≪ Contrôle ≫, choisir l’instruction ≪ quand espace est pressé ≫.
Question 4 Utiliser dans la palette ≪ apparence ≫ les deux instructions ci-dessous pour faire apparaire la bulle quand l’utilisateur appuie sur la barre d’espace et disparaitre une fois que
la bulle est en haut :
Sélectionner la palette des sons.
Exercice 1.3 ** Faire avancer le poisson
Voici le programme que nous avons écrit et qui contrôle le
comportement du poisson :
Question 1 À partir de la palette ≪ mouvements ≫, rajouter l’instruction ≪ avancer de 10 pas ≫ dans le programme pour que le
poisson avance vers la souris.
Question 2 Expliquer pourquoi le poisson a un mouvement de
Voici le programme à réaliser pour entendre un son de bulles tremblement quand il touche la souris. Pour éviter le mouvement de tremblement utiliser les trois blocs ci-dessous pour
quand on appuie sur espace :
arrêter le poisson s’il est trop prêt de la souris :
1.8 Exercices
Premiers pas en programmation
Question 3 Au lieu de faire avancer le poisson de 10 pas
comme suggéré dans la question 1 essayer de le faire avancer
de 5 ou 1 pas. Observez les différences de comportement et
expliquez la cause.
7/15
8/15
Premiers pas en programmation
Chapitre 2
Le requin et le poisson
Le but de ce chapitre est de réaliser un jeu où l’on dirige avec
les flèches du clavier un petit poisson qui doit éviter un requin.
2.1 Nouveau projet
Nous allons tout d’abord partir du projet du cours précédent
pour réutiliser le petit poisson que nous avions dessiné.
Localisons tout d’abord le fichier. Appuyer sur la touche
≪ fenêtre ≫ et simultanément sur la touche ≪ e ≫ (comme explorateur). Il faut aller dans le répertoire ≪ Bureau ≫, puis ≪ Mes
documents ≫ et enfin ≪ Scratch Projects ≫ :
2.2 Le requin
Nous allons dessiner le requin puis le faire bouger de gauche
à droite de manière horizontale sur l’écran. Nous créons tout
d’abord un nouvel objet. Tout comme nous avions fait pour le
poisson nous dessinons tout d’abord le contour du requin avec
l’outil Pinceau :
≪ Mes documents ≫ est un répertoire contenant généralement
des documents créés grâce à des applications. ≪ Scratch
Projects ≫ est un répertoire contenu dans le répertoire ≪ Mes
documents ≫. ≪ Scratch Projects ≫ contient les fichiers projets
créés à l’aide de l’application scratch.
Nous pouvons ensuite le remplir en gris avec l’outil pot de peinOn voit dans l’explorateur le fichier ≪ poisson.sb ≫ qui con- ture :
tient le travail fait à la séance précédente. C’est ce fichier que
l’on peut échanger avec un ami pour lui montrer le travail fait.
Pour cela le fichier pourra être envoyé par courrier électronique
ou bien par une clé USB.
Lançons
maintenant
scratch.
Dans
le
menu
≪ Fichier ≫ choisir ouvrir. Une boite de dialogue apparait. Elle nous place directement dans le répertoire contenant le
fichier ≪ poisson.sb ≫. En sélectionnant le fichier on se retrouve
dans le même état qu’à la séance précédente.
Nous allons ensuite enregistrer ce travail sous un nouveau
nom pour ne pas effacer le travail de la dernière fois. Il faut
Voici une image de boule éclairée par une lumière :
pour cela aller dans ≪ enregistrer sous ≫ dans le menu fichier :
9
Pour donner une impression plus réaliste au requin nous allons
dessiner des ombres, tout comme il y en a sur la boule. Pour
cela grossissons tout d’abord le dessin en cliquant sur la loupe
avec le symbole ≪ + ≫ :
Avec une couleur de gris plus foncé nous pouvons alors
délimiter la zone qui va être ensuite assombrie à l’aide de l’outil
pinceau avec une brosse très fine :
La zone d’ombre est ensuite remplie à l’aide de l’outil ≪ pot de
peinture ≫. En faisant plusieurs zones d’ombre et une zone plus
claire on obtient le résultat suivant :
Nous allons maintenant écrire le programme pour faire
bouger tout seul le requin.
Pour régler la position horizontale du requin il faut fixer une
valeur avec la commande :
.
Déplacez le bloc ≪ mettre x à ≫ depuis la palette dans l’espace de travail et essayer plusieur valeurs pour x : 0, 100, 200,
230 puis double cliquez sur l’instruction pour visualiser son effet. Pour aller dans l’autre sens il faut mettre un signe ≪ - ≫devant les nombres, essayer les valeurs : -100, -200, -230.
On obtient ainsi les positions suivantes pour le requin :
10/15
Premiers pas en programmation
Voici en résumé la taille de l’écran :
180
0
−240
240
−180
Voici la liste des opérations qu’il faut exécuter ainsi que
leur équivalent en Scratch pour faire bouger le requin comme
prévu :
– dès que l’utilisateur appuie sur le drapeau vert il faut
répéter indéfiniement
– avancer un petit peu
– si le bord droit est atteint
il
faut alors revenir immédiatement au bord gauche
et mettre le requin à une hauteur
aléatoire
On obtient alors le programme suivant :
.
Mettre le requin au centre de l’écran puis essayer maintenant
le bloc ≪ mettre y à ≫ avec les valeurs : -170, -100, 0, 100 et
170. On obtient les positions successives pour le requin (toute
affichées sur la même image) :
Essayer le programme en appuyant sur le drapeau vert.
Premiers pas en programmation
11/15
2.3 Le poisson
Voici les instructions auxquelles doit obéir le poisson :
– quand l’utilisateur appuie sur ≪ flèche en haut ≫ alors le
poisson monte
– quand l’utilisateur appuie sur ≪ flèche en bas ≫ alors le
poisson descend,
Cela donne par exemple pour ≪ flèche en haut ≫
Nous allons indiquer à l’ordinateur de ne plus faire pivoter le
poisson, pour qu’il soit toujours face au requin qui arrive. Pour
cela, une fois l’objet poisson sélectionné, cliquer sur l’icône
avec le petit point dans le haut de la zone de travail comme
illustré ci-dessous :
Question 1 Combien de répertoires sont contenus dans ≪ Mes
documents ≫ ?
Question 2 Combien de fichiers sont dans le répertoire
≪ Scratch Projects ≫ ?
Question 3 Que faudrait-il faire pour voir le contenu du
répertoire ≪ unity ≫ ?
Exercice 2.2 * Finir le jeu
Le jeu que nous venons de faire n’est pas tout à fait complet.
Question 1 Rajouter un test dans l’objet requin pour arrêter le
jeu dès que l’objet poisson est touché. On pourra utiliser les
instructions suivantes :
2.4 Le score
Nous souhaitons conserver dans la mémoire de l’ordinateur
le nombre de requins que nous avons évités. Cela constituera le
score.
Pour conserver en mémoire un nombre il faut créer une variable comme illustré ci-dessous. Choisir la palette ≪ Variables ≫,
puis cliquer sur le bouton ≪ Nouvelle variable ≫. Rentrer le nom
de la variable, dans le cas présent ≪ score ≫, puis cliquer sur
≪ OK ≫.
Question 2 Il faut initialiser le score à zéro quand on appuie
sur le drapeau vert, sinon de partie en partie les points s’accumulent. Ecrire les instructions qui attribuent zéro à la variable
score quand on appuie sur le drapeau vert. Testez que les instructions que vous avez écrites fonctionnent correctement.
Question 3 pour rendre le jeu plus compliqué rajouter un requin en dupliquant l’objet (clic droit dans la zone objet puis
choix de ≪ dupliquer ≫).
Exercice 2.3 ** Des vies
Pour ne pas perdre dès que le requin touche le poisson, nous
allons mettre en place un système de ≪ vies ≫ : le poisson dispose de trois coeurs. A chaque fois qu’il touche un requin, le
poisson perd un coeur. Arrivé à zéro coeur, la partie s’achève.
Question 1 Rajouter dans l’objet poisson une nouvelle variable
nommée ≪ vie ≫. Fixer la valeur de ≪ vie ≫ à 3 quand l’utilisateur appuie sur le drapeau vert. Décrémenter de 1 la valeur
de ≪ vie ≫ quand le poisson touche le requin. Arrêter la partie
quand ≪ vie ≫ vaut zéro. Il faut supprimer dans les deux requins
Maintenant dans le script du requin nous allons rajouter l’inle code écrit à la question 1 de l’exercice précédent.
struction :
Question 2 Nous allons matérialiser la valeur de la variable
≪ vie ≫ par la présence de petits coeurs.Décocher la case à côté
de la variable ≪ vie ≫ comme illustré ci-dessous pour que la
variable ne soit pas affichée :
à chaque fois que le requin arrive à droite de l’écran.
2.5 Exercices
Exercice 2.1 * Répertoires
Considérons l’explorateur ouvert comme ci-dessous :
12/15
Créer un nouvel objet coeur avec une forme de coeur :
Premiers pas en programmation
Cliquer droit sur l’objet puis choisir dupliquer. Nous disposons
alors de deux coeurs. Répéter l’opération pour disposer de
trois coeurs. Renommer les objets en coeur1 coeur2 coeur3, les
déplacer à l’aide de la souris directement sur l’écran pour les
mettre en haut à droite :
Question 3 Rajouter maintenant les instructions pour faire en
sorte que :
– l’objet coeur1 ne s’affiche que si la variable ≪ vie ≫ est
supérieure ou égale à 1,
– l’objet coeur2 ne s’affiche que si la variable ≪ vie ≫ est
supérieure ou égale à 2,
– l’objet coeur3 ne s’affiche que si la variable ≪ vie ≫ est
supérieure ou égale à 3.
Exercice 2.4 *** Diversifier le jeu
Question 1 Le poisson fait des bulles depuis l’exercice 1.2.
Faire en sorte que le score augmente de 5 points si une bulle
touche le requin.
Question 2 Rajouter des objets qui ont le même type de mouvement que les requins mais qui permettent d’augmenter le score
ou de gagner des coeurs.
Question 3 Donner aux objets des mouvements variés en
faisant monter et descendre les requins et les objets de la question précédente.
Premiers pas en programmation
13/15
14/15
Premiers pas en programmation
Table des matières
1 Le poisson et l’aquarium
1.1 Composition d’un ordinateur
1.2 Lancer scratch . . . . . . . .
1.3 L’aquarium . . . . . . . . .
1.4 Sauvegarder son travail . . .
1.5 Le poisson . . . . . . . . . .
1.6 Dire bonjour . . . . . . . . .
1.7 Le son . . . . . . . . . . . .
1.8 Exercices . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2 Le requin et le poisson
2.1 Nouveau projet .
2.2 Le requin . . . .
2.3 Le poisson . . . .
2.4 Le score . . . . .
2.5 Exercices . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
9
. 9
. 9
. 12
. 12
. 12
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
15
3
3
3
3
5
5
6
6
7