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

No:9815

127

←

Prev Next

→

Glitch effect
Developer FirstNormalPerson｜Date and time 23/7/28 0:44:15
Build time 32.438 sec｜Game capacity 3.517KB｜

Script

Sure! Below is an example of a simple game implemented as a single HTML file using JavaScript. It's a basic guessing game where the player needs to guess a randomly-generated number within a given range. The game interface uses pictograms, and I've added a glitch effect to give it a unique visual style.

Guess the Number Game

Can you guess the correct number?

To see the glitch effect, copy the code into a new HTML file and open it in a web browser. When the game starts, enter a number between 1 and 100 to make guesses. If your guess is too low, the game will alert you to try again. If your guess is too high, the game will also prompt you to try again. Once you guess the correct number, the game will congratulate you and restart with a new target number.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .glitch {
      color: #00ff00;
      text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    }
    
    @keyframes glitch-animation {
      0% {
        text-shadow: none;
      }
      20% {
        text-shadow:
          -1px -1px 0 #000,
          1px 2px 0 #ff0000,
          -1px 3px 0 #00ff00,
          1px -1px 0 #000;
      }
      40% {
        text-shadow:
          -2px 1px 0 #00ff00,
          1px -3px 0 #ff0000,
          -1px -2px 0 #000,
          1px -1px 0 #000;
      }
      60% {
        text-shadow:
          -1px -1px 0 #000,
          1px 2px 0 #ff0000,
          -1px 3px 0 #00ff00,
          1px -1px 0 #000;
      }
      80% {
        text-shadow:
          -2px 1px 0 #00ff00,
          1px -3px 0 #ff0000,
          -1px -2px 0 #000,
          1px -1px 0 #000;
      }
      100% {
        text-shadow: none;
      }
    }
  </style>
</head>
<body>
  <script>
    // Glitch effect function
    const glitchText = (element) => {
      element.classList.add("glitch");
      setTimeout(() => {
        element.classList.remove("glitch");
      }, 500);
    };
    
    // Game logic
    const initializeGame = () => {
      const targetNumber = Math.floor(Math.random() * 100) + 1; // Random number between 1 and 100
      const guessInput = document.getElementById("guess-input");
      
      const checkGuess = () => {
        const userGuess = parseInt(guessInput.value);
        
        if (isNaN(userGuess)) {
          glitchText(guessInput);
          guessInput.value = "";
          guessInput.focus();
          return;
        }
        
        if (userGuess < 1 || userGuess > 100) {
          glitchText(guessInput);
          guessInput.value = "";
          guessInput.focus();
          return;
        }
        
        if (userGuess === targetNumber) {
          alert("Congratulations! You guessed the correct number.");
          initializeGame();
        } else if (userGuess < targetNumber) {
          alert("Too low, try again.");
          guessInput.value = "";
          guessInput.focus();
        } else {
          alert("Too high, try again.");
          guessInput.value = "";
          guessInput.focus();
        }
      };
      
      guessInput.addEventListener("keydown", (event) => {
        if (event.keyCode === 13) {
          checkGuess();
        }
      });
    };
    
    // Start the game
    initializeGame();
  </script>
  
  <h1 style="text-align: center;">Guess the Number Game</h1>
  <h2 style="text-align: center;">Can you guess the correct number?</h2>
  
  <div style="text-align: center;">
    <input type="number" id="guess-input" placeholder="Enter your guess" autofocus>
  </div>
</body>
</html>
```