Olá Pessoal!
Eu escrevi o código em inglês, dividido em arquivos, como de costume, para praticar. Além disso, resolvi acrescentar algumas coisas:
- movimentos do ator (cow) para esquerda e direita.
- mais carros, incluindo mais de um em algumas lanes.
Como realmente estou no início, não sei como simplificar o código e imagino que esse será o foco nas próximas aulas. Então o código no arquivo car.js ficou grande rsrs. Segue o link do jogo: https://editor.p5js.org/raphamass/sketches/wS4G0cBSp
car.js
/* Lane info:
- Lane 1 - cars 1 and 7
- Lane 2 - car 2
- Lane 3 - car 3
- Lane 4 - cars 4 and 8
- Lane 5 - car 5
- Lane 6 - cars 6 and 9 */
// car 1
let xCar1 = 600;
let yCar1 = 40;
let carSpeed1 = 2
// car 2
let xCar2 = 600;
let yCar2 = 96;
let carSpeed2 = 2.5
// car 3
let xCar3 = 600;
let yCar3 = 150;
let carSpeed3 = 3.2
// car 4
let xCar4 = 600;
let yCar4 = 210;
let carSpeed4 = 3.8
// car 5
let xCar5 = 600;
let yCar5 = 260;
let carSpeed5 = 4.2
// car 6
let xCar6 = 600;
let yCar6 = 310;
let carSpeed6 = 2.9
// car 7
let xCar7 = 1000;
let yCar7 = 40;
let carSpeed7 = 2
// car 8
let xCar8 = 975;
let yCar8 = 210;
let carSpeed8 = 3.8
// car 9
let xCar9 = 1000;
let yCar9 = 310;
let carSpeed9 = 2.9
function showCar(){
image(imageCar1, xCar1, yCar1, 50, 40);
image(imageCar2, xCar2, yCar2, 50, 40);
image(imageCar3, xCar3, yCar3, 50, 40);
image(imageCar4, xCar4, yCar4, 50, 40);
image(imageCar5, xCar5, yCar5, 50, 40);
image(imageCar6, xCar6, yCar6, 50, 40);
image(imageCar7, xCar7, yCar7, 50, 40);
image(imageCar8, xCar8, yCar8, 50, 40);
image(imageCar9, xCar9, yCar9, 50, 40);
}
function carMotion(){
//xCar = xCar - 2;
xCar1 -= carSpeed1; //simplified form of the above expression
xCar2 -= carSpeed2;
xCar3 -= carSpeed3;
xCar4 -= carSpeed4;
xCar5 -= carSpeed5;
xCar6 -= carSpeed6;
xCar7 -= carSpeed7;
xCar8 -= carSpeed8;
xCar9 -= carSpeed9;
}
function carRestartPoint(){
if (xCar1 < -50){
xCar1 = 600;
}
if (xCar2 < -50){
xCar2 = 600;
}
if (xCar3 < -50){
xCar3 = 600;
}
if (xCar4 < -50){
xCar4 = 600;
}
if (xCar5 < -50){
xCar5 = 600;
}
if (xCar6 < -50){
xCar6 = 600;
}
if (xCar7 < -50){
xCar7 = 600;
}
if (xCar8 < -50){
xCar8 = 600;
}
if (xCar9 < -50){
xCar9 = 600;
}
}cow.js
// cow variables
let xCow = 100;
let yCow = 366;
function showCow(){
image(imageCow, xCow, yCow, 30, 30); // (image, x, y, L, A)
}
function cowMotion(){
if (keyIsDown(UP_ARROW)){
yCow -= 3;
}
if (keyIsDown(DOWN_ARROW)){
yCow += 3;
}
if (keyIsDown(LEFT_ARROW)){
xCow -= 3;
}
if (keyIsDown(RIGHT_ARROW)){
xCow += 3;
}
}image.js
// game images
let imageRoad;
let imageCow;
let imageCar1;
let imageCar2;
let imageCar3;
let imageCar4;
let imageCar5;
let imageCar6;
let imageCar7;
let imageCar8;
let imageCar9;
function preload(){
imageRoad = loadImage("image/estrada.png");
imageCow = loadImage("image/ator-1.png");
imageCar1 = loadImage("image/carro-1.png");
imageCar2 = loadImage("image/carro-2.png");
imageCar3 = loadImage("image/carro-3.png");
imageCar4 = loadImage("image/carro-2.png");
imageCar5 = loadImage("image/carro-3.png");
imageCar6 = loadImage("image/carro-1.png");
imageCar7 = loadImage("image/carro-3.png");
imageCar8 = loadImage("image/carro-1.png");
imageCar9 = loadImage("image/carro-3.png");
}sketch.js
function setup() {
createCanvas(500, 400);
}
function draw() {
background(imageRoad);
showCow();
showCar();
carMotion();
cowMotion();
carRestartPoint();
}
index.html
</head>
<body>
<script src="sketch.js"></script>
<script src="image.js"></script>
<script src="car.js"></script>
<script src="cow.js"></script>
</body>
</html>