Hola Juan. Con estos videos he ayudado a aprender cosas nuevas a algunas personas, me lo han comentado en diversas ocasiones, para mí eso es un incentivo para seguir haciéndolos. Gracias por tu comentario y buenos deseos.
el programador mas epico que vi hasta ahora. pregunta.. ouede hacer otro video agreagando una tabla de score y botone de start? saludos desde Argentina
Hola Santiago. Anoté tu sugerencia en mi board de Trello: trello.com/c/fLhiU2uU/58-hacer-tutorial-de-tabal-de-score-para-el-snake-y-bot%C3%B3n-de-iniciar Gracias y saludos desde México
Jajajajja. Sí, es algo que aún tengo pendiente de resolver con el equipo correcto para sostener el micrófono, esto sucede porque lo tengo muy cerca y se escucha la vibración. Gracias por tu comentario.
Hola. Si te refieres específicamente al video, pues no utilizo un compilador, más que nada lo corro directamente en el navegador. Pero para otro tipo de usos que no son en navegador, pues utilizo node con administrador de paquete npm o yarn, dependiendo el caso. Aunque realmente tal vez no comprendo si tu pregunta se referíe a eso. Gracias por tu comentario, saludos.
El programa que uso para el código, es el Visual Studio Code, aunque le instalé el plugin de Sublime Text, para no perder la costumbre. Y en cuanto a ejecución, pues corre directamente en el navegador, aunque hay veces que ejecuto un servidor de python: python3 -m http.server, de manera que lo accedo por localhost:8000 en lugar de file://. Espero haberte resuelto la duda. Gracias por tu comentario.
Hola. Gracias por el tiempo que le has dedicado. Aunque tengo un pequeño problema, no funciona. Le he dado vueltas, y no me falta ni sobra nada. Hasta la creación del canvas y sus cualidades, funciona todo bien, dsp crashea
Hola, primero que nada discula la tardanza en contestar. Pudiste resolverlo? Con lo que ya no muestra errores te refieres que ya funciona o que sigue sin funcionar? Si todavía tienes el problema y pudieras compartirme tu código para ayudarte a encontrar algo que pudiera ser disfuncional. Saludos.
una consulta brother, si yo quiero que la serpiente tenga un crecimiento mas redusido al que tiene actualmente al ejecutar el juego, que parte del codigo deberia modificar? y como podria modificar el fondo como para que en vez de al tocar el marco se reinicie la serpiente prefiero que atraviese el marco y aparezca del otro lado
Hola Mati. 1. Para el crecimiento más reducido, cambias la línea 33 del ejemplo de mi código: github.com/gamikun/cosas-raras/blob/master/snake/snake.html#L33 que es donde dice: const GROW_SCALE = 10; Este número es el número de recuadros que crece en cada caza. 2. Esto es un poco más complejo, debido a que necesitarías bajo ciertas circunstancias validarlo de tal manera que se pueda dibujar en ambos lados, no tenog una respuesta sencilla para esta pregunta por ahora, puede que haga una modificación a futuro. Gracias por tu comentario.
@@CodigoGama le agrande el tamaño y quedo mas a mi gusto, muchas gracias por responder y por crear el video, aprendí nuevos términos que no eran de mi conocimiento.
Wow quedó muy guapo, soy principiante en esto de html, css y js, no sabía que podías editar el tamaño y estilo de los divs dentro del mismo html :o. Muy bueno bro, lo haré para aprender cosas nuevas, nuevo sub! Edit: Se me acaba de ocurrir algo bro y quizá, si respondes, me puedas responder como hacerlo y es, básicamente agregar botones de start, pausa, y reiniciar y también una puntuación Así a groso modo, pensaba en plan asigar una tecla para cada acción y que cuando se pulse empiece el juego, se pause o se reinicie, sería así o no? Y para la puntuación pues hacer un marco con números que vayan sumando cada que la serpiente coma una preza. Así lo pienso desde mi poco conocimiento, ¿Cómo lo harías tú?
Hola. Como es web, es más sencillo ponerlo sobre el canvas como elemento sobrepuesto (position: absolute), sin embargo si quisieras dibujarlo con texto dentro del canvas, también puedes hacerlo con un fillText. El tema de los eventos, si lo haría así como lo mencionas, usando addEventListener del teclado. No sé si mi comentario sirva de algo o si ya lo has resuelto. Si pudiera darte un poco más de detalle, espero tu comentario. Agradezco tu comentario :D
Una duda amigo, si quisiera poner las teclas para poder desplazarme en vez de las letras, como seria el código y en que parte tendría que remplazarlo? Me podrías ayudar, gracias.
Amigo, veo que eres demasiado bueno en esto, crees que me puedas ayudar pasando este mismo código a MVC? para poder empezar a aprender en este modelo. Espero me puedas contestar, te lo agradecería demasiado.
Hola Isaac, en el arreglo DIRECTIONS_MAP, remplaza las letras correspondientes con 'ArrowUp', 'ArrowDown', 'ArrowLeft' y 'ArrowRight'. Gracias por tu comentario.
Como es que no tienes mas subs tu info es perfecta me suscribo Ya tengo juego para cuando este aburrido jajaja Una duda copie el codigo que pusiste y el fondo no me aparece negro por que oh donde esta el error ?
Hola. Te refieres al fondo general de la página? ese debe ir en el body { background: black; } El fondo del área de juego si te lo muestra bien? Por lo de los suscripciones, pues he estado picando piedra para lograr tener más suscriptores de calidad, como tú. Gracias por tu comentario.
@@zar-lt5gh Creo que la solución más sencilla que se me ocurre, es que la subas a una cuenta de neocities.org, es gratis y tiene 1gb de espacio, si el juego corre solo con el html/css/javascript, debe funcionar perfectamente.
Hola. He aprendido con tutoriales, cursor en PDF de Internet, trabajando en varios temas de desarrollo, 1 año de universidad y haciendo muchos experimentos en gráficos en general, que es lo que primeramente he hecho en mi canal. Probar muchas cosas y experimentar cosas nuevas creo que ayuda :) Tal vez quieras hacer preguntas más específicas, te leo. Gracias por tu comentario.
eu t juro q mire tu video como 6 veces y no logro hacer q en la primera etapa el cuadradito controlarlo, se va derecho para la derecha y no obedece cuando toco las teclas. aiuda
Primero que nada, gracias por lo de cochino. Jajajaja. Bueno, mira, el problema está en que el nombre correcto de la propiedad del keydown es "onkeydown" y no "onKeydown". Alternativamente también puedes hacerlo con window.addEventListener('keydown', function() { // ... }); Espero te sirva para arreglarlo, saludos y gracias por tu comentario.
Jajaja. Me lo habían dicho también en los lugares donde he trabajado. Espero te haya servido el video, o hayas aprendido a lgo. Ojalá te pudieras suscribir, te lo agradecería. Pdt: saludos desde Sonora, México. Gracias Crack.
Hola genio como va !! Me estoy volviendo loco porque no puedo hacer que la vivora cambie de direccion, me funsiona todo. Cuando choca con las paredes reaparece pero no puedo hacer que se mueva con el teclado. No se cual sera el error que tengo. Te dejo mi codigo por si lo necesitas. Gracias, me suscribo. Snake
Me alegro que sigan haciendo este tipo de videos de programacion los ultimos videos asi que vi eran de 2016, suerte!
Hola Juan.
Con estos videos he ayudado a aprender cosas nuevas a algunas personas, me lo han comentado en diversas ocasiones, para mí eso es un incentivo para seguir haciéndolos.
Gracias por tu comentario y buenos deseos.
gracias gamaliel muy bueno tu programa
Hola. Que bueno que te haya sido útil.
Gracias por tu comentario, saludos.
el programador mas epico que vi hasta ahora. pregunta.. ouede hacer otro video agreagando una tabla de score y botone de start? saludos desde Argentina
Hola Santiago.
Anoté tu sugerencia en mi board de Trello:
trello.com/c/fLhiU2uU/58-hacer-tutorial-de-tabal-de-score-para-el-snake-y-bot%C3%B3n-de-iniciar
Gracias y saludos desde México
Lo haré hoy 👍, tú teclado suena como si estuvieras masticando
Jajajajja. Sí, es algo que aún tengo pendiente de resolver con el equipo correcto para sostener el micrófono, esto sucede porque lo tengo muy cerca y se escucha la vibración.
Gracias por tu comentario.
Excelente viejo eres lo máximo, me funcionó
¡Oye! ¿podrías hacer un de Pong ?
Jakdkjdjsjaja, si es cierto
gracias parcero, excelente
Hola Emerson. Siempre es un gusto para mí saber que a alguien le sirve algo de mis videos. Gracias por tu comentario.
como mueves ala vibora
Quedo hermosooo, soy principiante en esto de html, css y js, no sabía que podías editar el tamaño y estilo de los divs dentro del mismo html :000
Hola Javier. Que bien que te haya gustado, y que estés aprendiendo cosas nuevas. Gracias por tu comentario. Saludos.
Suscrito viajero ;)
Cual es el compilador de javascript que usas?
Hola. Si te refieres específicamente al video, pues no utilizo un compilador, más que nada lo corro directamente en el navegador. Pero para otro tipo de usos que no son en navegador, pues utilizo node con administrador de paquete npm o yarn, dependiendo el caso. Aunque realmente tal vez no comprendo si tu pregunta se referíe a eso.
Gracias por tu comentario, saludos.
@@CodigoGama Mas bien, ¿que programa usas para correr el codigo?
El programa que uso para el código, es el Visual Studio Code, aunque le instalé el plugin de Sublime Text, para no perder la costumbre. Y en cuanto a ejecución, pues corre directamente en el navegador, aunque hay veces que ejecuto un servidor de python: python3 -m http.server, de manera que lo accedo por localhost:8000 en lugar de file://.
Espero haberte resuelto la duda.
Gracias por tu comentario.
Hola. Gracias por el tiempo que le has dedicado. Aunque tengo un pequeño problema, no funciona. Le he dado vueltas, y no me falta ni sobra nada. Hasta la creación del canvas y sus cualidades, funciona todo bien, dsp crashea
Hola. Si abres el inspector del navegador no te muestra ningún error de consola?
@@CodigoGama si, me mostraba. Varios. Pero no llegué a inspeccionarlos. En cuanto pueda, te aviso. Muchas gracias!
@@CodigoGama Hola. Los errores q me mostraba eran porque estaba sin conexión y bootstrap no cargaba. Ahora, la consola no muetra ningun error.
Hola, primero que nada discula la tardanza en contestar.
Pudiste resolverlo?
Con lo que ya no muestra errores te refieres que ya funciona o que sigue sin funcionar?
Si todavía tienes el problema y pudieras compartirme tu código para ayudarte a encontrar algo que pudiera ser disfuncional.
Saludos.
para que se declara awsd en minuscula?
Hola Mateo.
Según yo lo hago para que funcione aún si esté la mayúscula o minúscula activado en el teclado.
Gracias por tu comentario.
una consulta brother, si yo quiero que la serpiente tenga un crecimiento mas redusido al que tiene actualmente al ejecutar el juego, que parte del codigo deberia modificar? y como podria modificar el fondo como para que en vez de al tocar el marco se reinicie la serpiente prefiero que atraviese el marco y aparezca del otro lado
Hola Mati.
1. Para el crecimiento más reducido, cambias la línea 33 del ejemplo de mi código: github.com/gamikun/cosas-raras/blob/master/snake/snake.html#L33
que es donde dice: const GROW_SCALE = 10;
Este número es el número de recuadros que crece en cada caza.
2. Esto es un poco más complejo, debido a que necesitarías bajo ciertas circunstancias validarlo de tal manera que se pueda dibujar en ambos lados, no tenog una respuesta sencilla para esta pregunta por ahora, puede que haga una modificación a futuro.
Gracias por tu comentario.
@@CodigoGama le agrande el tamaño y quedo mas a mi gusto, muchas gracias por responder y por crear el video, aprendí nuevos términos que no eran de mi conocimiento.
Excelente. Saludos.
lo ejecuto y no me deja mover la serpiente que procede ahi
Hola José.
Podría ver tu código?
Wow quedó muy guapo, soy principiante en esto de html, css y js, no sabía que podías editar el tamaño y estilo de los divs dentro del mismo html :o. Muy bueno bro, lo haré para aprender cosas nuevas, nuevo sub!
Edit: Se me acaba de ocurrir algo bro y quizá, si respondes, me puedas responder como hacerlo y es, básicamente agregar botones de start, pausa, y reiniciar y también una puntuación
Así a groso modo, pensaba en plan asigar una tecla para cada acción y que cuando se pulse empiece el juego, se pause o se reinicie, sería así o no?
Y para la puntuación pues hacer un marco con números que vayan sumando cada que la serpiente coma una preza. Así lo pienso desde mi poco conocimiento, ¿Cómo lo harías tú?
Hola.
Como es web, es más sencillo ponerlo sobre el canvas como elemento sobrepuesto (position: absolute), sin embargo si quisieras dibujarlo con texto dentro del canvas, también puedes hacerlo con un fillText.
El tema de los eventos, si lo haría así como lo mencionas, usando addEventListener del teclado.
No sé si mi comentario sirva de algo o si ya lo has resuelto. Si pudiera darte un poco más de detalle, espero tu comentario.
Agradezco tu comentario :D
Una duda amigo, si quisiera poner las teclas para poder desplazarme en vez de las letras, como seria el código y en que parte tendría que remplazarlo?
Me podrías ayudar, gracias.
Amigo, veo que eres demasiado bueno en esto, crees que me puedas ayudar pasando este mismo código a MVC? para poder empezar a aprender en este modelo.
Espero me puedas contestar, te lo agradecería demasiado.
Hola Isaac, en el arreglo DIRECTIONS_MAP, remplaza las letras correspondientes con 'ArrowUp', 'ArrowDown', 'ArrowLeft' y 'ArrowRight'.
Gracias por tu comentario.
@@CodigoGama Muchas gracias!
Una pregunta mas, como podría hacer este mismo código pero ahora en MVC.
@@CodigoGama yo una ves hice eso pero de otro youtuber y pusimos UP DOWN LEFT RIGHT
Como es que no tienes mas subs tu info es perfecta me suscribo
Ya tengo juego para cuando este aburrido jajaja
Una duda copie el codigo que pusiste y el fondo no me aparece negro por que oh donde esta el error ?
Hola. Te refieres al fondo general de la página? ese debe ir en el
body { background: black; }
El fondo del área de juego si te lo muestra bien?
Por lo de los suscripciones, pues he estado picando piedra para lograr tener más suscriptores de calidad, como tú.
Gracias por tu comentario.
al principio cuando abro el archivo en google me sale todo gris y un cuadro blanco, sabes porque es?
Hola. Cómo en Google? me puedes explicar más a detalle?
Gracias por tu comentario.
como se lo paso a mis amigos les sale que no se puede acceder
ayuda plis
Hola. La url del video no les sale? o te refieres a las url's del código?
@@CodigoGama no me referia a el juego que he creado con su tutorial se los quiero pasar a mis amigos el enlace de la pagina pero les salen error
Lo publicaste en algún sitio?
@@CodigoGama no solo puedo verlo si abro el archivo html me lleva a google pero no esta publicado no se como hacerlo
@@zar-lt5gh Creo que la solución más sencilla que se me ocurre, es que la subas a una cuenta de neocities.org, es gratis y tiene 1gb de espacio, si el juego corre solo con el html/css/javascript, debe funcionar perfectamente.
donde aprendiste a programar?, me gustaría a programar como tu
Hola. He aprendido con tutoriales, cursor en PDF de Internet, trabajando en varios temas de desarrollo, 1 año de universidad y haciendo muchos experimentos en gráficos en general, que es lo que primeramente he hecho en mi canal.
Probar muchas cosas y experimentar cosas nuevas creo que ayuda :)
Tal vez quieras hacer preguntas más específicas, te leo.
Gracias por tu comentario.
al inicio tu escribiste yo segui todos tus paso y me aparece esto por que es
^
SyntaxError: invalid syntax
[Finished in 198ms]
Caray, nunca había visto un error en esa parte del código, pero al final si te funcionó verdad?
@@CodigoGama si me funciono
@@CodigoGama Era un pequeño error pero muy pequeño error y con muy pequeño me refiero a que puse un punto y no me di cuenta
@@CodigoGama pero no era en esa sona del doctype
10:28
eu t juro q mire tu video como 6 veces y no logro hacer q en la primera etapa el cuadradito controlarlo, se va derecho para la derecha y no obedece cuando toco las teclas. aiuda
Hola Gabriel. Puedo ver tu código?
@@CodigoGama cochino.
snake
body {
background: #444;
text-align: center;
margin: 64px 0 0 0;
}
canvas {
border: solid 8px white;
background: linear-gradient(
0deg,
rgba(0, 102, 204, 1.0) 0%,
rgba(125, 60, 152, 1.0) 100%
);
}
const STATE_RUNNING = 1;
const STATE_LOSING = 2;
const TICK = 80;
const SQUARE_SIZE = 10;
const BOARD_WIDTH = 50;
const BOARD_HEIGHT = 50;
const GROW_SCALE = 10;
const DIRECTIONS_MAP = {
'A': [-1, 0],
"D": [1, 0],
"S": [0, 1],
"W": [0, -1],
"a": [-1, 0],
"d": [1, 0],
"s": [0, 1],
"w": [0, -1],
};
let state = {
canvas: null,
context: null,
snake: [{x:0, y:0}],
direction: {x:1, y:0},
prey: {x:0, y:0},
growing: 0,
runState: STATE_RUNNING
};
function randomXY() {
return {
x: parseInt(Math.random() * BOARD_WIDTH),
y: parseInt(Math.random() * BOARD_HEIGHT)
};
}
function tick() {
const dx = state.direction.x;
const dy = state.direction.y;
const highestIndex = state.snake.length - 1;
let interval = TICK;
if (state.runState === STATE_RUNNING) {
for (let idx = highestIndex; idx > -1; idx--) {
const sq = state.snake[idx];
if (idx === 0) {
sq.x += dx;
sq.y += dy;
} else {
sq.x = state.snake[idx - 1].x;
sq.y = state.snake[idx - 1].y;
}
}
}
requestAnimationFrame(draw);
setTimeout(tick, interval);
}
function drawPixel(color, x, y){
state.context.fillStyle = color;
state.context.fillRect(
x * SQUARE_SIZE,
y * SQUARE_SIZE,
SQUARE_SIZE,
SQUARE_SIZE
);
}
function draw() {
state.context.clearRect(0, 0, 500, 500);
for (var idx = 0; idx < state.snake.length; idx++) {
const {x, y} = state.snake[idx];
drawPixel("#22dd22", x, y);
}
const {x, y} = state.prey;
drawPixel("yellow", x, y);
}
window.onload = function() {
state.canvas = document.querySelector("canvas");
state.context = state.canvas.getContext("2d");
window.onKeydown = function(e) {
const direction = DIRECTIONS_MAP[e.key];
if (direction) {
const [x, y] = direction;
if (-x !== state.direction.x
&& -y !== state.direction.y)
{
state.direction.x = x;
state.direction.y = y;
}
}
}
tick();
};
Primero que nada, gracias por lo de cochino. Jajajaja.
Bueno, mira, el problema está en que el nombre correcto de la propiedad del keydown es "onkeydown" y no "onKeydown".
Alternativamente también puedes hacerlo con
window.addEventListener('keydown', function() {
// ...
});
Espero te sirva para arreglarlo, saludos y gracias por tu comentario.
Uu gracia. Me suscrubo
Man vos escribis como eminem, a la velocidad de la luz xddd.
Pdt:saludos desde argentina.
Jajaja. Me lo habían dicho también en los lugares donde he trabajado.
Espero te haya servido el video, o hayas aprendido a lgo.
Ojalá te pudieras suscribir, te lo agradecería.
Pdt: saludos desde Sonora, México.
Gracias Crack.
Sub brou
Gracias Zamudio, también por tu comentario ✌🏼.
12:28
Es de admirar tu disciplina para retomar videos. Saludos.
Hola genio como va !! Me estoy volviendo loco porque no puedo hacer que la vivora cambie de direccion, me funsiona todo. Cuando choca con las paredes reaparece pero no puedo hacer que se mueva con el teclado. No se cual sera el error que tengo.
Te dejo mi codigo por si lo necesitas. Gracias, me suscribo.
Snake
body{
background: #444;
text-align: center;
margin: 64px 0 0 0;
}
canvas{
border: solid 8px white;
background: linear-gradient(
0deg,
rgba(0,102,204,1.0)0%,
rgba(125,60,152,1.0)100%
);
}
const STATE_RUNNING = 1;
const STATE_LOSING = 2;
const TICK = 80;
const SQUARE_SIZE = 10;
const BOARD_WIDTH = 50;
const BOARD_HEIGHT= 50;
const GROW_SCALE= 10;
const DIRECTIONS_MAP = {
'A': [-1,0],
'D': [1,0],
'S': [0,1],
'W': [0,-1],
'a': [-1,0],
}
let state ={
canvas: null,
context:null,
snake:[{x:0, y:0}],
direction: {x:1,y:0},
prey: {x:0, y:0},
growing:0,
runState:STATE_RUNNING
};
function randomXY(){
return{
x: parseInt(Math.random() * BOARD_WIDTH),
y: parseInt(Math.random() * BOARD_HEIGHT),
};
}
function tick (){
const head = state.snake[0];
const dx = state.direction.x;
const dy = state.direction.y;
const highestIndex = state.snake.length -1;
let tail = {};
let interval = TICK;
Object.assign (tail,
state.snake[state.snake.length -1]);
let didScore = (
head.x === state.prey.x
&& head.y === state.prey.y
);
if (state.runState === STATE_RUNNING){
for (let idx = highestIndex; idx > -1; idx --){
const sq = state.snake[idx];
if(idx === 0) {
sq.x += dx;
sq.y += dy;
} else {
sq.x = state.snake [idx -1].x;
sq.y = state.snake [idx -1].y;
}
}
} else if (state.runState === STATE_LOSING){
interval = 10;
if (state.snake.length > 0) {
state.snake.splice (0, 1);
}
if (state.snake.length === 0){
state.runState = STATE_RUNNING;
state.snake.push(randomXY());
state.prey = randomXY ();
}
}
if (detectCollision()){
state.runState = STATE_LOSING;
state.growing = 0;
}
if (didScore){
state.growing += GROW_SCALE;
state.prey = randomXY();
}
if (state.growing >0){
state.snake.push (tail);
state.growing -= 1;
}
requestAnimationFrame(draw);
setTimeout(tick, interval);
}
function detectCollision(){
const head = state.snake [0];
if (head.x = BOARD_WIDTH
|| head.y >= BOARD_HEIGHT
|| head.y
4:34 tenias que bajar mas ya casi no se veia lo que escribias
otra cosa quedo hermoso no soy princia en de html y js pero no sabia que se podia hacer juego con html mezclado con js
wow cinco minutos y mucho codigo tu si que sabes
Ya veo, tienes razón, estaba muy abajo, no tuve cuidado, gracias por tu retroalimentación.
Así es, se puede hacer html mezclado con js, el límite es tu imaginación, saludos. 🤓