Vollständiges Spiel. Gib keine Erklärungen, nur den Code.'s game

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

No:33904

129

←

Prev Next

→

Vollständiges Spiel. Gib keine Erklärungen, nur de..ALL
Developer User14077｜Date and time 24/1/7 1:04:02
Build time 27.671 sec｜Game capacity 3.35KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Mein Spiel</title>
</head>
<body>
    <div id="game-container"></div>

startGame: function() {
                this.startTime = new Date();
                this.isGameStarted = true;
                this.generateGameArea();
                this.updateScore();

// Event Listener hinzufügen
                document.addEventListener('click', this.handleClick);
            },

generateGameArea: function() {
                var gameContainer = document.getElementById('game-container');
                var pictograms = ['🌼', '🐶', '🍎', '🚗'];
                var html = '';

for (var i = 1; i <= 16; i++) {
                    var randomIndex = Math.floor(Math.random() * pictograms.length);
                    var pictogram = pictograms[randomIndex];
                    
                    html += '<div class="pictogram" data-pictogram="' + pictogram + '">' + pictogram + '</div>';
                }

gameContainer.innerHTML = html;
            },

updateScore: function() {
                var scoreElement = document.createElement('div');
                scoreElement.id = 'score';
                scoreElement.innerHTML = 'Score: ' + this.score;

var gameContainer = document.getElementById('game-container');
                gameContainer.appendChild(scoreElement);
            },

handleClick: function(event) {
                if (!game.isGameStarted) {
                    return;
                }

var target = event.target;
                if (target.classList.contains('pictogram')) {
                    game.score++;
                    target.classList.add('clicked');
                    game.updateScore();
                }

if (game.score === 16) {
                    game.endGame();
                }
            },

endGame: function() {
                this.endTime = new Date();
                this.isGameStarted = false;

var gameContainer = document.getElementById('game-container');
                gameContainer.innerHTML = '<div id="game-over">Spiel vorbei! Deine Spielzeit: ' + (this.endTime - this.startTime) + 'ms</div>';
            }
        };

// Spiel starten
        game.startGame();
    </script>

.pictogram {
            background-color: lightgray;
            padding: 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.pictogram.clicked {
            background-color: green;
            cursor: default;
        }

#score {
            text-align: center;
            margin-top: 20px;
            font-size: 30px;
        }

#game-over {
            text-align: center;
            font-size: 40px;
            margin-top: 100px;
        }
    </style>
</body>
</html>