ator.js
//Código do Ator
//Variáveis do Ator
let xAtor = 85;
let yAtor = 366;
let colisao = false;
let meusPontos = 0;
//Função para mostrar o ator na tela
function mostraAtor(){
image(imagemDoAtor, xAtor, yAtor, 30, 30);
}
//Função para movimentar o ator na tela
function movimentaAtor(){
if (keyIsDown(UP_ARROW)){
yAtor -= 3;
}
if (keyIsDown(DOWN_ARROW)){
if(podeSeMover()){
yAtor += 3;
}
}
}
//Função para verificar se houve colisão
function verificaColisao(){
//collideRectCircle(x1, y1, width1, height1, cx, cy, diameter)
for (let i = 0; i < imagemCarros.length; i++){
colisao = collideRectCircle(xCarros[i], yCarros[i], comprimentoCarro, alturaCarro, xAtor, yAtor, 15)
if (colisao){
voltaAtorParaPosicaoInicial();
somDaColisao.play();
if (podeSeMover()){
meusPontos -=1;
}
}
}
}
//Função para retornar o ator ao inicio
function voltaAtorParaPosicaoInicial(){
yAtor = 366;
}
//Função para incluir marcação de pontos
function incluiPontos(){
textAlign(CENTER);
textSize(25);
fill(color(255, 240, 60));
text(meusPontos, width / 5, 27);
}
//Função para marcar os pontos
function marcaPonto(){
if (yAtor < 15){
meusPontos += 1;
voltaAtorParaPosicaoInicial();
somDoPonto.play();
}
}
//Função que vai verificar e limitar os pontos em zero
function pontosMaiorQueZero(){
return meusPontos > 0;
}
//Função para não pover o ator para baixo
function podeSeMover(){
return yAtor < 366;
}
carros.js
//Código do Carro
//Lista de valores
let xCarros = [600, 600, 600, 600, 600, 600];
let yCarros = [40, 96, 150, 210, 270, 318];
let velocidadeCarros = [2, 2.5, 3.2, 5, 3.3, 2.3];
let comprimentoCarro = 50;
let alturaCarro = 40;
//Função para mostrar o carro na tela
function mostraCarro(){
for (let i = 0; i < imagemCarros.length; i++){
image(imagemCarros[i], xCarros[i], yCarros[i], comprimentoCarro, alturaCarro);
}
}
//Função para movimenta o carro na tela
function movimentaCarro(){
for(let i = 0; i < imagemCarros.length; i++){
xCarros[i] -= velocidadeCarros[i];
}
}
//Função para o carro voltar a posição inicial
function voltaPosicaoInicialCarro(){
for(let i = 0; i < imagemCarros.length; i++){
if(passouTodaATela(xCarros[i])){
xCarros[i] = 600;
}
}
}
//Função para retornar o valor quando o carro passar toda a tela
function passouTodaATela(xCarro){
return xCarro < - 50;
}
imagens.js
//Imagens e Sons do Jogo
//Variáveis das Imagens
let imagemDaEstrada;
let imagemDoAtor;
let imagemCarro;
let imagemCarro2;
let imagemCarro3;
let somDaTrilha;
let somDaColisao;
let somDoPonto;
//Função de pré loading das imagens e dos sons
function preload(){
imagemDaEstrada = loadImage("imagens/estrada.png");
imagemDoAtor = loadImage("imagens/ator-1.png");
imagemCarro1 = loadImage("imagens/carro-1.png");
imagemCarro2 = loadImage("imagens/carro-2.png");
imagemCarro3 = loadImage("imagens/carro-3.png");
imagemCarros = [imagemCarro1, imagemCarro2, imagemCarro3, imagemCarro1, imagemCarro2, imagemCarro3];
somDaTrilha = loadSound("sons/trilha.mp3");
somDaColisao = loadSound("sons/colidiu.mp3");
somDoPonto = loadSound("sons/pontos.wav");
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
<script src="imagens.js"></script>
<script src="ator.js"></script>
<script src="carro.js"></script>
<script src="p5.collide2d.js"></script>
</body>
</html>
sketch.js
function setup() {
createCanvas(500, 400);
somDaTrilha.loop();
}
function draw() {
background(imagemDaEstrada);
mostraAtor();
mostraCarro();
movimentaCarro();
movimentaAtor();
voltaPosicaoInicialCarro();
verificaColisao();
incluiPontos();
marcaPonto();
}