Introducción
Programemos un juego con JavaScript
Canvas
¿Qué es canvas en JavaScript?
Tamaño del canvas y sus elementos
Canvas responsive
Mapa del juego
¿Qué es un array bidimensional?
Arreglos multidimensionales en JavaScript
Refactor del mapa de juego
Movimientos del jugador
Eventos y botones
Objeto playerPosition
Limpieza de movimientos
No te salgas del mapa
Colisiones
Detectando colisiones fijas
Detectando colisiones con arrays
Victoria: subiendo de nivel
Derrota: perdiendo vidas
Bonus: adictividad
Sistema de vidas y corazones
Sistema de tiempo y puntajes
¿Qué es localStorage?
Guardando records del jugador
Deploy
Depurando errores del juego
Desplegando el juego a GitHub Pages
Próximos pasos
Reto: reinicio del juego
Reto: timeouts de victoria o derrota
¿Quieres un simulador laboral?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 20
Preguntas 0
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
Yo lo suluciné creando una función que limpia el mapa con un clearRect de esquina a esquina y separando el renderizado del mapa. Así primero limpio el mapa, luego cambio la posición del jugador, luego renderizo el mapa y al final renderizo el jugador.
let moves = 0;
// la incializamos en 0
// incluso nos puede ayudar para mas en el futuro
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
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();
}
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ónplayerPosition.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);
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?