Étape 1 sur 8

Dessiner la grille

Dessiner une grille de morpion de 3 × 3 cases et écrire dans chaque case son numéro, de 0 à 8.

Notions :toilelignemodarrondi_inferieur

Le résultat final du parcours : Le morpion — Le résultat final du projet

Ce qu'il faut savoir

La toile mesure 300 × 300 pixels : chaque case fait donc 100 × 100. La grille, ce sont quatre lignes : deux verticales (x = 100 et x = 200) et deux horizontales (y = 100 et y = 200).

ligne(plateau, 100, 10, 100, 290, #2D3436, 4)

Le dernier nombre est l'épaisseur du trait. Les lignes s'arrêtent à 10 pixels des bords : c'est plus joli.

Numéroter les cases

Pour le programme, la grille sera un simple tableau de 9 cases, numérotées de 0 à 8, ligne par ligne :

0 | 1 | 2
3 | 4 | 5
6 | 7 | 8

Comment retrouver la colonne et la ligne de la case k ?

la colonne est le reste de la division par 3 : k mod 3 (pour 5 : 5 = 1 × 3 + 2, colonne 2) ;
la ligne est le quotient entier : arrondi_inferieur(k / 3) (pour 5 : 1,67 arrondi à 1).

En multipliant par 100, on obtient la position en pixels de la case. On s'en sert pour écrire chaque numéro dans le coin de sa case avec label.

Code de départ

Ouvrez CoddyRun et partez d'un programme vide : tout commence ici.

Besoin d'aide ?

Indice 1

Les deux lignes horizontales : ligne(plateau, 10, 100, 290, 100, #2D3436, 4) et la même à y = 200.

Indice 2

Le numéro de la case k s'écrit en x = (k mod 3) * 100 + 8 et y = arrondi_inferieur(k / 3) * 100 + 22.

Indice 3

label(plateau, x, y, convertir_texte(k), #B2BEC3, 14) écrit le numéro en gris clair.

Voir la solution complète

Essayez d'abord par vous-même : c'est en cherchant qu'on apprend. La solution sert à vérifier ou à se débloquer.

@ Les déclarations
plateau est une toile

@ La grille
dimension(plateau, 300, 300)
remplir(plateau, #FFFFFF)
ligne(plateau, 100, 10, 100, 290, #2D3436, 4)
ligne(plateau, 200, 10, 200, 290, #2D3436, 4)
ligne(plateau, 10, 100, 290, 100, #2D3436, 4)
ligne(plateau, 10, 200, 290, 200, #2D3436, 4)

@ Les numéros des cases
pour k de 0 à 8
    label(plateau, (k mod 3) * 100 + 8, arrondi_inferieur(k / 3) * 100 + 22, convertir_texte(k), #B2BEC3, 14)
fin pour
affiche plateau