bernardodiasc/pegarato.html

## pegarato.html
<!DOCTYPE html>
<html>

    <head>
        <title>JOGO PEGA RATO</title>
        <style>
            html {
                height: 100%;
            }

            body {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                background-color: antiquewhite;
                font-family: sans-serif;
            }

            h1 {
                text-align: center;
            }

            #tabuleiro {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(5, 1fr);
                grid-column-gap: 5px;
                grid-row-gap: 5px;
            }

            .local {
                font-size: 40px;
                font-weight: bold;
                line-height: 1;
                color: white;
                background: cadetblue;
                height: 100px;
                width: 100px;
                padding: 2px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 5px;
            }

            .local::before {
                content: attr(data-id);
                font-size: 12px;
                position: absolute;
                top: 0;
                left: 0;
                background-color: salmon;
                padding: 3px 6px 3px 4px;
                border-radius: 0 0 5px 0;
                font-weight: normal;
            }

            #gato,
            .rato {
                font-family: monospace;
                font-size: 12px;
                white-space: pre;
            }

            #pontuacao {
                text-align: center;
                margin: 0 0 20px;
                height: 20px;
                font-size: 20px;
                line-height: 1;
            }

            #mensagem {
                margin: 0px 0 20px;
                padding: 30px 20px;
                background: salmon;
                border-radius: 10px;
                text-align: center;
                color: white;
                font-size: 20px;
                font-style: italic;
            }

        </style>
    </head>

    <body>
        <main>
            <h1>JOGO PEGA RATO</h1>
            <div id="pontuacao"></div>
            <div id="mensagem"></div>
            <div id="tabuleiro"></div>
        </main>

        <script>
            const DIFICULDADE = 3
            const $body = document.body
            const $pontuacao = $body.querySelector('#pontuacao')
            const $mensagem = $body.querySelector('#mensagem')
            const $tabuleiro = $body.querySelector('#tabuleiro')

            // <div data-id="25" class="local">
                const desenhoGato = `<span id="gato"> .       .
 |\\_---_/|
/   o_o   \\
|    U    |
\\  ._I_.  /
 \`-_____-'</span>`
            const desenhoRato = `<span class="rato">()-()
 \\"/
  \`</span>`

            const TECLAS = {
                CIMA: 38,
                BAIXO: 40,
                ESQUERDA: 37,
                DIREITA: 39,
                SPACE: 32
            }

            const MENSAGENS = [
                'Pegue todos os ratos...',
                'VOCE CONSEGUIU PEGAR TODOS OS RATOS!',
                'Ops, os ratos voltaram, pegue eles!'
            ]

            let jogadas = 0
            let pontos = 0
            let status = $mensagem.innerHTML = MENSAGENS[0]
            let gato

            function escrevePontuacao () {
                $pontuacao.innerHTML = `Jogada: ${jogadas} | Pontos: ${pontos} | Dificuldade: ${DIFICULDADE}`
            }

            function montaJogo () {
                jogadas = 0
                pontos = 0
                $mensagem.innerHTML = MENSAGENS[0]
                $tabuleiro.innerHTML = ''
                escrevePontuacao()
                const totalLocais = 25
                for (i = 1; i <= totalLocais; i++) {
                    const local = document.createElement('div')
                    local.innerHTML = desenhoRato
                    local.className = 'local'
                    local.dataset.id = String(i).padStart(2, '0')
                    $tabuleiro.appendChild(local)
                }

                const posicaoGato = Math.floor(Math.random() * totalLocais)
                const localGato = $tabuleiro.querySelector(`[data-id="${String(posicaoGato).padStart(2, '0')}"]`)
                localGato.innerHTML = desenhoGato
                gato = $body.querySelector('#gato')
            }

            montaJogo()

            function move (novaPosicao) {
                const novoLocal = $body.querySelector(`[data-id="${String(novaPosicao).padStart(2, '0')}"]`)

                gato.parentElement.innerHTML = ''
                if (novoLocal.innerHTML !== '') {
                    pontos = pontos + 1
                }

                novoLocal.innerHTML = ''
                novoLocal.appendChild(gato)

                const todosLocais = $body.querySelectorAll('.local')
                const locaisVazios = []

                todosLocais.forEach(local => {
                    if (local.innerHTML.trim() === '') {
                        locaisVazios.push(local)
                    }
                })

                const novoRato = Math.floor(Math.random() * locaisVazios.length)

                if (jogadas > 0 && jogadas % DIFICULDADE === 0) {
                    locaisVazios[novoRato].innerHTML = desenhoRato
                    locaisVazios.splice(novoRato, 1)
                }

                if (locaisVazios.length === (todosLocais.length - 1)) {
                    $mensagem.innerHTML = status = MENSAGENS[1]
                } else {
                    if (status === MENSAGENS[1]) {
                        $mensagem.innerHTML = status = MENSAGENS[2]
                    }
                }
            }

            function mover (e) {
                e = e || window.event

                const allowed = [TECLAS.CIMA, TECLAS.BAIXO, TECLAS.ESQUERDA, TECLAS.DIREITA, TECLAS.SPACE]
                if (!allowed.some(i => String(i) === String(e.keyCode))) {
                    return
                }

                let posicaoAtual
                let novaPosicao

                if (e.keyCode === TECLAS.CIMA) {
                    posicaoAtual = Number(gato.parentElement.dataset.id)
                    novaPosicao = posicaoAtual > 5 ? posicaoAtual - 5 : posicaoAtual + 20
                    move(novaPosicao)
                }

                if (e.keyCode === TECLAS.BAIXO) {
                    posicaoAtual = Number(gato.parentElement.dataset.id)
                    novaPosicao = posicaoAtual < 21 ? posicaoAtual + 5 : posicaoAtual - 20
                    move(novaPosicao)
                }

                if (e.keyCode === TECLAS.ESQUERDA) {
                    posicaoAtual = Number(gato.parentElement.dataset.id)
                    novaPosicao = posicaoAtual % 5 !== 1 ? posicaoAtual - 1 : posicaoAtual + 4
                    move(novaPosicao)
                }

                if (e.keyCode === TECLAS.DIREITA) {
                    posicaoAtual = Number(gato.parentElement.dataset.id)
                    novaPosicao = posicaoAtual % 5 !== 0 ? posicaoAtual + 1 : posicaoAtual - 4
                    move(novaPosicao)
                }

                if (e.keyCode === TECLAS.SPACE) {
                    montaJogo()
                }

                if (posicaoAtual === novaPosicao) {
                    return
                }

                jogadas = jogadas + 1
                escrevePontuacao()
            }

            document.onkeydown = mover
        </script>
    </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>JOGO PEGA RATO</title>
	<style>
	html {
	height: 100%;
	}

	body {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	background-color: antiquewhite;
	font-family: sans-serif;
	}

	h1 {
	text-align: center;
	}

	#tabuleiro {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	}

	.local {
	font-size: 40px;
	font-weight: bold;
	line-height: 1;
	color: white;
	background: cadetblue;
	height: 100px;
	width: 100px;
	padding: 2px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	}

	.local::before {
	content: attr(data-id);
	font-size: 12px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: salmon;
	padding: 3px 6px 3px 4px;
	border-radius: 0 0 5px 0;
	font-weight: normal;
	}

	#gato,
	.rato {
	font-family: monospace;
	font-size: 12px;
	white-space: pre;
	}

	#pontuacao {
	text-align: center;
	margin: 0 0 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	}

	#mensagem {
	margin: 0px 0 20px;
	padding: 30px 20px;
	background: salmon;
	border-radius: 10px;
	text-align: center;
	color: white;
	font-size: 20px;
	font-style: italic;
	}

	</style>
	</head>

	<body>
	<main>
	<h1>JOGO PEGA RATO</h1>
	<div id="pontuacao"></div>
	<div id="mensagem"></div>
	<div id="tabuleiro"></div>
	</main>

	<script>
	const DIFICULDADE = 3
	const $body = document.body
	const $pontuacao = $body.querySelector('#pontuacao')
	const $mensagem = $body.querySelector('#mensagem')
	const $tabuleiro = $body.querySelector('#tabuleiro')

	// <div data-id="25" class="local">
	const desenhoGato = `<span id="gato"> . .
	\|\\_---_/\|
	/ o_o \\
	\| U \|
	\\ ._I_. /
	\`-_____-'</span>`
	const desenhoRato = `<span class="rato">()-()
	\\"/
	\`</span>`

	const TECLAS = {
	CIMA: 38,
	BAIXO: 40,
	ESQUERDA: 37,
	DIREITA: 39,
	SPACE: 32
	}

	const MENSAGENS = [
	'Pegue todos os ratos...',
	'VOCE CONSEGUIU PEGAR TODOS OS RATOS!',
	'Ops, os ratos voltaram, pegue eles!'
	]

	let jogadas = 0
	let pontos = 0
	let status = $mensagem.innerHTML = MENSAGENS[0]
	let gato

	function escrevePontuacao () {
	$pontuacao.innerHTML = `Jogada: ${jogadas} \| Pontos: ${pontos} \| Dificuldade: ${DIFICULDADE}`
	}

	function montaJogo () {
	jogadas = 0
	pontos = 0
	$mensagem.innerHTML = MENSAGENS[0]
	$tabuleiro.innerHTML = ''
	escrevePontuacao()
	const totalLocais = 25
	for (i = 1; i <= totalLocais; i++) {
	const local = document.createElement('div')
	local.innerHTML = desenhoRato
	local.className = 'local'
	local.dataset.id = String(i).padStart(2, '0')
	$tabuleiro.appendChild(local)
	}

	const posicaoGato = Math.floor(Math.random() * totalLocais)
	const localGato = $tabuleiro.querySelector(`[data-id="${String(posicaoGato).padStart(2, '0')}"]`)
	localGato.innerHTML = desenhoGato
	gato = $body.querySelector('#gato')
	}

	montaJogo()

	function move (novaPosicao) {
	const novoLocal = $body.querySelector(`[data-id="${String(novaPosicao).padStart(2, '0')}"]`)

	gato.parentElement.innerHTML = ''
	if (novoLocal.innerHTML !== '') {
	pontos = pontos + 1
	}

	novoLocal.innerHTML = ''
	novoLocal.appendChild(gato)

	const todosLocais = $body.querySelectorAll('.local')
	const locaisVazios = []

	todosLocais.forEach(local => {
	if (local.innerHTML.trim() === '') {
	locaisVazios.push(local)
	}
	})

	const novoRato = Math.floor(Math.random() * locaisVazios.length)

	if (jogadas > 0 && jogadas % DIFICULDADE === 0) {
	locaisVazios[novoRato].innerHTML = desenhoRato
	locaisVazios.splice(novoRato, 1)
	}

	if (locaisVazios.length === (todosLocais.length - 1)) {
	$mensagem.innerHTML = status = MENSAGENS[1]
	} else {
	if (status === MENSAGENS[1]) {
	$mensagem.innerHTML = status = MENSAGENS[2]
	}
	}
	}

	function mover (e) {
	e = e \|\| window.event

	const allowed = [TECLAS.CIMA, TECLAS.BAIXO, TECLAS.ESQUERDA, TECLAS.DIREITA, TECLAS.SPACE]
	if (!allowed.some(i => String(i) === String(e.keyCode))) {
	return
	}

	let posicaoAtual
	let novaPosicao

	if (e.keyCode === TECLAS.CIMA) {
	posicaoAtual = Number(gato.parentElement.dataset.id)
	novaPosicao = posicaoAtual > 5 ? posicaoAtual - 5 : posicaoAtual + 20
	move(novaPosicao)
	}

	if (e.keyCode === TECLAS.BAIXO) {
	posicaoAtual = Number(gato.parentElement.dataset.id)
	novaPosicao = posicaoAtual < 21 ? posicaoAtual + 5 : posicaoAtual - 20
	move(novaPosicao)
	}

	if (e.keyCode === TECLAS.ESQUERDA) {
	posicaoAtual = Number(gato.parentElement.dataset.id)
	novaPosicao = posicaoAtual % 5 !== 1 ? posicaoAtual - 1 : posicaoAtual + 4
	move(novaPosicao)
	}

	if (e.keyCode === TECLAS.DIREITA) {
	posicaoAtual = Number(gato.parentElement.dataset.id)
	novaPosicao = posicaoAtual % 5 !== 0 ? posicaoAtual + 1 : posicaoAtual - 4
	move(novaPosicao)
	}

	if (e.keyCode === TECLAS.SPACE) {
	montaJogo()
	}

	if (posicaoAtual === novaPosicao) {
	return
	}

	jogadas = jogadas + 1
	escrevePontuacao()
	}

	document.onkeydown = mover
	</script>
	</body>

	</html>