Objeto playerPosition
Contenido del curso
Canvas
Mapa del juego
Movimientos del jugador
Colisiones
Bonus: adictividad
Deploy
Próximos pasos
Objeto playerPosition
Objeto playerPosition
Contenido del curso
Antonio Mora
Beder Danilo Casa Condori
Sergio Alejandro Saldaña Rangel
Aaron Santiago Loyo Zabala
Beder Danilo Casa Condori
Nestor Rios Garcia
Matias Martel
Beder Danilo Casa Condori
Luis Miguel Rodríguez
Manuel Andres García Vera
Tommy Toala Cox
Victor Hugo Cruz Carballo
Alejandro Manzo
Fabio Escobar
Sergio Javier Lopez Olivera
marco antonio
Angel David Velasco Bonifaz
Alejandro López Aguilar
Oscar Gutiérrez
Andre Huaman Yovera
Luis Rodríguez
----- ----
Ricardo Alfonso Chavez Vilcapoma
David Alvarez
Hola.
Yo lo solucioné de la forma siguiente:
En la función startGame agregué la siguiente condición playerPostion.x === undefined para asignarle al jugador la posición de la puerta solo cuando su posición sea undefined
En las funciones de mover, después de actualizar la posición del jugador, ejecuto la función setCanvasSize para que se dibuje todo el mapa de nuevo
interesante
Te quedo muy bien
esta genial
Yo lo solucioné usando un contador
let moves = 0; // la incializamos en 0 // incluso nos puede ayudar para mas en el futuro
Modificamos el condicional en el que identificamos donde inicia el camino en nuestro mapa
if (column === 'O' && moves === 0) { playerPosition.x = xPosition playerPosition.y = yPosition game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y) } // dibujamos a nuestro jugador con esta posicion solo cuando no ha habido movimientos
Después modificamos la función mover Jugador para terminar nuestra solucion
function movePlayer(direction) { moves++ // cada vez que usemos los botones o teclas para mover al jugador aumentara el contador /// Aqui actualizamos la posicion del jugador ya establecido en el condicional anterior switch (direction) { case 'moveUp': playerPosition.y -= elementSize break; case 'moveLeft': playerPosition.x -= elementSize break; case 'moveRight': playerPosition.x += elementSize break; case 'moveDown': playerPosition.y += elementSize break; default: break; } printMap() // Limpiamos el mapa game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y) // dibujamos a nuestro jugador en su nueva posicion }
Buenos despues de mucha lucha logre desplazar el jugador sin que se duplique ni se salga de los bordes
Definimos las variables a utilizar
let canvasSize; let elementsSize; const playerPosition = { x: undefined, y: undefined, } // Espera a que cargue el contenido html de la pagina antes de lanzar la funcion window.addEventListener('load', resizeCanvas); window.addEventListener('resize', resizeCanvas)
Esta es la funcion que dibuja el canvas
function startGame () { game.font = elementsSize + 'px Verdana'; //Situamos los elementos en el medio de la casilla tanto horizontal como verticalmente game.textAlign = "center"; game.textBaseline = 'middle'; const map = maps[0] //Agarramos el mapa del array de mapas y le quitamos los espacios en blanco al inicio y al final con trim y luego con split creamos un arreglo donde el inicio y el final de cada elemento se marca por los saltos de linea '\n' const mapRows = map.trim().split('\n'); //Del array resultante usamos map para recorrer cada uno de sus elementos (rows) limpiando los espacios en blanco con trim y luego separandolos por "filas" con split const mapRowCols = mapRows.map(row => row.trim().split('')); //Recorremos con for each el array bidimensional a partir del string del map y recibimos dos parametros su valor y su indice mapRowCols.forEach((row, rowIndex) => { //Recorremos las filas iterando sobre cada columna y recibimos su valor y su indice row.forEach((col, colIndex) => { //Declaramos que valor tendra el emoji en esa columna const emoji = emojis[col]; //Definimos el posicionamiento que tendra en horizontal y vertical esa columna al alinearse en el canvas (ej: elementsSize vale 60 el elemento se insertara en el medio que seria 30) const posX = elementsSize * (colIndex + 1/2); const posY = elementsSize * (rowIndex + 1/2); //Solo le damos coordenadas a la posicion del jugador si aun no fueron dadas (si no fue definida en x no hace falta verificar que no haya sido definida en y ya que siempre se definen las dos) if (col == 'O' && playerPosition.x == undefined) { playerPosition.x = posX playerPosition.y = posY } //Llenamos en nuestro canvas con cada iteracion game.fillText(emoji, posX, posY) }); }); //Version for del forEach de arriba // for (let row = 1; row <= 10; row++) { // for (let col = 1; col <= 10; col++) { // game.fillText(emojis[mapRowCols[row -1][col - 1]], elementsSize * (col - 1/2), elementsSize * (row - 1/2)); // } // } //Solo insertamos al jugador en el canvas si aun no fue insertado if (playerPosition.x || playerPosition.y == undefined) { movePlayer() } } function movePlayer() { game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y); } function resizeCanvas () { windowHeight = window.innerHeight * 0.8 windowWidth = window.innerWidth * 0.8 //Dependiendo del tamaño de la pantalla, va a colocar el tamaño cuadrado del canvas //Al dividir entre 10 y luego aproximar el valor a un entero garantiza que el canvas será un entero múltiplo de 10. Finalmente se multiplica la expresión por 10 para obtener el dato real del canvas if (window.innerHeight > window.innerWidth) { if ((windowWidth % 10) !== 0) { canvasSize = Math.ceil(windowWidth / 10) * 10; } else { canvasSize = windowWidth; }} else { if ((windowHeight % 10) !== 0) { canvasSize = Math.ceil(windowHeight / 10) * 10; } else { canvasSize = windowHeight; } } canvas.setAttribute('width', canvasSize); canvas.setAttribute('height', canvasSize); elementsSize = (canvasSize / 10); startGame() }
Le damos movimiento al jugador
window.addEventListener('keydown', moveByKeys); buttons.up.addEventListener('click', moveUp); buttons.left.addEventListener('click', moveLeft); buttons.right.addEventListener('click', moveRight); buttons.down.addEventListener('click', moveDown); function moveByKeys(event) { if (event.key == 'ArrowUp') moveUp(); else if (event.key == 'ArrowLeft') moveLeft(); else if (event.key == 'ArrowRight') moveRight(); else if (event.key == 'ArrowDown') moveDown(); } function moveUp() { console.log('Me quiero mover hacia arriba'); playerPosition.y -= elementsSize; //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada y if (playerPosition.y < 0) { playerPosition.y = elementsSize * 1/2; } game.clearRect(0, 0, canvasSize, canvasSize) startGame() movePlayer(); } function moveLeft() { console.log('Me quiero mover hacia izquierda'); playerPosition.x -= elementsSize; //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada x if (playerPosition.x < 0) { playerPosition.x = elementsSize * 1/2; } game.clearRect(0, 0, canvasSize, canvasSize) startGame() movePlayer(); } function moveRight() { console.log('Me quiero mover hacia derecha'); playerPosition.x += elementsSize; //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada x if (playerPosition.x > canvasSize) { playerPosition.x = canvasSize - elementsSize * 1/2; } game.clearRect(0, 0, canvasSize, canvasSize) startGame() movePlayer(); } function moveDown() { console.log('Me quiero mover hacia abajo'); playerPosition.y += elementsSize; //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada y if (playerPosition.y > canvasSize) { playerPosition.y = canvasSize - elementsSize * 1/2; } game.clearRect(0, 0, canvasSize, canvasSize) startGame() movePlayer(); }
bien hecho
Solucion:
function clearMap(){ game.clearRect(0, 0, canvasSize, canvasSize) }
function startGame() { clearMap(); // tamaño elementos game.font = (elementsSize - 6) + 'px Verdana'; game.textAlign = "end"; const map = maps[0]; // obtener arreglo de caracteres individuales const mapRowCols = map.trim().split('\n').map(row => row.trim().split('')); // index: obtener posiciones mapRowCols.forEach((row, rowIndex) => { row.forEach((col, colIndex) => { if (col == 'O' && playerPosition.x == undefined && playerPosition.y == undefined) { playerPosition.x = elementsSize * (colIndex + 1); playerPosition.y = elementsSize * (rowIndex + 1); console.log(playerPosition); } game.fillText(emojis[col], elementsSize * (colIndex + 1), elementsSize * (rowIndex + 1)); }); }); movePlayer(); }
upButton.addEventListener('click', function() { mover('arriba'); playerPosition.y-=elementsSize; startGame()
para limpiar el mapa hice una funcion que borrara el mapa
function clearmap(){ game.clearRect(0,0, canvasSize, canvasSize) }
pero después de borrar todo debía volver a renderizar el mapa asi que cree otra función que lo hiciera
function renderMap(){ const map = maps[0]; const mapRows = map.trim().split('\n'); const mapRowCols = mapRows.map(row => row.trim().split('')); console.log({map,mapRows, mapRowCols}); mapRowCols.forEach((row, rowI) => { row.forEach((col,colI) => { emoji = emojis[col]; const posX = (elementSize*(colI+1))+10; const posY = (elementSize*(rowI+1))-5; game.fillText(emoji,posX,posY); }); }); }
y después la inserte en los movimientos
function moverArriba(){ console.log('moverarriba'); clearmap() playerPosition.y -= elementSize renderMap(); movePlayer(); }```
Mi respuesta:
++1. Situación a resolver.- renderizar al personaje.++
const map={ lvl:0, playerPosition:{ x:undefined, y:undefined, render:function(){ game.fillText(emojis["PLAYER"],this.y,this.x) } }, render:function () { if(this.lvl>=maps.length){ return console.log ("Ese mapa no existe") } const Map = maps[this.lvl].match(/[IXO\-]+/g) .map(a => a.split("")) game.clearRect(0, 0, canvasSize, canvasSize) game.font = canvasElement + "px Verdana" game.textAlign = "end" Map.forEach((x, xi) => { x.forEach((y, yi) => { const posX = canvasElement * (xi + 1) const posY = canvasElement * (yi + 1) game.fillText(emojis[y], posY, posX) if(this.playerPosition.x===undefined && this.playerPosition.y===undefined){ if(y==="O"){ this.playerPosition.x=posX this.playerPosition.y=posY } } }) }) } }
De esta manera, si quisiera solo llamar el renderizado de mi player sería así
map.playerPosition.render()
entonces en mi función que inicia el juego quedaría así
function startGame() { map.lvl=2 map.render() map.playerPosition.render() }
Con esto ya resolví mi primera situación
++2. Situación.- Mover el personaje++ Pues como en mi objeto ya había creado la función que renderiza mi personaje, entonces lo que hice fue; llamar esa función dentro de las funciones que generan el movimiento
function moveUp() { console.log(map.playerPosition) map.playerPosition.x-=canvasElement map.playerPosition.render() } function moveLeft(event) { console.log(map.playerPosition) map.playerPosition.y-=canvasElement map.playerPosition.render() } function moveRight(event) { console.log(map.playerPosition) map.playerPosition.y+=canvasElement map.playerPosition.render() } function moveDown(event) { console.log(map.playerPosition) map.playerPosition.x+=canvasElement map.playerPosition.render() }
Logrando el movimiento, y también así surge la siguiente situación a resolver
++3. Situación.- El player se está renderizando sin borrar su posición anterior++ Entonces a partir de eso buscando soluciones. 1ro intente solo renderizar el mapa, antes que renderice el player, dentro de las funciones de movimiento Algo así
function moveUp() { console.log(map.playerPosition) map.playerPosition.x-=canvasElement map.render() map.playerPosition.render() }
Pero el problema que había con eso, es que la función que renderiza todo el mapa, también le da su posición inicial al player. Para resolverlo, dentro de la función render del mapa, agregue una condición, que dice; solo me vas a agregar la posición inicial di mi player, si su posición inicial aún no está definida.
De esta manera siempre dibujará el mapa, y el player en su nueva posición
if(this.playerPosition.x===undefined && this.playerPosition.y===undefined){ if(y==="O"){ this.playerPosition.x=posX this.playerPosition.y=posY } } })
Con esto ya logre que se mueva y que dibuje el mapa, sin embargo, cuando hacía eso, simplemente estaba renderizando un mapa encima del otro, sin borrar el anterior, entonces, me quedaba así
++4. situación.- Borrar el mapa anterior++ Esta parte la verdad me hizo pensar un poco, porque no recordaba el metodo clearRect() que vimos en las primeras clases.
game.clearRect(0, 0, canvasSize, canvasSize)
Toda la función render quedo así,
render:function () { if(this.lvl>=maps.length){ return console.log ("Ese mapa no existe") } const Map = maps[this.lvl].match(/[IXO\-]+/g) .map(a => a.split("")) game.clearRect(0, 0, canvasSize, canvasSize) game.font = canvasElement + "px Verdana" game.textAlign = "end" Map.forEach((x, xi) => { x.forEach((y, yi) => { const posX = canvasElement * (xi + 1) const posY = canvasElement * (yi + 1) game.fillText(emojis[y], posY, posX) if(this.playerPosition.x===undefined && this.playerPosition.y===undefined){ if(y==="O"){ this.playerPosition.x=posX this.playerPosition.y=posY } } }) }) }
Logrando que el player se mueva libre y salvaje por la vida, sin miedo a nada.
Espero le sirva alguien, porque creo q me demore más escribiendo esto que resolviendo el reto juejuejue
const canvas = document.querySelector('#game__layout'); const game = canvas.getContext('2d'); const up = document.querySelector('#up'); const left = document.querySelector('#left'); const right = document.querySelector('#right'); const down = document.querySelector('#down'); //variables globales let canvasSize; let elemtSize; const playerPos = { x: undefined, y: undefined, }; //addEventListener window.addEventListener('load', setCanvaSize); window.addEventListener('resize', setCanvaSize); window.addEventListener('keydown', pressArrow); up.addEventListener('click', moveUp); left.addEventListener('click', moveLeft); right.addEventListener('click', moveRight); down.addEventListener('click', moveDown); //funcion que establece la dimension del canvas function setCanvaSize(){ if(window.innerWidth>window.innerHeight){ canvasSize = window.innerHeight * 0.8; }else{ canvasSize=window.innerWidth * 0.8; } canvas.setAttribute('width',canvasSize); canvas.setAttribute('height', canvasSize); elemtSize = canvasSize /10; startGame(); } function startGame(){ game.font = elemtSize + 'px Verdana'; game.textAlign = 'end'; const map = maps[0]; const mapRow = map.trim().split('\n'); const mapRowCol = mapRow.map(row => row.trim().split('')); mapRowCol.forEach((row, x)=>{ row.forEach((column, y)=>{ const emoji=emojis[column] const posX = elemtSize*(y+1)+10; const posY = elemtSize*(x+1)-10; game.fillText(emoji,posX ,posY); if(column=='O'){ playerPos.x = posX; playerPos.y = posY; } }) }); movePlayer(); } function movePlayer(){ game.fillText(emojis['PLAYER'], playerPos.x, playerPos.y) console.log({playerPos}) } //funciones para el movimiento function moveUp(){ console.log('arriba') playerPos.y -= elemtSize; game.fillText(emojis['PLAYER'], playerPos.x, playerPos.y) console.log({playerPos}) } function moveLeft(){ console.log('izquierda') } function moveRight(){ console.log('derecha') } function moveDown(){ console.log('abajo') } // funcion para el movimiento con las flechas function pressArrow(event){ switch (event.key){ case 'ArrowUp': moveUp(); break; case 'ArrowLeft': moveLeft(); break; case 'ArrowRight': moveRight(); break; case 'ArrowDown': moveDown(); break; } }
Le agregue al if la condición playerPosition.x == undefined)
function startGame() { game.font = elementsSize + "px verdana" game.textAlign = "end" let map = maps[0]; let mapRows = map.trim().split("\n") let mapRowCols = mapRows.map(row => row.trim().split('')); mapRowCols.forEach((row, rowI) => { row.forEach((col, colI) =>{ let emoji = emojis[col]; let posX = elementsSize * (colI + 1) let posY = elementsSize * (rowI + 1) if (col == "O" && playerPosition.x == undefined) { playerPosition.x = posX playerPosition.y = posY } game.fillText(emoji, posX, posY) } )}); mostarJugador(); } }
y además a cada función para mover al personaje le agregue un clearRect y volví a llamar la función startGame(), y funciona, quizás se pueda hacer de una mejor forma, pero funciona jajajajaja
function arriba() { playerPosition.y -= elementsSize; game.clearRect(0, 0, canvasSize, canvasSize) mostarJugador() startGame() }```
Mi solución:
const canvas = document.querySelector("#game"); const context = canvas.getContext("2d"); const btnLeft = document.querySelector("#left"); const btnUp = document.querySelector("#up"); const btnRight = document.querySelector("#right"); const btnDown = document.querySelector("#down"); window.addEventListener("load", setCanvasSize); window.addEventListener("resize", setCanvasSize); let canvasSize; let elementsSize; const playerPosition = { x: undefined, y: undefined, }; function startGame() { delMap(); context.textAlign = "end"; context.font = elementsSize + "px Verdana"; const map = maps[0]; const cleanMap = map.trim().split("\n"); const matrixMap = cleanMap.map((row) => row.trim().split("")); matrixMap.forEach((row, rowP) => { row.forEach((col, colP) => { let posX = elementsSize * (colP + 1); let posY = elementsSize * (rowP + 1); if ( col == "O" && playerPosition.x == undefined && playerPosition.y == undefined ) { playerPosition.x = posX; playerPosition.y = posY; } context.fillText(emojis[col], posX, posY); }); }); movePlayer(); } function movePlayer() { context.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y); } function delMap() { context.clearRect(0, 0, canvasSize, canvasSize); } // context.fillRect(100, 100, 1, 1); // context.clearRect(50, 0, 100, 50); // context.font = "30px Cabin"; // context.fillStyle = "green"; // context.textAlign = "center"; // context.fillText("Fabio", 100, 100); function setCanvasSize() { canvasSize; if (window.innerWidth >= window.innerHeight) { canvasSize = innerHeight * 0.8; } else { canvasSize = innerWidth * 0.8; } canvas.setAttribute("width", canvasSize); canvas.setAttribute("height", canvasSize); elementsSize = canvasSize * 0.1; startGame(); } window.addEventListener("keydown", moveByKeys); btnLeft.addEventListener("click", moveLeft); btnUp.addEventListener("click", moveUp); btnRight.addEventListener("click", moveRight); btnDown.addEventListener("click", moveDown); function moveByKeys(event) { const tecla = event.key; switch (tecla) { case "ArrowLeft": moveLeft(); break; case "ArrowUp": moveUp(); break; case "ArrowRight": moveRight(); break; case "ArrowDown": moveDown(); break; default: break; } } function moveLeft() { playerPosition.x -= elementsSize; startGame(); } function moveUp() { playerPosition.y -= elementsSize; startGame(); } function moveRight() { playerPosition.x += elementsSize; startGame(); } function moveDown() { playerPosition.y += elementsSize; startGame(); }
Por fuera de la función startGame():
let indicator = true;
Dentro de la parte del render del player en la funcion startGame():
if (col == 'O' && indicator == true) { playerPos.x = posX; playerPos.y = posY; indicator = false; //indicator's value gets changed to make the render of the player inaccesible in the future }
Luego usando esta función:
function clearGame() { game.clearRect(0, 0, canvasSize, canvasSize); //using this function to render the game each time the player moves }
Finalmente en cada función de movimiento le agrego esta secuencia para que limpie el mapa, cambie de posición el jugador, renderice el mapa nuevamente y aparezca el jugador con la función movePlayer():
function buttonUP() { clearGame(); playerPos.y -= elementSize; startGame(); movePlayer(); //at each move we clear the game, change the position of the player, render the game without the player and then make the player appear with the new position }
se me ha complicado un poco la verdad desconozco mucho de los métodos del canvas eso me ha limitado un poquito ya que no encuentro la forma de como limpiar la pantalla sin la necesidad de recurrir a la llamada de los eventos en fin mi problema por haber me pasado aquí sin haber aprendido js XD
const canvas = document.querySelector('#game'); const juego = canvas.getContext('2d'); window.addEventListener('load', redimencionar); window.addEventListener('resize', redimencionar); window.addEventListener('keydown',keyMov); const btnArriba = document.querySelector('#arriba'); const btnAbajo = document.querySelector('#abajo'); const btnDer = document.querySelector('#derecha'); const btnIzq = document.querySelector('#izquierda'); btnArriba.addEventListener('click', movArriba); btnAbajo.addEventListener('click', movAbajo); btnDer.addEventListener('click', movDer); btnIzq.addEventListener('click', movIzq); let posicion_calavera = undefined; let nivel = 0; function redimencionar(){ const canvas_t = (window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight) *.75 ; canvas.setAttribute('width', canvas_t ); canvas.setAttribute('height', canvas_t ); juego.textAlign='end'; render(canvas_t / 10);} function render(size_t = 0){ juego.font = size_t - size_t / 10 +'px arial'; const arreglo = map[nivel].match(/[IOX-]/g); arreglo.forEach((char, idx) => { const y = (~~(idx/10) + 1) * size_t - size_t / 5; const x = (idx - (~~(idx/10) * 10) + 1) * size_t + size_t / 10; //juego.fillText(emojis[char], x, y ); if(char == 'O' && posicion_calavera == undefined) posicion_calavera = idx; if(posicion_calavera == idx) { if(char == 'X') char = 'BOMB_COLLISION'; else if(char == 'I') { nivel = nivel + 1 <= 2 ? ++nivel : 0; posicion_calavera = undefined; redimencionar(); return;} else char = 'PLAYER';} juego.fillText(emojis[char], x, y ); });} function keyMov(event){ switch(event.keyCode){ case 37: //izquierda movIzq(); break; case 38: //arriba movArriba(); break; case 39: //derecha movDer(); break; case 40: //abajo movAbajo(); break; default: break;}} function movArriba(){ const temp = posicion_calavera; posicion_calavera -= 10; if(posicion_calavera < 0) posicion_calavera = temp; redimencionar();} function movAbajo(){ const temp = posicion_calavera; posicion_calavera += 10; if(posicion_calavera >= 100) posicion_calavera = temp; redimencionar();} function movDer(){ const temp = posicion_calavera; const pered = (~~(posicion_calavera / 10)) *10 + 10; ++posicion_calavera; if(posicion_calavera >= pered) posicion_calavera = temp; redimencionar();} function movIzq(){ const temp = posicion_calavera; const pered = ~~(posicion_calavera /10) * 10; --posicion_calavera; if(posicion_calavera < pered) posicion_calavera = temp; redimencionar();}
Lo que hice fue pasar el dibujo del mapa a una función y crear una bander, que solo la primera vez me coloque la posicion incial de la calavera.
let flag = true; const drawMap = () => { mapRows.forEach((row, rowIndex) => { row.forEach((col, colIndex) => { const emoji = emojis[col]; const posX = elementsSize * (colIndex + 1) + 5; const posY = elementsSize * (rowIndex + 1) - 10; game.fillText(emoji, posX, posY); if (row[col] == "O" && flag) { playerPosition.x = posX; playerPosition.y = posY; flag = false; } } }); };
Y luego dentro de la funcion movePlayer, limpio el canvas, dibujo el mapa, y por ultimo dibujo la nueva posicion del Player.
const movePlayer = () => { game.clearRect(0, 0, canvasSize, canvasSize); drawMap(); game.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y); };
Asi voy, desde que inicie a hacer el codigo, desee tenerlo lo mas limpio posible, y no repetir muchas veces cada parte, de esta manera voy, si tienen algo que aconsejarme o algo que pueda mejorar estare muy agradecido:
const canvas = document.querySelector('#game'); const game = canvas.getContext('2d'); let canvasSize; let elementSize; const playerPosition = { x: undefined, y:undefined, }; const gameStart = { level: 0, render: function () { if (this.level >= maps.length) { return console.log("Ese mapa no existe") } const map = maps[this.level].match(/[IXO\-]+/g) .map(a => a.split("")) game.font = `${elementSize}px Verdana`; game.textAlign = 'center'; game.textBaseline = 'middle'; map.forEach((row, rowIndex) => { row.forEach((col,colIndex)=>{ const emoji = emojis[col]; const posX = elementSize * ((colIndex - 0.42) + 1); const posY = elementSize * ((rowIndex - 0.32) + 1); if (col == 'O') { playerPosition.x = posX; playerPosition.y = posY; } game.fillText(emoji, posX, posY); }); }); }, movePlayer: function () { game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y); } } window.addEventListener('load', setCanvasSize); window.addEventListener('resize', setCanvasSize); function setCanvasSize() { canvasSize = Math.min(window.innerWidth, window.innerHeight) * 0.7; canvas.setAttribute('width', canvasSize); canvas.setAttribute('height', canvasSize); elementSize = canvasSize / 10.20; startGame(); } function startGame() { gameStart.render() } // Mapeo entre teclas y direcciones const keyToDirection = { ArrowUp: 'up', ArrowLeft: 'left', ArrowDown: 'down', ArrowRight: 'right', w: 'up', a: 'left', s: 'down', d: 'right' }; const directionToButton = { up: document.querySelector('#up'), left: document.querySelector('#left'), down: document.querySelector('#down'), right: document.querySelector('#rigth'), }; Object.keys(directionToButton).forEach(direction => { directionToButton[direction].addEventListener('click', () => { move(direction); }); }); window.addEventListener('keydown', moveByKey); function moveByKey(event) { const direction = keyToDirection[event.key]; if (direction) { move(direction); } } function move(direction) { console.log(`Me muevo hacia ${direction}`); if (direction == 'up')playerPosition.y -= elementSize, gameStart.movePlayer(); else if(direction == 'left')playerPosition.x -= elementSize, gameStart.movePlayer(); else if(direction == 'right')playerPosition.x += elementSize, gameStart.movePlayer(); else if(direction == 'down')playerPosition.y += elementSize, gameStart.movePlayer(); }
Aquí pasa algo interesante que no si notaste. Pero te hago la siguiente pregunta: ¿Por qué puede modificar las propiedades del objeto si fue declarado con la palabra reservada const?
La respuesta esta en la misma pregunta ya que no estas modificando la variable o constante como tal, sino solo sus propiedades.
Quizás ya sabias la respuesta pero es algo curioso que tal vez te pueda confundir
game.js
const canvas = document.querySelector("#game"); const game = canvas.getContext("2d"); window.addEventListener("DOMContentLoaded", startGame); window.addEventListener("resize", setCanvasSize); // Obtener referencias a los botones const upButton = document.getElementById("up"); const leftButton = document.getElementById("left"); const rightButton = document.getElementById("right"); const downButton = document.getElementById("down"); // Agregar manejadores de eventos a los botones upButton.addEventListener("click", () => movePlayer("up")); leftButton.addEventListener("click", () => movePlayer("left")); rightButton.addEventListener("click", () => movePlayer("right")); downButton.addEventListener("click", () => movePlayer("down")); document.addEventListener("keydown", handleKeyDown); let playerPosition = { x: undefined, y: undefined, }; function handleKeyDown(event) { const key = event.key.toLowerCase(); let direction; switch (key) { case "arrowup": case "w": direction = "up"; break; case "arrowleft": case "a": direction = "left"; break; case "arrowright": case "d": direction = "right"; break; case "arrowdown": case "s": direction = "down"; break; default: return; } // Realizar alguna acción basada en la dirección detectada // Por ejemplo, llamar a una función para mover al jugador en esa dirección movePlayer(direction); } let elementsSize; let map; function startGame() { parseMap(); setCanvasSize(); } function movePlayer(direction) { // Realizar acciones según la dirección recibida switch (direction) { case "up": playerPosition.y -= 1; // Lógica para mover al jugador hacia arriba break; case "left": // Lógica para mover al jugador hacia la izquierda playerPosition.x -= 1; break; case "right": // Lógica para mover al jugador hacia la derecha playerPosition.x += 1; break; case "down": // Lógica para mover al jugador hacia abajo playerPosition.y += 1; break; default: return; } // Actualizar el juego, dibujar el mapa actualizado, etc. // ... drawMap(); } function setCanvasSize() { const canvasSize = Math.min(window.innerHeight, window.innerWidth) * 0.75; canvas.width = canvasSize; canvas.height = canvasSize; elementsSize = Math.floor(canvasSize / 10 - 1); game.font = `${elementsSize}px Verdana`; drawMap(); } function drawMap() { game.clearRect(0, 0, canvas.width, canvas.height); map.forEach((row, y) => { row.forEach((emoji, x) => { game.fillText(emoji, x * elementsSize, (y + 1) * elementsSize); if (emoji === "🚪") { if (playerPosition.x === undefined && playerPosition.y === undefined) { playerPosition = { x, y }; } // Utiliza object destructuring para simplificar la asignación de coordenadas game.fillText( emojis.PLAYER, playerPosition.x * elementsSize, (playerPosition.y + 1) * elementsSize ); // Utiliza la notación de puntos para acceder a las propiedades del objeto emojis } }); }); } function parseMap() { const mapString = maps[0].trim(); const lines = mapString.split("\n").map((line) => line.trim()); map = lines.map((line) => line.split("").map((symbol) => emojis[symbol])); }
yo puse que se re-imprimiera el mapa cada vez que cambiamos la posición del jugador, y en la misma función que renderiza el mapa puse una condicional en que la posición del jugador tiene que ser undefined para que se imprima dentro de dicha función
function moveRight(){ console.log('muevete hacia la derecha'); playerPosition.plx+=elementSize reprintThePlayer() startDrawing() } function reprintThePlayer(){ game.fillText(emojis['PLAYER'],playerPosition.plx,playerPosition.ply) }
Yo renderizaría de nuevo el mapa, pero no lo veo eficiente xd
Mi solución fue renderizar por cada movimiento el mapa en el canvas.
function movePlayer(){ //Eliminar posición anterior jugador por cada movimiento. game.clearRect(0,0,canvasSize,canvasSize);//borrar todo el contenido del canvas for (let i = 1; i <= 10; i++) { //volver a renderizar el mapa con la nueva posición del jugador for (let j = 1; j <= 10; j++) { game.fillText(emojis[mapRowCols[j-1][i-1]],elementsSize*i+5,elementsSize*j-15); } } game.fillText(emojis["PLAYER"],positionJugador.x+5,positionJugador.y-15);//imprimir al jugador }
Al inicio en la: function startGame() borre todo el canvas para ser renderizado con la nueva posicion de la calabera: playerPosition.x, playerPosition.y
game.clearRect(0, 0, canvas.width, canvas.height);