Projet d'utilisation de la carte Microbit
J'ai décidé pour ce cours d'utiliser la carte Microbit car, ayant peu de connaissances mais un très grand attrait pour la programmation, j'ai vu ce cours comme une occasion de m'y pencher plus en détails.
Avant ce cours, je possédais quelques bases en HTML et en CSS. La programmation par blocs de Microbit m'a rappelé celle de Scratch, sur lequel j'ai déjà expérimenté auparavant. J'étais donc à mon aise pour prendre en main la carte.
Après quelques expérimentations très basiques (afficher un motif, le faire clignoter, l'effacer), j'ai décidé de m'atteler à un projet plus ambitieux. Sans but précis, j'avais en tête de créer une interface interactive en me servant des fonctionnalités de la carte nue. Mes premières expérimentations m'amenèrent au jeu vidéo. Inspiré par les jeux des premiers ordinateurs grand public comme l'Atari ST, je vis les limitations de la carte non comme une contrainte mais comme un défi, dans la démarche des premiers game designers devant composer avec des outils de très faible puissance. J'avais à ma disposition 25 pixels, 3 touches et quelques capteurs sensoriels.
La première étape fut de programmer un curseur. J'utilisai une variable appelée Joueur, générée au centre de l'écran lors de la mise en route :
let Joueur: game.LedSprite = null
Joueur = game.createSprite(2, 2)
Il me fallait maintenant lui permettre de se déplacer. Je pensai logiquement à A pour aller à gauche et B pour aller à droite :
input.onButtonPressed(Button.A, function () {
Joueur.move(-1)
}
input.onButtonPressed(Button.B, function () {
Joueur.move(1)
}
Je fus alors confronté à un problème : Le joueur était bloqué sur une ligne, ne pouvant aller sur les autres. Je dus rajouter à mon code quelques lignes pour régler ce problème :
input.onButtonPressed(Button.A, function () {
if (Joueur.get(LedSpriteProperty.X) == 0) {
Joueur.change(LedSpriteProperty.X, 4)
Joueur.change(LedSpriteProperty.Y, -1)
} else { Joueur.move(-1)
}
}
input.onButtonPressed(Button.B, function () {
if (Joueur.get(LedSpriteProperty.X) == 4) {
Joueur.change(LedSpriteProperty.X, -4)
Joueur.change(LedSpriteProperty.Y, 1)
} else { Joueur.move(1)
}
}
Cette solution n'était pas suffisante car, même si le joueur, arrivé en bout de ligne, passait bien à la suivante ou la précédente, une fois arrivé aux coordonnées (0;0) ou (4;4), il était impossible de passer de l'une à l'autre sans devoir remonter tout l'écran, rendant l'utilisation du programme laborieuse. Je rajoutai alors un peu de code :
input.onButtonPressed(Button.A, function () {
if (Joueur.get(LedSpriteProperty.Y) == 0 && Joueur.get(LedSpriteProperty.X) == 0) {
Joueur.change(LedSpriteProperty.X, 4)
Joueur.change(LedSpriteProperty.Y, 4)
} else if (Joueur.get(LedSpriteProperty.X) == 0) {
Joueur.change(LedSpriteProperty.X, 4)
Joueur.change(LedSpriteProperty.Y, -1)
} else {
Joueur.move(-1)
}
})
input.onButtonPressed(Button.B, function () {
if (Joueur.get(LedSpriteProperty.Y) == 4 && Joueur.get(LedSpriteProperty.X) == 4) {
Joueur.change(LedSpriteProperty.X, -4)
Joueur.change(LedSpriteProperty.Y, -4)
} else if (Joueur.get(LedSpriteProperty.X) == 4) {
Joueur.change(LedSpriteProperty.X, -4)
Joueur.change(LedSpriteProperty.Y, 1)
} else {
Joueur.move(1)
}
})
Maintenant, le déplacement du joueur était totalement fonctionnel. Je n'avais toujours pas trouvé d'utilité à ce code. J'eus alors une idée : plutôt que de chercher à créer un jeu, pourquoi ne pas programmer un outil créatif ? J'eus alors l'idée d'un programme de dessin, où le joueur, se déplaçant sur l'écran, pourrait dessiner par pixels.
Pour mettre cela en place, il me fallait créer une autre variable, appelée Tir :
let Tir: game.LedSprite = null
Puis il me fallut créer une fonction permettant de générer un pixel sur l'emplacement du joueur à chaque fois qu'il appuyait sur A + B :
input.onButtonPressed(Button.AB, function () {
Tir = game.createSprite(Joueur.get(LedSpriteProperty.X) + 0, Joueur.get(LedSpriteProperty.Y) + 0)
})
Il était maintenant possible de dessiner et se déplacer sur l'écran. Je rajoutai une dernière fonction, permettant d'effacer l'écran en le secouant :
input.onGesture(Gesture.Shake, function () {
control.reset()
Et le programme était fini ! Voici l'intégralité du code :
let Tir: game.LedSprite = null
let Joueur: game.LedSprite = null
input.onButtonPressed(Button.A, function () {
if (Joueur.get(LedSpriteProperty.Y) == 0 && Joueur.get(LedSpriteProperty.X) == 0) {
Joueur.change(LedSpriteProperty.X, 4)
Joueur.change(LedSpriteProperty.Y, 4)
} else if (Joueur.get(LedSpriteProperty.X) == 0) {
Joueur.change(LedSpriteProperty.X, 4)
Joueur.change(LedSpriteProperty.Y, -1)
} else {
Joueur.move(-1)
}
})
input.onButtonPressed(Button.B, function () {
if (Joueur.get(LedSpriteProperty.Y) == 4 && Joueur.get(LedSpriteProperty.X) == 4) {
Joueur.change(LedSpriteProperty.X, -4)
Joueur.change(LedSpriteProperty.Y, -4)
} else if (Joueur.get(LedSpriteProperty.X) == 4) {
Joueur.change(LedSpriteProperty.X, -4)
Joueur.change(LedSpriteProperty.Y, 1)
} else {
Joueur.move(1)
}
})
input.onButtonPressed(Button.AB, function () {
Tir = game.createSprite(Joueur.get(LedSpriteProperty.X) + 0, Joueur.get(LedSpriteProperty.Y) + 0)
})
input.onGesture(Gesture.Shake, function () {
control.reset()
})
Joueur = game.createSprite(2, 2)