Pantalla Juego html5

Programar tu juego en HTML5 y JS con un poquito de CSS simple. Vamos a jugar un poco programando en HTML5 y vamos a darle un poco de sentido animación con JavaScript y para darle vistosidad vamos a darle algo de CSS. Vais a ver como con unas pocas líneas vamos a dejar una pantalla muy vistosa y un ratito vamos a poder jugarlo ¿Os parece? Animaros a probarlo solo vais a necesitar un navegador y un editor de texto.

Vamos a crear la siguiente estructura en una carpeta con el nombre que nosotros queramos vamos a crear los siguientes ficheros y una carpeta para las imágenes:

  • index.html
  • app.js
  • style.css
  • images(carpeta)

Dentro del fichero index.html escribiremos el siguiente código:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Juego de Memoria</title>
    <link rel="stylesheet" href="style.css"></link>
    <script src="app.js" charset="utf-8"></script>
</head>

<body>

    <h3>Puntuación: <span id="result"></span></h3>

    <div id="grid" class="grid">
    </div>
    <div id="play"></div>

</body>

</html>

Para programar tu juego en HTML5 y JS en el fichero identificaremos el lenguaje de nuestra página (<html lang=»es»>) y dentro del head estableceremos la codificación de caracteres (<meta charset=»UTF-8″>) y conectaremos nuestro fichero con nuestra hoja de estilos(<link rel=»stylesheet» href=»style.css»></link>) y nuestro fichero javascript(<script src=»app.js» charset=»utf-8″></script>) y dentro del body crearemos un h3 con un span dentro este último con id=result y dos div uno con id= grid y class=grid y otro con id=play y en este mostraremos el resultado de la jugada seleccionada.

Ahora daremos estilos a nuestro HTML desde nuestra hoja de estilos con el siguiente código:

body {
    text-align: center;
    background-image: url('./images/background.svg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.grid {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 400px;
    height: 300px;
}

.element {
    margin: 4px;
    max-width: 100px;
    max-height: 100px;
    min-width: 100px;
    min-height: 100px;
    align-self: center;
    justify-self: center;
}

.bordered {
    border: 3px solid white;
}

#play {
    margin-top: 2em;
    font-size: 1.2em;
}

.error {
    color: crimson;
}

Lo único a destacar en estas líneas es la línea:

background-image: url('./images/background.svg');

Con esta línea seleccionamos la imagen que pondremos de fondo de nuestro juego y estará en la carpeta ‘./images’ que habremos creado anteriormente. En esta carpeta tendremos que poner las imágenes seleccionadas para nuestro tablero, en este caso serán 6 imágenes para las parejas, 1 imagen para el dorso de las cartas, 1 imagen para el fondo cuando eliminemos la carta y otro para el background. Al final del artículo os dejaré un enlace para que descarguéis los usados en este ejemplo.

Ahora viene lo interesante de programar tu juego en HTML5 y JS. El javascript es lo que le da a nuestro juego la interactividad. Veréis que sencillo y que útil el código que os escribo a continuación:

document.addEventListener('DOMContentLoaded', () => {

    const grid = document.getElementById('grid')
    const resultDisplay = document.getElementById('result')
    const play = document.getElementById('play')

    let cardsChosen = []
    let cardsChosenId = []
    const cardsWon = []

    //card options
    const cardArray = [{
            name: 'elefante',
            img: 'images/elefante.svg'
        },
        {
            name: 'gato',
            img: 'images/gato.svg'
        },
        {
            name: 'mariposa',
            img: 'images/mariposa.svg'
        },
        {
            name: 'pajaro',
            img: 'images/pajaro.svg'
        },
        {
            name: 'vaca',
            img: 'images/vaca.svg'
        },
        {
            name: 'cebra',
            img: 'images/cebra.svg'
        },
        {
            name: 'elefante',
            img: 'images/elefante.svg'
        },
        {
            name: 'gato',
            img: 'images/gato.svg'
        },
        {
            name: 'mariposa',
            img: 'images/mariposa.svg'
        },
        {
            name: 'pajaro',
            img: 'images/pajaro.svg'
        },
        {
            name: 'vaca',
            img: 'images/vaca.svg'
        },
        {
            name: 'cebra',
            img: 'images/cebra.svg'
        }
    ]

    cardArray.sort(() => 0.5 - Math.random())

    //create your board
    function createBoard() {
        for (let i = 0; i < cardArray.length; i++) {
            let card = document.createElement('img')
            card.setAttribute('src', 'images/Fondo.svg')
            card.setAttribute('data-id', i)
            card.addEventListener('click', flipCard)
            card.classList.add('element')
            grid.appendChild(card)
        }
    }

    //check for matches
    function checkForMatch() {
        let cards = document.querySelectorAll('img')
        const optionOneId = cardsChosenId[0]
        const optionTwoId = cardsChosenId[1]

        if (optionOneId == optionTwoId) {
            cards[optionOneId].setAttribute('src', 'images/Fondo.svg')
            cards[optionTwoId].setAttribute('src', 'images/Fondo.svg')
            play.innerHTML = 'Has hecho click en la misma imagen.'
            play.classList.add('error')
                //alert('You have clicked the same image!')
        } else if (cardsChosen[0] === cardsChosen[1]) {
            play.innerHTML = 'Has encontrado una pareja.'
            play.classList.remove('error')
                //alert('You found a match')
            cards[optionOneId].setAttribute('src', 'images/void.svg')
            cards[optionTwoId].setAttribute('src', 'images/void.svg')
            cards[optionOneId].classList.remove('bordered')
            cards[optionTwoId].classList.remove('bordered')
            cards[optionOneId].removeEventListener('click', flipCard)
            cards[optionTwoId].removeEventListener('click', flipCard)
            cardsWon.push(cardsChosen)
        } else {
            cards[optionOneId].setAttribute('src', 'images/Fondo.svg')
            cards[optionTwoId].setAttribute('src', 'images/Fondo.svg')
            cards[optionOneId].classList.remove('bordered')
            cards[optionTwoId].classList.remove('bordered')
            play.innerHTML = 'Parece que no eran iguales.'
            play.classList.add('error')
                //alert('Sorry, try again')
        }
        cardsChosen = []
        cardsChosenId = []
        resultDisplay.textContent = cardsWon.length
        if (cardsWon.length === cardArray.length / 2) {
            play.innerHTML = ''
            resultDisplay.textContent = '¡Enhorabuena! ¡Los emparejastes a todos!'
        }
    }

    //flip your card
    function flipCard() {
        let cardId = this.getAttribute('data-id')
        cardsChosen.push(cardArray[cardId].name)
        cardsChosenId.push(cardId)
        this.setAttribute('src', cardArray[cardId].img)
        if (cardsChosen.length === 2) {
            setTimeout(checkForMatch, 500)
        }
        this.classList.add('bordered')

    }

    createBoard()
})

Primero esperamos a que el DOM este completamente cargado. Después definimos las constantes que utilizaremos en nuestro código, entre ellas el array de las cartas. Las reordenaremos posteriormente con tres funciones una para montar el tablero, otra para comprobar las parejas y otra para girar la carta. Por último llamaremos a nuestra función y listo, tenemos nuestro juego funcionando. ¿Te ha gustado? ¿Tienes alguna duda del código? En nuestro canal de youtube tenéis el video de como hacer el juego y el resultado final aquí os dejo el enlace.

Y recuerda si quieres estar al tanto de los últimos posts sigue al conejito blanco.

Sigue al conejito
Suscríbete al boletín y estarás informado !

Programar tu juego en html5 y JS

Navegación de la entrada


Deja un comentario

Plugin the Cookies para Wordpress por Real Cookie Banner