Entonces, solo estoy haciendo un juego solo de lienzo de javascript. Conozco motores de juegos como Godot, pero es más como un desafío para mí, por eso elijo javascript. Lo primero que hice fue codificar a los enemigos.
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var x = 0; var y = 0; var x_add = 2; var y_add = 2; animate(); function animate(){ draw(); setTimeout(animate, 10); }; function draw(){ ctx.clearRect(0,0,1500, 500); //draw_enemy(0, 0, "green", 30, 30); draw_enemy(900, 100, "red", 40, 50); }; function draw_enemy(start_x, start_y, fill, w, h){ if(x + w + start_x == 1000){ x_add = -2; } if(y + h + start_y == 500){ y_add = -2; } if(y + start_y == 0){ y_add = 2; } if(x + start_x == 0){ x_add = 2; } x += x_add; y += y_add; ctx.fillStyle = fill; ctx.fillRect(x + start_x, y + start_y, w, h); }; <!DOCTYPE html> <html> <head> <title>local storage test</title> <style> </style> </head> <body> <div style="text-align: center"> <canvas id="canvas" width="1000" height="500" style="border: 1px solid black; padding: 5 px"> </canvas> </div> <script src="script.js"> </script> </body> </html>Así que hice una función para crear enemigos. Si tengo un enemigo engendrado, todo funciona bien. Pero si incluyo 2 o más enemigos, todos se mueven igual y su movimiento es aleatorio. Creo que sé cuál es el problema en mi código, pero no sé cómo solucionarlo. Creo que el problema es que si el enemigo 1 toca el borde, x_add cambia. Pero si luego se ejecuta la función para el enemigo 2, no toca el borde, pero aún así, la variable x_add es la misma que la variable del enemigo 1. Entonces, ¿cómo puedo hacer variables para cada enemigo, tal vez con una matriz de enemigos? ¿O debería hacer otra declaración, si el enemigo no toca la frontera? Pero entonces, ¿cómo sé en qué dirección iba el enemigo antes? ¿Puede smb explicar cómo puedo solucionarlo? gracias
Usar una class para esto es la mejor opción. Una class le permite crear múltiples instancias del mismo objeto mientras permite que cada instancia se controle individualmente.
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); let enemies = []; class Enemy { constructor(c) { this.x = 50 + Math.random() * canvas.width; this.y = 50 + Math.random() * canvas.height; this.w = 40; this.h = 50; this.c = c; this.vx = 2; this.vy = 2; } draw() { ctx.fillStyle = this.c; ctx.fillRect(this.x, this.y, this.w, this.h); } update() { if (this.x + this.w >= canvas.width) { this.vx = -2; } if (this.y + this.h >= canvas.height) { this.vy = -2; } if (this.y <= 0) { this.vy = 2; } if (this.x <= 0) { this.vx = 2; } this.x += this.vx; this.y += this.vy; this.draw() } } function createEnemies() { for (let i=0; i < 5; i++) { enemies.push(new Enemy('red')) } } createEnemies() enemies.push(new Enemy('green')) enemies.push(new Enemy('blue')) /* There may be times where you want to pass in specific values for the properties for each individual enemy. ie color, x, y, health, defense, etc */ function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); enemies.forEach(e => e.update()) } /* forEach is the same as saying... for (let i = 0; i < enemies.length; i++) { enemies[i].update() } ...but shorter and cleaner */ function animate() { draw(); setTimeout(animate, 10); } animate() //suggest using requestAnimationFrame() instead of setTimeout <canvas id="canvas" width="1000" height="500" style="border: 1px solid black; padding: 5 px"> </canvas>Un par de cosas a tener en cuenta. Para este ejemplo, querrá empujar todos sus objetos a una matriz y dibujarlos/actualizarlos en un bucle en la función de animación. También puede optar por pasar cualquiera de los valores de propiedad, es decir, desea que ciertos enemigos tengan un color específico. O tal vez desee que cada enemigo comience en una ubicación específica y luego pase el valor x e y al constructor.
También recomiendo usar canvas.width y canvas.height sobre el tamaño numérico real.