Click here for free DL of the app version that can save data.

No:32979

Faça um jogo com o editor de páginas do Google
Developer User13367｜Date and time 24/1/2 2:34:29
Build time 27.924 sec｜Game capacity 4.801KB｜

Script

Jogo do Pictograma

Pontuação: 0

Jogar novamente

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Game do Pictograma</title>
<style>
    body {
        text-align: center;
        font-family: 'Arial', sans-serif;
    }
    
    h1 {
        margin-top: 50px;
    }
    
    #gameboard {
        margin: 50px auto;
        width: 300px;
        height: 500px;
        border: 2px solid black;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        padding: 10px;
    }
    
    .pictogram {
        background-color: #e9e9e9;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 10px;
        width: 130px;
        text-align: center;
        cursor: pointer;
    }
    
    .selected {
        background-color: #00bcd4;
    }
    
    #score {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    #result {
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
    }
    
    #play-again {
        font-size: 18px;
        cursor: pointer;
        color: #0091ea;
        text-decoration: underline;
    }
</style>
</head>
<body>
    <h1>Jogo do Pictograma</h1>
    <div id="gameboard"></div>
    <div id="score">Pontuação: <span id="score-value">0</span></div>
    <div id="result"></div>
    <div id="play-again">Jogar novamente</div>
    
    <script>
        // Lista de pictogramas disponíveis
        var pictograms = [
            { name: "🐶", points: 10 },
            { name: "🐱", points: 20 },
            { name: "🐭", points: 30 },
            { name: "🐹", points: 40 },
            { name: "🐰", points: 50 },
            { name: "🐻", points: 60 },
            { name: "🐼", points: 70 },
            { name: "🐨", points: 80 },
        ];
        
        var selectedPictogram = null;
        var score = 0;
        
        // Retorna um número aleatório no intervalo [min, max]
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        
        // Inicialização do jogo
        function initGame() {
            var gameboard = document.getElementById('gameboard');
            
            // Limpa o tabuleiro
            gameboard.innerHTML = "";
            
            // Insere pictogramas aleatórios no tabuleiro
            for (let i = 0; i < 9; i++) {
                var pictogram = pictograms[getRandomNumber(0, pictograms.length - 1)];
                var pictogramElem = document.createElement('div');
                pictogramElem.classList.add('pictogram');
                pictogramElem.textContent = pictogram.name;
                pictogramElem.setAttribute('data-points', pictogram.points);
                pictogramElem.addEventListener('click', selectPictogram);
                gameboard.appendChild(pictogramElem);
            }
            
            // Reinicia a pontuação
            score = 0;
            document.getElementById('score-value').textContent = score;
            
            // Limpa a seleção anterior
            selectedPictogram = null;
            var selectedElems = document.querySelectorAll('.selected');
            selectedElems.forEach(function (elem) {
                elem.classList.remove('selected');
            });
            
            // Limpa a mensagem de resultado
            document.getElementById('result').textContent = "";
        }
        
        // Seleciona um pictograma
        function selectPictogram(event) {
            var selectedElem = event.target;
            
            // Se já estiver selecionado, desmarca-o
            if (selectedElem.classList.contains('selected')) {
                selectedElem.classList.remove('selected');
                selectedPictogram = null;
            } else {
                // Desmarca o pictograma anteriormente selecionado
                var selectedElems = document.querySelectorAll('.selected');
                selectedElems.forEach(function (elem) {
                    elem.classList.remove('selected');
                });
                
                selectedElem.classList.add('selected');
                selectedPictogram = selectedElem;
            }
        }
        
        // Finaliza o jogo e exibe a pontuação
        function endGame() {
            var resultElem = document.getElementById('result');
            resultElem.textContent = "Fim do jogo! Pontuação: " + score;
        }
        
        // Inicia o jogo ao carregar a página
        document.addEventListener('DOMContentLoaded', initGame);
        
        // Reinicia o jogo ao clicar em "Jogar novamente"
        var playAgainElem = document.getElementById('play-again');
        playAgainElem.addEventListener('click', initGame);
    </script>
</body>
</html>