var img1;
var img2;
var imgWidth = 960;
var imgHeight = 540;
var car_sprite;
var x_car, y_car;
var speed = 5;
var speedroad = 1;
var roadX1 = 0;
var roadX2 = imgWidth;
var upKeyPressed = false;
var downKeyPressed = false;
var rightKeyPressed = false;
var leftKeyPressed = false;
var mph = 0;
var score = 0;
var acceleration = 1;
var maxSpeed = 200;
var maxAcceleration = 10;
Pour faire un variable en p5 il faut utiliser "var" puis nomer la variable et mettre un ";" toutes ces variables sont utilisées dans tout le programme, uniquement dans des fonctions. Une variable peux être simplement nommée ou avoir une valeur comme un chiffre ou True ou False.
Pre-load
function preload() {
img1 = loadImage("Background_route.png");
img2 = loadImage("Background_route1.png");
car_sprite = loadImage('car_sprite.png');
}
Cette fonction vas nous permettre de charger les images avant que le programme continue de se lancer, cela nous permet d'afficher des images à un moment préscis sans avoir à attendre qu'elle se charge.
Setup
function setup() {
createCanvas(imgWidth, imgHeight);
x_car = 200;
y_car = 200;
}
La fonction Setup sert simplement à créer le Canvas, une sorte de rectangle qui sera notre zone de travail, qui ici sert pour le fond, on peux régler les dimensions du canevas mais un peux aussi placer des éléments dessus comme dans notre projet, la position de la voiture du joueur.
Draw
function draw() {
background(255, 0, 200);
image(img1, roadX1, 0);
image(img2, roadX2, 0);
if (mph > 10) {
speedroad = 2;
}
if (mph > 30) {
speedroad = 4;
}
if (mph > 70) {
speedroad = 6;
}
if (mph > 140) {
speedroad = 8;
}
if (mph > 199) {
speedroad = 10;
}
roadX1 -= speedroad;
roadX2 -= speedroad;
if (roadX1 < -imgWidth) {
oadX1 = imgWidth - speedroad;
}
if (roadX2 < -imgWidth) {
roadX2 = imgWidth - speedroad;
}
image(car_sprite, x_car, y_car, 70, 54);
if (upKeyPressed) {
y_car -= speed;
}
if (downKeyPressed) {
y_car += speed;
}
if (rightKeyPressed) {
x_car += speed;
}
if (leftKeyPressed) {
x_car -= speed;
}
if (x_car < 0) {
x_car = 0;
}
if (x_car + 70 > imgWidth) {
x_car = imgWidth - 70;
}
if (y_car < 0) {
y_car = 0;
}
if (y_car + 54 > imgHeight) {
y_car = imgHeight - 54;
}
}
Attention c'est surêment la fonction la plus grosse du projet, elle tourne en continue et sert à énomément de choses ! Premièrement elle vas servir à animer la route, grâce à des variables elle va la délpacer à une certaine vitesse pour donne l'effet qu'elle bouge, ensuite elle vas également nous aider à placer d'autres éléments comme la voiture (et prochainement les voitures ennemies), cette fonction est très intéréssente dans ce cadre car on doit constament vérifer si la voiture doit bouger, si unélément touche un bord ou même si il doit intérragir avec d'autres éléments.
KeyPressed
function keyPressed() {
if (keyCode === UP_ARROW || key === 'z' || key === 'Z') {
upKeyPressed = true;
console.log("Touche pressée : " + key);
}
if (keyCode === DOWN_ARROW || key === 's' || key === 'S') {
downKeyPressed = true;
console.log("Touche pressée : " + key);
}
if (keyCode === RIGHT_ARROW || key === 'd' || key === 'D') {
rightKeyPressed = true;
console.log("Touche relâchée : " + key);
}
if (keyCode === LEFT_ARROW || key === 'q' || key === 'Q') {
leftKeyPressed = true;
console.log("Touche relâchée : " + key);
}
}
Superbe fonction qui est la première paartie des contrôles, ici on va d'abord voir si une touche est préssée pour modifier une variable qui va influancer une autre fonction...
KeyReleased
function keyReleased() {
if (keyCode === UP_ARROW || key === 'z' || key === 'Z') {
upKeyPressed = false;
console.log("Touche relâchée : " + key);
}
if (keyCode === DOWN_ARROW || key === 's' || key === 'S') {
downKeyPressed = false;
console.log("Touche relâchée : " + key);
}
if (keyCode === RIGHT_ARROW || key === 'd' || key === 'D') {
rightKeyPressed = false;
console.log("Touche relâchée : " + key);
}
if (keyCode === LEFT_ARROW || key === 'q' || key === 'Q') {
leftKeyPressed = false;
console.log("Touche relâchée : " + key);
}
}
Dexuième partie pour les contrôles de la voiture, on regarde si une touche est relâchée et si c'est bien le cas on va remettre la variable dans son état initial : false.
Sleep
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
Toute petite, cette fonction active une fonction en Java : setTimeout.
IncreaseSpeed
async function increaseSpeed() {
while (mph < maxSpeed) {
mph += acceleration;
await sleep(500);
if (acceleration < maxAcceleration) {
acceleration += 0.1;
}
console.log("Vitesse: " + mph + " mph");
}
console.log("Vitesse maximale atteinte.");
}
C'est grâce à cette fonction qu'on va réussir à avoir une accélération avec une limitation, la variable MPH (Miles Per Hour) va jouer un rôle extrèmement important pour le code mais va aussi être l'une des seules fonction visibles par le joueur.
IncreaseScore
async function increaseScore() {
while (true) {
if (mph > 199) {
score += 50;
} else if (mph > 140) {
score += 30;
} else if (mph > 70) {
score += 10;
} else if (mph > 30) {
score += 5;
} else if (mph > 10) {
score += 1;
}
console.log("Score: " + score);
await sleep(500);
}
}
increaseSpeed();
increaseScore();
Même fonctionnement que pour les MPH, le socre joue par contre un rôle moins important sur le programme, comme on peux le voir cette fonction dépends même des MPH, elle sert uniquement à afficher le score pour flex devant les autres joueurs. (Et les dernières lignes sont juste des appels aux fonctions).