For school, I need to make a game, so I had the idea of making a game similar to, "magic touch:wizard for hire", which is a game where balloons fall out of the sky, and you need to make drawings to pop them, that's the idea I'm going for.
But now, my problem: I had the idea of making balloons appearing randomly through the x axis,(so it would always spawn at the y=0 and the x axis be random),but that's where my problem's at. I made tree functions for it: This is the function that creates the random number:
function aleatorizar() {
let random= Math.floor(Math.random()*canvas.width);
return random;
}
This is the function that draws the balloons with text on them:
function desenharbombas(x){
ctx.beginPath();
ctx.arc(x,posição,50,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle= "#000000";
ctx.fill();
function escrever(){
ctx.font="17px Arial Black";
ctx.fillStyle="#ffffff";
ctx.fillText("texto",x,posição );
}
escrever()
}
And this is the function that animates the balloons falling down:
function animar(y){
ctx.clearRect(0,0,canvas.width,canvas.height);
posição=posição+1;
desenharbombas(y)
requestAnimationFrame(animar);
}
In my logic (and trough hours of testing), I cannot put the random function inside my bomb drawing function, because it will make the random function change every time the drawing function is called, so that'd make the bombs glitch left and right on the screen.
So I created this logic, which the bomb drawing function would only receive a random number, when the animate function was called, but it didn't work, because now the bomb is falling diagonally. I know it's really hard to understand, but if anyone knows how to help or wants to hop on discord to help me...(caue#7600)
How about something like this:
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
var bombas = []
class bomba {
constructor(name, x, y, speed, radius) {
this.name = name
this.x = x
this.y = y
this.speed = speed
this.radius = radius
}
draw() {
ctx.beginPath();
ctx.arc(this.x += this.speed, this.y, this.radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillText(this.name, this.x, this.y);
}
}
function aleatorizar() {
return Math.floor(Math.random() * canvas.width);
}
bombas.push(new bomba("A", aleatorizar()/4, 10, 0.20, 8))
bombas.push(new bomba("B", aleatorizar()/4, 40, 0.25, 12))
bombas.push(new bomba("C", aleatorizar()/4, 70, 0.15, 10))
function animar() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
bombas.forEach(b => b.draw())
requestAnimationFrame(animar);
}
animar()<canvas id="c"></canvas>You can see that we have a class bomba and on the constructor we pass all the initial parameters needed to draw what we need, then in the draw() function we increase the value of the x by the given speed, and draw the arc and the text.
With this new class you can add more random parameters, right now it is just the Y that is random but on that same way you can do it for the speed and also the radius
And if you really want to build a game you should look into game engines, there are many good Open Source, github has a nice collection of well known:
https://github.com/collections/javascript-game-engines
As your game gets more complex you are going to run into problems that are already solved in a game engine, it just depends how far do you want to go with this game