Boa tarde,
Eu estou conseguindo acompanhar através do p5.js, porém também estou tentando via HTML, mas não estou conseguindo. Criei um HTML fazendo a chamada do meu código em JS, mas só aparece o H2 que especifiquei como teste. Saberiam me informar como posso fazer isso, ou o que eu fiz de errado na chamada? Segue abaixo o HTML e o JS.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
</head>
<body>
<header>
<div class="container">
<h2 class="titulo">Joguinho</h2>
</div>
</header>
<main>
<canvas id="canvas" width="600" height="400"></canvas>
</main>
<script src="joguinho.js"></script>
</body>
</html>//Variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2;
//Velocidade da bolinha
let velocidadeBolinhaX = 5;
let velocidadeBolinhaY = 5;
function setup(){
createCanvas(600,400);
}
function draw(){
background(0);
mostraBolinha();
movimentoBolinha();
verificaColisaoBorda();
}
function mostraBolinha(){
circle(xBolinha,yBolinha,diametro);
}
function movimentoBolinha(){
xBolinha += velocidadeBolinhaX;
yBolinha += velocidadeBolinhaY;
}
function verificaColisaoBorda(){
if(xBolinha + raio > width || xBolinha - raio < 0 ){
velocidadeBolinhaX *= -1;
}
if(yBolinha + raio > height || yBolinha - raio < 0){
velocidadeBolinhaY *= -1;
}
}
