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

No:19619

←

Prev Next

→

Cringe game
Developer User8708｜Date and time 23/10/5 3:12:35
Build time 20.17 sec｜Game capacity 3.191KB｜

Script

Cringe Game

Tap on the pictograms!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Cringe Game</title>
    <style>
      body {
        text-align: center;
        font-family: Arial, sans-serif;
      }

h1 {
        margin: 50px;
      }

#gameArea {
        border: 2px solid black;
        margin: 50px auto;
        padding: 20px;
        width: 300px;
        height: 500px;
        position: relative;
      }

#timer {
        margin-top: 20px;
      }

#instruction {
        margin-top: 30px;
        font-size: 20px;
      }

.pictogram {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        border-radius: 50%;
        position: absolute;
      }

.pictogram img {
        width: 70px;
        height: 70px;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <h1>Cringe Game</h1>
    <div id="gameArea">
      <div id="timer">30</div>
      <div id="instruction">Tap on the pictograms!</div>
    </div>

// Game variables
      let timer;
      let gameEnded = false;
      let score = 0;

// Creating pictograms on the game area
      function createPictograms() {
        for (let i = 0; i < 5; i++) {
          const randomPictogram = pictograms[Math.floor(Math.random() * pictograms.length)];

const pictogram = document.createElement('div');
          pictogram.className = 'pictogram';
          pictogram.style.top = Math.random() * 400 + 'px';
          pictogram.style.left = Math.random() * 200 + 'px';

const img = document.createElement('img');
          img.src = randomPictogram.image;

pictogram.appendChild(img);

// Adding click event listener to the pictograms
          pictogram.addEventListener('click', () => {
            if (!gameEnded) {
              score += randomPictogram.cringeLevel;
              document.getElementById('score').innerHTML = score;
              pictogram.style.display = 'none';
            }
          });

document.getElementById('gameArea').appendChild(pictogram);
        }
      }

// Game timer
      function startTimer() {
        let timeRemaining = 30;
        timer = setInterval(() => {
          timeRemaining--;
          document.getElementById('timer').innerHTML = timeRemaining;

if (timeRemaining <= 0) {
            gameEnded = true;
            clearInterval(timer);
            document.getElementById('instruction').innerHTML = 'Game Over! Your score: ' + score;
          }
        }, 1000);
      }

// Start the game
      function startGame() {
        createPictograms();
        startTimer();
      }

// Initiating the game
      startGame();
    </script>
  </body>
</html>