Gracias por compartirlo. Sólo tuve que modificar las animaciones que le pusiste porque, al menos en mi navegador, no se ejecutaban bien y sólo producian un incómodo parpadeo. El resto funcionó a la primera.
@@tododibujosmvymas8443 Lo que recuerdo es que eliminé las animaciones. Si tienes el código como en el vídeo y eliminas las animaciones tiene que funcionar.
Hola, gracias por visitar el canal. Respecto a tu duda, creo que lo mas fácil seria agregar un boton y enlazarle una función que refresque la pagina y así reinicia el juego :) , saludos
Hola, muchas gracias por visitar el canal. Respecto a tu pregunta , la respuesta seria , que el canvas tiene un tamaño especificado , entonces nada del juego se dibuja fuera de el , por eso no se ve que pasen las balas de la pantalla . Para entender un poco mas , podrías echar un vistazo al código en la parte del objeto llamado Bala que serian las balas en si y dentro de este se decide si es del jugador o enemigo, la función pinta que es lo que dibuja , y las funciones de verifica y disparaEnemigo , que es en donde se disparan los eventos de disparo. Le comento que puede descargar el código de mi repositorio en github , el enlace esta en la descripción Saludos !
Que tal amigo, primero que nada , agradezco su visita al canal. Respecto a lo que usted quiere realizar, la opción más viable sería agregar los botones a la vista , el de flecha derecha , flecha izquierda y el de disparo, posicionarlos abajo del canvas , y darles la función de que cuando se dé click detecte el código de tecla necesario. Saludos !
@@yeffersonquintero3325 Que tal amigo, claro que si, es facil , en la parte del html agrega debajo de la etiqueta canvas 3 botones con el evento onclick pasandole la funcion verifica pero esta vez con 2 parametros que agregaremos a la funcion . <- Fire -> despues en el js modificamos la funcion verifica para recibir los parametros y para que funcione con ellos, agregando una verificacion al principio y otra al fina , deveria quedar algo asi function verifica(boton=false, codigo=0) { if(boton){ teclaPulsada = codigo; tecla[codigo] = true; } if (tecla[teclaDerecha]) x += 5; if (tecla[teclaIzquierda]) x -= 5; //Verifica cañon if (x > canvas.width - 20) x = canvas.width - 20; if (x < 0) x = 0; //Disparo if (tecla[teclaEspacio]) { if (tiempoBala == true && municion !=0 ){ tiempoBala = false; balas_array.push(new Bala(nave.x + 12, nave.y - 3, 5)); (municion >0)?municion = municion - 1 : false; tecla[teclaEspacio] = false; disparaEnemigo(); setTimeout(function(){tiempoBala = true;}, 300); } } if(boton){ setTimeout(() => { tecla[codigo] = false; }, 100); } } y ya por ultimo le da algunos estilos a los botones para que se vean bonitos . Igual le invito a descargar el codigo del repositorio de github , ahi ya se lo agregue . Espero le sea de ayuda , Saludos ! github.com/proyectood/juegoInvasores
Que tal amigo , agradezco tu visita y comentarios. Para agregar sonido cuando disparamos , es agregar el siguiente código let audioDisparo = new Audio("sonidos/disparo.mp3"); audioDisparo.play(); eso en el archivo de js, en la función donde se hace el disparo, después de que verifica las municiones, creo que es por la linea 260 masomenos. También obviamente , se deberá incluir el archivo en la respectiva carpeta de sonidos , que tendrías que crear . Espero te ayude , Saludos !
Que tal amigo, primero que nada, muchas gracias por visitar el canal. Respecto a su duda, la imagen deberá tener las mismas medidas que la que use , 64px ancho x 26px alto , también sería conveniente que fuese png, puede ver qué las medidas se usan en la función de la línea 95, se especifican las medidas en la condicional que mostrará en el canvas. Saludos :)
Hola @@Proyectoodnet una consulta para que solo mueva una imagen de un lado a otro con las flechas y también poder moverlo con el mouse como seria? Sin salirse de los márgenes? Sin más excelente video
Bueno, si entiendo bien la pregunta, una manera de poder hacer lo que comenta es con los mouse events, creando una función que se dispare en un onmousemove y reciba el evento y accediendo a las propiedades clientX , ahí ya tendría la posición y solo sería mover la imagen a la coordenada obtenida , todo tomando solo las medidas del canvas . Es dificultoso al explicar pero una vez pones manos a la obra te resultará fácil y entretenido hacerlo. Saludos :)
@@Proyectoodnet Estoy aprendiendo hacer juegos con html5 y JS me ha costado bastante, me he guiado con tus aportes. Una pregunta donde puedo encontrar el código de este juego, o vas hacer un nuevo tutorial...gracias :)
Que tal amigo, gracias por visitar el canal y por sus comentarios :) , y claro que si , puede descargar el proyecto de github en la descripcion esta el enlace, o si lo prefiere , me proporciona un correo y se lo mando. Saludos !!!
Que tal, gracias por visitar el canal y sus comentarios. Referente a su pregunta, lo que se me ocurre es que agregues una variable que contenga las vidas y al llegar a 0 que pinte el game over , mientras no sea 0 pues solo que reduzca la variable de vidas en 1 al ser golpeada la nave :)
Que tal amigo, gracias por visitar el canal. Respecto a tu pregunta , hay muchas maneras de hacerlo, un ejemplo sería agregar la función con el método reload y ligarla al botón. En html: En Javascript: function reinicio(){ locación.reload(); }
Que tal amigo , gracias por su visita, para lo que usted quiere lograr según lo que entiendo , se deberá agregar la pulsación de teclas arriba y abajo , esto le quitaría algo de lógica al juego como esta justo ahora , así que me imagino que quiere hacer uno con un estilo muy diferente en cuando a enemigos y todo. así que el ejemplo que le pondré de código en el siguiente comentario solo es un ejemplo de como mover la nave libremente por el canvas , espero le sea de ayuda. Para lograr que funcione , tendrá que hacer un respaldo del código del archivo js del juego y en su lugar poner el que le comento . Saludos !
que buen vídeo me gusto mucho pero tengo un error con las imágenes las cuales no me cargan y la linea de código esta igual, algún consejo para solucionarlo?
@@malditobajista Hola , gracias por visitar el canal. No entiendo porque no funcionaria , pero si me pasas un mail te envio el codigo del juego en lo que veo que problema es el que da en github . Saludos
Que tal amigo. No soy profesor jeje solo alguien que le gusta la programacion y nada más. Pero en lo que te pueda ayudar me mandas msj y listo , saludos mi amigo :)
//Me falta hacer que los disparos no se vayan es diferente al tuyo f $(document).ready(function(e) { //Declarar variables fondo=$("#capafondo"); nave=$("#capanave"); pos_x=0; pos_y=fondo.height()-nave.height(); girar=0; posbala=0; bala=$("#capabala"); $("body").keydown(function(tecla) { switch(tecla.which) { //PARA DERECHA case 39: if(pos_x 0) pos_x-=10; nave.css("margin-left", pos_x + "px"); break; //PARA ARRIBA case 38: if(pos_y >0) pos_y-=10; nave.css("margin-top", pos_y + "px"); break; //PARA ABAJO case 40: if(pos_y
Que tal amigo , según veo tu código , creo que te podría funcionar, utilizar la función getBoundingClientRect() para obtener las posiciones en monitor de tu pantalla de juego y compararlas con las posiciones de tu bala y hacer una regla para que cuando lleguen a colisionar desaparezca la bala. Le dejo un enlace que podría serle de ayuda con el uso de la función que le menciono. ed.team/blog/obtener-la-posicion-de-un-elemento-html-con-javascript ¡Saludos! :)
¡Qué gran video! Muchas gracias por compartir tu conocimiento con un juego tan divertido. Me ayudaste mucho. :)
Hola , muchisimas gracias por su comentario y por visitar el canal. Saludos :) !!!!
Excelente!!! Muchas gracias por tu generosidad. Gran aporte.
Gracias a ti por visitar el canal y tus comentarios 🙂 , saludos!
Gracias por compartirlo. Sólo tuve que modificar las animaciones que le pusiste porque, al menos en mi navegador, no se ejecutaban bien y sólo producian un incómodo parpadeo. El resto funcionó a la primera.
Hola amigo, que bien que te gusto el juego y me da mucho gusta que uses el para practicar. Saludos !
Hola, yo tengo el mismo problema¿me podrías decir cómo lo solucionaste?
@@tododibujosmvymas8443 Lo que recuerdo es que eliminé las animaciones. Si tienes el código como en el vídeo y eliminas las animaciones tiene que funcionar.
Hola muy buen video me podrías ayudar como instalar un botón de reinicio del juego
Hola, gracias por visitar el canal. Respecto a tu duda, creo que lo mas fácil seria agregar un boton y enlazarle una función que refresque la pagina y así reinicia el juego :) , saludos
Disculpa amigo que codigo usas para que los disparos no traspasen tu pantalla
Hola, muchas gracias por visitar el canal. Respecto a tu pregunta , la respuesta seria , que el canvas tiene un tamaño especificado , entonces nada del juego se dibuja fuera de el , por eso no se ve que pasen las balas de la pantalla . Para entender un poco mas , podrías echar un vistazo al código en la parte del objeto llamado Bala que serian las balas en si y dentro de este se decide si es del jugador o enemigo, la función pinta que es lo que dibuja , y las funciones de verifica y disparaEnemigo , que es en donde se disparan los eventos de disparo.
Le comento que puede descargar el código de mi repositorio en github , el enlace esta en la descripción
Saludos !
Como se hace para mover la nave en el teléfono? la verdad me ayudarías mucho
Que tal amigo, primero que nada , agradezco su visita al canal. Respecto a lo que usted quiere realizar, la opción más viable sería agregar los botones a la vista , el de flecha derecha , flecha izquierda y el de disparo, posicionarlos abajo del canvas , y darles la función de que cuando se dé click detecte el código de tecla necesario. Saludos !
A ok si pero no se como hacerlo porque en teléfono táctiles no funciona si me podrías ayudar con ese código se lo agradecería
@@yeffersonquintero3325 Que tal amigo, claro que si, es facil , en la parte del html agrega debajo de la etiqueta canvas 3 botones con el evento onclick pasandole la funcion verifica pero esta vez con 2 parametros que agregaremos a la funcion .
<-
Fire
->
despues en el js modificamos la funcion verifica para recibir los parametros y para que funcione con ellos, agregando una verificacion al principio y otra al fina , deveria quedar algo asi
function verifica(boton=false, codigo=0) {
if(boton){
teclaPulsada = codigo;
tecla[codigo] = true;
}
if (tecla[teclaDerecha]) x += 5;
if (tecla[teclaIzquierda]) x -= 5;
//Verifica cañon
if (x > canvas.width - 20) x = canvas.width - 20;
if (x < 0) x = 0;
//Disparo
if (tecla[teclaEspacio]) {
if (tiempoBala == true && municion !=0 ){
tiempoBala = false;
balas_array.push(new Bala(nave.x + 12, nave.y - 3, 5));
(municion >0)?municion = municion - 1 : false;
tecla[teclaEspacio] = false;
disparaEnemigo();
setTimeout(function(){tiempoBala = true;}, 300);
}
}
if(boton){
setTimeout(() => {
tecla[codigo] = false;
}, 100);
}
}
y ya por ultimo le da algunos estilos a los botones para que se vean bonitos . Igual le invito a descargar el codigo del repositorio de github , ahi ya se lo agregue . Espero le sea de ayuda , Saludos !
github.com/proyectood/juegoInvasores
Cuando muero y trato de revivir aparece: propiedades de (reading 'x") error
Cómo podríamos ponerle diferenetes sonidos al disparar? Gracias
Que tal amigo , agradezco tu visita y comentarios. Para agregar sonido cuando disparamos , es agregar el siguiente código
let audioDisparo = new Audio("sonidos/disparo.mp3");
audioDisparo.play();
eso en el archivo de js, en la función donde se hace el disparo, después de que verifica las municiones, creo que es por la linea 260 masomenos.
También obviamente , se deberá incluir el archivo en la respectiva carpeta de sonidos , que tendrías que crear .
Espero te ayude , Saludos !
Actualice el repo de github en el cual agregue, entre otras cosas , el sonido del disparo de la nave. Saludos!
Quedó muy bonito. Saludos
Muchas gracias, por visitar el canal y por sus comentarios amigo. Saludos! :)
hola, una consulta como lo puedo hacer para que aparezca otra imagen? cambie en la linea 14 y la dirección de la imagen y solo sale en negro
Que tal amigo, primero que nada, muchas gracias por visitar el canal. Respecto a su duda, la imagen deberá tener las mismas medidas que la que use , 64px ancho x 26px alto , también sería conveniente que fuese png, puede ver qué las medidas se usan en la función de la línea 95, se especifican las medidas en la condicional que mostrará en el canvas. Saludos :)
Hola @@Proyectoodnet una consulta para que solo mueva una imagen de un lado a otro con las flechas y también poder moverlo con el mouse como seria? Sin salirse de los márgenes?
Sin más excelente video
Bueno, si entiendo bien la pregunta, una manera de poder hacer lo que comenta es con los mouse events, creando una función que se dispare en un onmousemove y reciba el evento y accediendo a las propiedades clientX , ahí ya tendría la posición y solo sería mover la imagen a la coordenada obtenida , todo tomando solo las medidas del canvas . Es dificultoso al explicar pero una vez pones manos a la obra te resultará fácil y entretenido hacerlo. Saludos :)
muuy buen viedeo sigue asi creceseras me serviste de mucho ahora tienes un nuevo sub gracias saludos.
Que tal , muchas gracias por suscribirte y por tus comentarios. Saludos :) !
Este juego esta genial, muchas gracias. 😊
gracias a ti por visitar mi canal. saludos.
@@Proyectoodnet Estoy aprendiendo hacer juegos con html5 y JS me ha costado bastante, me he guiado con tus aportes. Una pregunta donde puedo encontrar el código de este juego, o vas hacer un nuevo tutorial...gracias :)
@@MarisolRamos-1971 Lo subire a mi pagina web en unos dias .
Saludos !
igual si gusta le paso el codigo por mail .
@@Proyectoodnet Si no es mucho molestar, y me lo puedes enviar este es mi correo
m.andy1971@hotmail.com
Muchas gracias :)
@@MarisolRamos-1971 Listo . Saludos!
Wao, simplemente alucinante, le pido por favor si no es mucha molestia la carpeta del proyecto.
Que tal amigo, gracias por visitar el canal y por sus comentarios :) , y claro que si , puede descargar el proyecto de github en la descripcion esta el enlace, o si lo prefiere , me proporciona un correo y se lo mando. Saludos !!!
@@Proyectoodnet Ha perfecto, no vi el enlace a Github ahora mismo lo descargo, gracias por la atención espero siga haciendo más tutoriales como este.
excelente video compa, pero me gustaria saber como hago para agregar un sistema de vidas?
Que tal, gracias por visitar el canal y sus comentarios. Referente a su pregunta, lo que se me ocurre es que agregues una variable que contenga las vidas y al llegar a 0 que pinte el game over , mientras no sea 0 pues solo que reduzca la variable de vidas en 1 al ser golpeada la nave :)
Quiero llorar snif snif : ) Excelente trabajo Like y suscrito
Muchas gracias por visitar el canal y por sus comentarios, Saludos Amigo :)
Genio
Muchas gracias amigo, por sus comentarios y por visitar el canal. Saludos!
Cómo agrego un botón de reinicio al juego ?
Que tal amigo, gracias por visitar el canal. Respecto a tu pregunta , hay muchas maneras de hacerlo, un ejemplo sería agregar la función con el método reload y ligarla al botón.
En html:
En Javascript:
function reinicio(){ locación.reload(); }
Sos demasiado genio!
Hola amiga, muchas gracias por sus comentarios y por visitar el canal, Saludos! :)
Disuclpa en tu codigo quiero sumarle que se suba el avion baje y que si puede que se pueda dar vuelta me podria dar el codigo por favor
Que tal amigo , gracias por su visita, para lo que usted quiere lograr según lo que entiendo , se deberá agregar la pulsación de teclas arriba y abajo , esto le quitaría algo de lógica al juego como esta justo ahora , así que me imagino que quiere hacer uno con un estilo muy diferente en cuando a enemigos y todo. así que el ejemplo que le pondré de código en el siguiente comentario solo es un ejemplo de como mover la nave libremente por el canvas , espero le sea de ayuda. Para lograr que funcione , tendrá que hacer un respaldo del código del archivo js del juego y en su lugar poner el que le comento . Saludos !
window.onload = function () {
canvas = document.getElementById("miCanvas");
if (canvas && canvas.getContext) {
ctx = canvas.getContext("2d");
if (ctx) {
x = canvas.width / 2;
mensaje("INVASORES");
imgNave = new Image();
imgNave.src = "imagenes/nave.png";
imgNave.onload = function () {
nave = new nave(0);
}
setTimeout(anima, 1500);
} else {
alert("Error al crear tu contexto");
}
}
}
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 17); }
})();
document.addEventListener("keydown", function (e) {
teclaPulsada = e.keyCode;
tecla[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
tecla[e.keyCode] = false;
});
var canvas, ctx;
var x = 100;
var y = 100;
var teclaIzquierda = 37;
var teclaDerecha = 39;
var teclaEspacio = 32;
var teclaArriba = 38;
var teclaAbajo = 40;
var imgNave;
var municion = 100;
var imgAni = 0;
var imgAni2 = 0;
var enemigosVivos = 50;
var tiempoBala = true ;
var teclaPulsada = null;
var tecla = [];
var balas_array = new Array();
var tiempoDisparo = 500;
var puntos = 0;
function Bala(x, y, w) {
this.x = x;
this.y = y;
this.w = w;
this.dibuja = function () {
ctx.save();
ctx.fillStyle = "blue";
ctx.fillRect(this.x, this.y, this.w, this.w);
this.y = this.y - 6;
ctx.restore();
};
}
function nave(x,y) {
this.x = x;
this.y = y;
this.w = 30;
this.h = 15;
this.dibuja = function (x,y) {
this.x = x;
this.y = y;
if(imgAni2 < 5){
ctx.drawImage(imgNave,0 , 0 , 32 , 32 , this.x, this.y, 35 , 35);
imgAni2 = imgAni2 + 1;
imgAni = imgAni + 1;
checarBalas();
} else if(imgAni2 < 10) {
ctx.drawImage(imgNave,32 , 0 , 32 , 32 , this.x, this.y, 35 , 35);
imgAni2 = imgAni2 + 1;
imgAni = imgAni + 1;
} else{
ctx.drawImage(imgNave,32 , 0 , 32 , 32 , this.x, this.y, 35 , 35);
imgAni2 = 0;
}
};
}
function anima() {
requestAnimationFrame(anima);
verifica();
pinta();
}
function mensaje(cadena) {
var lon = (canvas.width - (50 * cadena.length)) / 2;
ctx.fillStyle = "white";
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "bold 75px Arial";
ctx.fillText(cadena, lon, 220);
}
function municiones() {
ctx.save();
ctx.fillStyle = "white";
ctx.clearRect(0, 20, canvas.width, 20);
ctx.font = "bold 12px Courier";
ctx.fillText("Municion: " + municion, 10, 40);
ctx.restore();
}
function verifica() {
if (tecla[teclaDerecha]) x += 5;
if (tecla[teclaIzquierda]) x -= 5;
if (tecla[teclaArriba]) y -= 5;
if (tecla[teclaAbajo]) y += 5;
if (x > canvas.width - 30) x = canvas.width - 30;
if (x < 0) x = 0;
if (y > canvas.height - 30) y = canvas.height - 30;
if (y < 0) y = 0;
if (tecla[teclaEspacio]) {
if (tiempoBala == true && municion !=0 ){
tiempoBala = false;
balas_array.push(new Bala(nave.x + 12, nave.y - 3, 5));
(municion >0)?municion = municion - 1 : false;
tecla[teclaEspacio] = false;
setTimeout(function(){tiempoBala = true;}, 300);
}
}
}
function checarBalas(){
var balasArrayVal = 0;
for(let i = 0 ; i < balas_array.length; i++){
if(balas_array[i] != null){
balasArrayVal = 1;
}
}
if(municion == 0 && balas_array.length == 100 && balasArrayVal == 0 && enemigosVivos > 0){
tecla[teclaEspacio] = false;
alert("Sin municion");
}
}
function pinta() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
municiones();
nave.dibuja(x,y);
for (var i = 0; i < 100; i++) {
if (balas_array[i] != null) {
balas_array[i].dibuja();
if (balas_array[i].y < 0) balas_array[i] = null;
}
}
}
que buen vídeo me gusto mucho pero tengo un error con las imágenes las cuales no me cargan y la linea de código esta igual, algún consejo para solucionarlo?
Mi consejo seria que revisaras que error te da en consola , ya que podria no estar la ruta correcto
Saludos y gracias por visitar el canal !
MUY BUENO
Gracias por su visita y su comentaio amigo :)
Buen video, es mejor explicar con el código ya escrito.
Gracias por visitar el canal y por sus comentarios amigo. Saludos !!!
Men sos un crack
Muchas gracias por visitar el canal y por sus comentartios amigo. Saludos :)
Hola. No estaría funcionando.
Lo de GitHub, tampoco.
Buen dia amigo , gracias por visitar el canal. No entendi bien a que se refiere . Saludos !
@@Proyectoodnet vi el video, baje las cosas de github, pero no funciona ¯\_(ツ)_/¯
@@malditobajista Hola , gracias por visitar el canal. No entiendo porque no funcionaria , pero si me pasas un mail te envio el codigo del juego en lo que veo que problema es el que da en github . Saludos
@@malditobajista Por cierto , si lo estas abriendo con firefox ?
o chrome ?
@@Proyectoodnet chrome! capaz que es problema de incompatibilidad
Hola profesor quisiera tener su contacton espero me pueda ayudar
Que tal amigo. No soy profesor jeje solo alguien que le gusta la programacion y nada más. Pero en lo que te pueda ayudar me mandas msj y listo , saludos mi amigo :)
hola me puedes pasa el código por favor
Claro que si amigo , dejame un correo y te mando el algoritmo. Saludos !
@@Proyectoodnet yubersy08@gmail.com
Listo se lo envie a su mail . Saludos !
que buen video? aun puedes enviar el código?
Claro amigo , si me comparte un correo a dónde enviarlo con gusto lo hago. Saludos y gracias por visitar el canal :)
@@Proyectoodnet buck_0301@hotmail.com, gracias por tu vídeo me ayudas bastante sigue haciendo contenido por favor
@@marcoorihuela4550 Listo amigo, le envie el codigo e imagenes. Gracias por sus comentarios :)
Hola! Yo quiero el código?
Si me proporciona un email , le podria mandar el codigo sin problemas amiga Saludos ! :)
@@genesis_s03 Listo , le mande los archivos del proyecto del juego invasores , cualquier duda me contacta. Saludos !
E pasame el juego a mi correo jaja ya lo hice peor no me funciona
Con gusto amigo, dígame un correo y le mando el código. o puede descargar el repositorio de github github.com/proyectood/juegoInvasores Saludos!
//Me falta hacer que los disparos no se vayan es diferente al tuyo f
$(document).ready(function(e)
{
//Declarar variables
fondo=$("#capafondo");
nave=$("#capanave");
pos_x=0;
pos_y=fondo.height()-nave.height();
girar=0;
posbala=0;
bala=$("#capabala");
$("body").keydown(function(tecla)
{
switch(tecla.which)
{
//PARA DERECHA
case 39:
if(pos_x 0)
pos_x-=10;
nave.css("margin-left", pos_x + "px");
break;
//PARA ARRIBA
case 38:
if(pos_y >0)
pos_y-=10;
nave.css("margin-top", pos_y + "px");
break;
//PARA ABAJO
case 40:
if(pos_y
Que tal amigo , según veo tu código , creo que te podría funcionar, utilizar la función getBoundingClientRect() para obtener las posiciones en monitor de tu pantalla de juego y compararlas con las posiciones de tu bala y hacer una regla para que cuando lleguen a colisionar desaparezca la bala. Le dejo un enlace que podría serle de ayuda con el uso de la función que le menciono.
ed.team/blog/obtener-la-posicion-de-un-elemento-html-con-javascript
¡Saludos! :)