rodolfoghi/caca-fantasma05.html

## caca-fantasma05.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Caça fantasmas</title>
    <style>
        #palco {
            /* Nosso palco ocupará 80% da largura e 80% da altura da tela. */
            width: 80%;
            height: 80vh;
            /* Define a imagem a ser utilizada como pano de fundo. */
            background-image: url('floresta.png');
            /* A imagem  deve cobrir a div inteira, tanto em altura como em largura. */
            background-size: cover;
            background-repeat: no-repeat;
            /* Margens superior e inferior zero e direita e esquerda automática, para que fique centralizado. */
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="palco">
        <img src="fantasma1.svg" alt="Fantasma número 1" id="fantasma1">
    </div>

    <script>
        /**
         * Pega a imagem com id fantasma1 e salva em uma variável
         * para que seja possível manipularmos com JavaScript.
         */
        const $fantasma1 = document.getElementById("fantasma1");

        // Esconde a imagem fantasma1.
        function esconda() {
            $fantasma1.style.display = "none";
        }

        // Mostra a imagem fantasma1.
        function mostre() {
            $fantasma1.style.display = "";
        }

        // Função principal do jogo.
        function jogo() {
            if ($fantasma1.style.display == "none") {
                mostre();
            } else {
                esconda();
            }
        }

        // Define o intervalo de repetição em milissegundos.
        setInterval(jogo, 1000);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Caça fantasmas</title>
	<style>
	#palco {
	/* Nosso palco ocupará 80% da largura e 80% da altura da tela. */
	width: 80%;
	height: 80vh;
	/* Define a imagem a ser utilizada como pano de fundo. */
	background-image: url('floresta.png');
	/* A imagem deve cobrir a div inteira, tanto em altura como em largura. */
	background-size: cover;
	background-repeat: no-repeat;
	/* Margens superior e inferior zero e direita e esquerda automática, para que fique centralizado. */
	margin: 0 auto;
	}
	</style>
	</head>

	<body>
	<div id="palco">
	<img src="fantasma1.svg" alt="Fantasma número 1" id="fantasma1">
	</div>

	<script>
	/**
	* Pega a imagem com id fantasma1 e salva em uma variável
	* para que seja possível manipularmos com JavaScript.
	*/
	const $fantasma1 = document.getElementById("fantasma1");

	// Esconde a imagem fantasma1.
	function esconda() {
	$fantasma1.style.display = "none";
	}

	// Mostra a imagem fantasma1.
	function mostre() {
	$fantasma1.style.display = "";
	}

	// Função principal do jogo.
	function jogo() {
	if ($fantasma1.style.display == "none") {
	mostre();
	} else {
	esconda();
	}
	}

	// Define o intervalo de repetição em milissegundos.
	setInterval(jogo, 1000);
	</script>
	</body>

	</html>