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

No:27752

←

Prev Next

→

Template run
Developer User13821｜Date and time 23/12/8 22:27:11
Build time 28.2 sec｜Game capacity 2.817KB｜

Script

Phone Operation Game

Tap the buttons in the correct sequence to unlock the phone!

(Use pictograms if possible)

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Phone Operation Game</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        font-size: 2rem;
        text-align: center;
      }
      .instruction {
        margin-bottom: 2rem;
      }
      .button {
        padding: 1rem;
        margin-top: 2rem;
        background-color: #7fcd91;
        border-radius: 5px;
        cursor: pointer;
      }
      .button:hover {
        background-color: #66aa77;
      }
    </style>
  </head>
  <body>
    <h1>Phone Operation Game</h1>
    <div class="instruction">
      <p>Tap the buttons in the correct sequence to unlock the phone!</p>
      <p>(Use pictograms if possible)</p>
    </div>
    <div id="phone">
      <img id="lock-screen" src="lockscreen.png" alt="Lock Screen" />
    </div>
    <script>
      const code = [2, 3, 1, 4]; // Example sequence, you can change it

let input = [];
      let attempts = 0;

function handleButtonPress(number) {
        input.push(number);
        attempts++;

if (attempts === code.length) {
          if (JSON.stringify(input) === JSON.stringify(code)) {
            unlockPhone();
          } else {
            resetInput();
            showError();
          }
        }
      }

function unlockPhone() {
        const lockScreen = document.getElementById("lock-screen");
        lockScreen.src = "unlocked.png";
        document.getElementById("phone").classList.add("unlocked");
      }

function resetInput() {
        input = [];
        attempts = 0;
      }

function showError() {
        alert("Incorrect sequence. Please try again!");
      }
    </script>
    <script>
      const button1 = document.createElement("button");
      button1.classList.add("button");
      button1.textContent = "Button 1";
      button1.addEventListener("click", () => handleButtonPress(1));
      document.body.appendChild(button1);
      
      const button2 = document.createElement("button");
      button2.classList.add("button");
      button2.textContent = "Button 2";
      button2.addEventListener("click", () => handleButtonPress(2));
      document.body.appendChild(button2);
      
      const button3 = document.createElement("button");
      button3.classList.add("button");
      button3.textContent = "Button 3";
      button3.addEventListener("click", () => handleButtonPress(3));
      document.body.appendChild(button3);
      
      const button4 = document.createElement("button");
      button4.classList.add("button");
      button4.textContent = "Button 4";
      button4.addEventListener("click", () => handleButtonPress(4));
      document.body.appendChild(button4);
    </script>
  </body>
</html>