Le jeu est très simple, il faut ramasser le plus de pièces possible, et pour se déplacer, il suffit d’appuyer sur les flèches de la calculatrice. Mais attention ! Si il n’y a pas de pièce en dessous de Cubito (le personnage que vous incarnez), vous tombez ! Il est impossible de remonter si on en oublie une. Heureusement, il y a des échelles pour vous aider !
Bon courage et amusez vous bien !!

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Lien court vers ce document : https://nsi.xyz/cubito

On a tous espéré un jour pouvoir jouer sur sa calculatrice !
C’est pourquoi nous vous présentons le jeu « Cubito’s Adventures » !

Recherche d’idées et présentation du projet

Lorsque nos profs nous ont dit qu’il fallait faire un programme en Python qui tourne sur la NumWorks, on a tout de suite pensé à un petit jeu avec la surcouche graphique de la NumWorks, Kandinsky.
On voulait partir sur un jeu, oui, mais lequel ? Après être passés par une reprise du jeu Rogue sorti en 1980, ou par un Space Invaders comme en 1978, nous sommes finalement partis sur une tout autre idée, et Cubito est né !
Nous nous sommes lancés dans ce projet avec empressement.
Il consiste en un jeu sur la NumWorks avec différents niveaux.
Chaque niveau s’articule particulièrement autour de 4 paramètres que vous pouvez voir dans la capture d’écran ci-contre :

• Le personnage principal, Cubito (carré jaune),
• L’arrivée (carré bleu),
• Les pièces (points blancs),
• L’échelle (rectangle blanc)

Pour gérer chaque niveau, des variables sont actualisées à chaque fois dans la barre du bas, il s’agit du score, ainsi que du niveau.
L’objectif du jeu est d’atteindre l’arrivée en ayant le plus gros score. 
Le choix des couleurs devrait certainement vous rappeler le jeu Pac-Man sorti en 1980 et dont nous nous sommes quelque peu inspiré.

Outils à notre disposition et problèmes rencontrés

On avait hâte oui, mais on n’avait pas de moyens pour tester notre programme autrement que de l’envoyer sur la NumWorks à chaque fois, ce qui est très long !!
Deux possibilités s’ouvraient alors à nous :
Nous pouvions utiliser le Workshop NumWorks, le site officiel de NumWorks qui nous permettait de tester notre programme plus simplement et en ligne mais, le site n’était pas très intuitif et nos professeurs nous ont conseillé d’utiliser Omega IDE, pour avancer plus facilement.
On s’est donc servi de l’IDE en ligne Omega IDE, issu de l’OS alternatif pour la calculatrice du même nom. (Un IDE, de l’anglais « integrated development environment  », est un logiciel en ligne ou non qui intègre toutes les fonctionnalités utiles pour pouvoir développer sur un langage et un produit (ici en l’occurrence Python et sur la NumWorks).)
Omega IDE nous permet un aperçu du rendu sur calculatrice ainsi que l’enregistrement automatique de notre code sur GitHub (plateforme de partage de codes et programmes).
Mais tout ne pouvait pas être parfait. En effet, ce site étant en version alpha (pas vraiment sorti) certains bugs pouvaient être présents dont certains particulièrement embêtant auxquels nous avons eu affaire. 
En effet, si l’on testait notre programme une fois puis qu’on le re testait une seconde fois (même 10 min plus tard) les deux programmes se mélangeaient ce qui rendait le test quasi impossible et nous obligeait à rafraîchir à chaque fois la page web. Nous avons donc dû faire avec !

Un programme bien « carré »

Quand nous avons commencé notre programme, nous avons utilisé le code de l’agent 42, pour les déplacements.

Nous avions déjà réalisé un programme qui permettait les déplacements mais nous ne maîtrisions pas tout le savoir nécessaire sur le module Kandinksy au départ pour pouvoir réaliser ces déplacements.
Grâce à l’abandon de cette partie du programme, nous connaissions déjà les bases du module graphique ce qui nous a permis de mieux avancer dans notre travail par la suite.

Ce qui nous a bien aidé, c’est que dès le début, nous avons tout écrit et définit par des fonctions. Des fonctions pour chaque détails du code. Par exemple une fonction pour se déplacer, une pour la fin des niveaux etc…
Notre jeu était alors beaucoup plus facile à mettre en place, par de simples boucles comme vous pouvez ici le voir grâce à un extrait de notre fonction jeu.

def jeu():
    global niveau
    while niveau!=6:
        fill_rect(0,0,320,222,no)
        sleep(2)
        partie()
#[...]

Avec la boucle while qui teste la valeur de la variable niveau, on peut après une incrémentation (un ajout) de 1 à la variable niveau, appeler à chaque fois la fonction partie qui va à son tour appeler les déplacements, et l’initialisation de l’écran pour le niveau en question.

Évidemment, comme une bonne nouvelle n’arrive jamais seule, on a eu une petite complication car il fallait appeler chaque fonction, oui, mais par ordre d’appel très précis sinon cela ne fonctionne pas !

Notre programme a été centré sur la position des différents objets dans chaque niveau et l’interaction de Cubito avec les autres « objets ».

Un de nos plus grands problèmes dès le début était de faire en sorte que Cubito ne puisse pas sortir de l’écran de la calculatrice ! Il fallait définir le point le plus en haut à gauche et le point le plus en bas à droite, dans lequel le personnage pouvait se déplacer. Au bout de quelques heures (et beaucoup d’échecs), il fallait juste définir la « bordure » qui avait déjà été mise en place (pas avec les mêmes valeurs) par notre agent :

bordure = [0,0,190,310] #x min, y min, y max, x max

Le premier 0 est donc l’abscisse minimale de Cubito, 310 l’abscisse maximale, le deuxième 0 l’ordonnée minimale et 190l’ordonnée maximale.

Voyons maintenant un point central du jeu, la génération des pièces.

#[...]
def initiation(): #Génère les pièces
    fill_rect(0,0,320,222,no)
    for j in range(5,222,10):
        for i in range(5,320,10):
            set_pixel(i,j,bl)
#[...]

Cette fonction va donc au fur et à mesure créer une variable j, correspondant à l’ordonnée ainsi qu’une variable i, correspondant à l’abscisse, en partant de 5 à chaque fois. Puis au fur et à mesure, à chaque avancée, elle va allumer un pixel en blanc (le set_pixel). Pour le for j et i in range, le premier nombre correspond à la valeur de départ, 5 pour qu’à chaque déplacement, la pièce soit au centre de Cubito. Le deuxième nombre est la valeur maximale, car l’écran de la calculatrice est en 320 par 222. Enfin la troisième valeur correspond au « pas », c’est à dire l’avancée à chaque fois.

Pour les déplacements, voici un extrait de la fonction move :

#[...]
def move():
     if keydown(0): #gauche
            mvt[0] = max(position[0]-10, bordure[0])
            is_key_pressed = True
#[...]

Dans cette portion de code (pour aller à gauche), on dit à Cubito de se déplacer de -10 sur l’axe des abscisses. Mais comme notre personnage est un bloc de 10×10, alors il se déplace de 10 pixels par 10 pixels ; en fait il se décale d’une case ! Sans oublier qu’il laisse derrière lui une case noire pour effacer sa dernière position. Comme le fond est noir aussi, on a l’impression qu’il a disparu de son ancienne positon. C’est là toute l’illusion des déplacements !!

Un menu pour notre jeu

Nous avons voulu mettre en place un menu pour notre jeu.
Pour ne pas prendre trop de place dans le poids total du jeu, il n’est que partiellement interactif comme vous pouvez le voir dans la capture d’écran ci-dessous.

def menu():
    #[...]
    while not keydown(5):
        if keydown(4) or keydown(17):
            jeu()
#[...]

Pour afficher ce menu, nous avons juste affiché le texte à l’aide de draw_string.
Pour tout ce qui est interaction avec le joueur, c’est à dire commencer la partie, voici un extrait de code de la fonction menu :

Un problème coloré mais heureusement résolu !

Nous avons néanmoins rencontré durant ce projet, un problème épineux.
En effet, nous avions besoin d’utiliser la fonction get_pixel issue de Kandinsky qui permet de vérifier la couleur d’un pixel donné.
Ainsi, dans l’exemple ci-dessous :

Nous avons néanmoins rencontré durant ce projet, un problème épineux.
En effet, nous avions besoin d’utiliser la fonction get_pixel issue de Kandinsky qui permet de vérifier la couleur d’un pixel donné.
Ainsi, dans l’exemple ci-dessous :

Le programme trace un carré de 10 par 10 aux coordonnées (120 ; 120) et de couleur noire, soit (0,0,0) en RGB (rouge, vert, bleu), la méthode utilisée par la NumWorks pour les couleurs.

La ligne de code :

couleur_carre=get_pixel(120,120)

retournait comme valeur de la variable couleur_carre : (0,0,0).

Néanmoins, si on inversait les couleurs et que le cube était blanc sur un fond noir, le get_pixel ne retournait pas la couleur RGB du blanc : (255,255,255) mais une autre valeur incompréhensible pour nous, (248,252,248).
Après avoir demandé de l’aide à notre agent ainsi qu’aux développeurs d’Omega OS, car nous craignions que ce soit une erreur de notre part, nous avons appris que la calculatrice arrondissait le rouge tous les 8, le vert tous les 4 et le bleu tous les 8. Ce qui veut dire que les couleurs RGB rendues par le get_pixel avançaient de 8 en 8 pour le rouge, de 4 en 4 pour le vert et de 8 en 8 pour le bleu. Cette organisation complexe, nous a semblé plus claire grâce au programme fourni par notre professeur et montrant pour chaque couleur, ce qui ressortait au get_pixel.

Une fois ce souci réglé, nous pouvions enfin mettre en place les chutes et l’échelle !

Le fonctionnement des chutes peut paraître contre-intuitif au premier abord même s’il est tout à fait fonctionnel.
En effet, Cubito chute si en dessous de lui, il n’y a pas une pièce (par exemple s’il l’a déjà ramassée). 
Voici une portion de notre fonction vide qui réalise ceci :

def vide():
    global position, mvt, score, niveau
    while get_pixel(position[0]+5,position[1]+15)!=(248,252,248) and position[1]!=190:
        personnage(0)
        position[0]=position[0]
        position[1]+=10
        mvt[1]=position[1]
        score-=1
        personnage(1)
        sleep(1)
#[...]

Pour vérifier si il y a une pièce en dessous, on utilise le get_pixel que nous avons vu précédemment à la différence qu’on connait la valeur qu’il doit retourner : (248,252,248). 
Nous avons choisi d’utiliser une boucle, ce qui permet de vérifier que tant que la case au dessous n’a pas de pièce, le personnage continue de tomber, ce qui est permis par l’opérateur != (lire : « différent de »). La chute peut continuer jusqu’à arriver à la position maximale de Cubito en ordonnée : 190, sans quoi il irait sur les variables se trouvant dans la barre du bas.
On n’a donc plus qu’à ajouter 10 à l’ordonnée du personnage, à effacer son ancienne position et à créer la nouvelle à chaque tour de boucle.
Petite difficulté supplémentaire : les coordonnées de Cubito sont calculées à partir de son point le plus en haut à gauche, et les pièces sont placées de 10 en 10 mais en partant de 5.
Il faut donc pour savoir si une pièce en dessous de Cubito est présente ou non, faire le get_pixel aux coordonnées de l’abscisse de Cubito + 5 et de l’ordonnée de Cubito + 15 !

Ce get_pixel nous a aussi servi pour l’échelle comme vous pouvez le voir dans le code suivant :

#[...]
if get_pixel(position[0]+4,position[1]-39)==(248,252,248):
        personnage(0)
        position[1]-=longueur_scale+10
        position[0]=position[0]
        mvt[1]=position[1]
        personnage(1)
#[...]

En effet, au début nous avons voulu que l’échelle puisse faire monter le joueur de 40 (-40 car le point 0 est en haut), peut importe où nous étions sur l’échelle.
Mais quand l’échelle était trop proche du haut, Cubito sortait des limites du jeu.
Nous avons donc décidé que l’échelle ne pourrait être prise que du bas et ferait monter jusqu’en haut de cette dernière.
Ainsi pour vérifier que Cubito est bien tout en bas de l’échelle, qui a une longueur définie de 40, nous regardons le 39ème pixel au dessus de Cubito pour voir s’il est blanc. Si c’est le cas, le personnage se retrouve en haut de l’échelle.
Mais pourquoi le 39ème pixel et pas le 40ème, si l’échelle fait 40 de longueur ?
Tout simplement pour éviter de confondre avec une pièce, car pièce et échelle ont la même couleur !

Conclusion

Pour conclure, ce projet était ambitieux, c’était pas toujours facile, on a connu quelques tracas. 
Mais avec de la persévérance et l’aide de nos professeurs, nous avons réussi à créer un jeu qui nous satisfait réellement ! Ce challenge fut très enrichissant pour nous ! Le fait de se dire qu’en Première on a créé de toute pièce un jeu vidéo graphique alors qu’en troisième on n’avait jamais entendu parler de Python nous rend très fiers !

Et pour finir il y a pas un truc à se mettre sous la dent ?
Et bien si, un easter egg, et plus précisément un niveau unique est présent dans le jeu !!!
#[…]
Essayez de le trouver !

COMMENT TÉLÉCHARGER CE JEU POUR Y JOUER SUR MA CALCULATRICE ?

Vous trouverez dans le tableau ci-dessous les différents liens, mis à jour en fonction des évolutions du jeu, pour vous permettre de le télécharger !

PS : Si la programmation sur calculatrice vous intéresse ou que vous voulez voir comment ça marche sur NumWorks, n’hésitez pas à lire : « Programmer en python et porter son code sur la NumWorks » qui vous donnera de précieux conseils pour y arriver !
Vous verrez c’est très plaisant de voir son programme avancer au fur et à mesure !!!

Gabin P.

Elève étudiant la spécialité NSI en classe de terminale en 2021.
Certainement en train de trifouiller sur son ordi ou une machine virtuelle