Para la escuela, necesito hacer un juego, así que tuve la idea de hacer un juego similar a "toque mágico: asistente de alquiler", que es un juego donde los globos caen del cielo, y debes hacer dibujos para Explótalos, esa es la idea que busco.
Pero ahora, mi problema: tenía la idea de hacer que los globos aparecieran aleatoriamente a través del eje x (para que siempre se generaran en y=0 y el eje x fuera aleatorio), pero ahí es donde está mi problema. Hice funciones de árbol para ello: Esta es la función que crea el número aleatorio:
function aleatorizar() { let random= Math.floor(Math.random()*canvas.width); return random; }Esta es la función que dibuja los globos con texto en ellos:
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() }Y esta es la función que anima los globos cayendo:
function animar(y){ ctx.clearRect(0,0,canvas.width,canvas.height); posição=posição+1; desenharbombas(y) requestAnimationFrame(animar); }En mi lógica (y a través de horas de prueba), no puedo poner la función aleatoria dentro de mi función de dibujo de bombas, porque hará que la función aleatoria cambie cada vez que se llame a la función de dibujo, por lo que las bombas fallarán de izquierda a derecha. en la pantalla.
Así que creé esta lógica, en la que la función de dibujo de la bomba solo recibiría un número aleatorio, cuando se llamara a la función de animación, pero no funcionó, porque ahora la bomba cae en diagonal. Sé que es muy difícil de entender, pero si alguien sabe cómo ayudar o quiere subirse a Discord para ayudarme... (caue#7600)
Qué tal algo como esto:
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> Puedes ver que tenemos una class bomba y en el constructor pasamos todos los parámetros iniciales necesarios para dibujar lo que necesitamos, luego en la función draw() aumentamos el valor de x por la velocidad dada, y dibujamos el arco y el texto.
Con esta nueva clase puedes agregar más parámetros aleatorios, ahora mismo es solo la Y la que es aleatoria pero de la misma manera puedes hacerlo para la velocidad y también para el radio
Y si realmente quieres crear un juego, debes buscar motores de juegos, hay muchos buenos de código abierto, github tiene una buena colección de conocidos:
https://github.com/collections/javascript-game-engines
A medida que su juego se vuelva más complejo, se encontrará con problemas que ya están resueltos en un motor de juego, solo depende de qué tan lejos quiera llegar con este juego.