AI game creator

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

No:26243

←

Prev Next

→

Clock
Developer User12889｜Date and time 23/11/28 2:37:02
Build time 63.934 sec｜Game capacity 2.969KB｜

Script

Sure! Here's an example of a simple game implementation using JavaScript that can be played on a smartphone. It displays a clock and the objective is to stop the clock at the exact moment when the seconds hand points to the 12 o'clock position.

When you open this HTML file on a web browser or a smartphone, it will display a clock with three hands (hour, minute, and second). The clock hands will continuously move, and your objective is to stop the second hand exactly when it points to the 12 o'clock position. Once you stop the clock, an alert message will appear congratulating you if you succeeded or alerting you that you missed if the second hand did not stop at 12 o'clock. Please note that this is a basic example to demonstrate the game mechanics. You can customize the styling and enhance the game features as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```
<!DOCTYPE html>
<html>
<head>
  <title>Clock Game</title>
  <style>
    #clock {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 50%;
      position: relative;
    }
    #hour-hand, #minute-hand, #second-hand {
      position: absolute;
      background-color: black;
      transform-origin: bottom center;
    }
    #hour-hand {
      width: 6px;
      height: 70px;
      bottom: 50%;
      left: calc(50% - 3px);
    }
    #minute-hand {
      width: 4px;
      height: 90px;
      bottom: 50%;
      left: calc(50% - 2px);
    }
    #second-hand {
      width: 2px;
      height: 100px;
      bottom: 50%;
      left: calc(50% - 1px);
    }
  </style>
</head>
<body>
  <div id="clock">
    <div id="hour-hand"></div>
    <div id="minute-hand"></div>
    <div id="second-hand"></div>
  </div>

function rotateHands() {
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();

let hourRotation = 30 * (hours % 12) + 0.5 * minutes;
        let minuteRotation = 6 * minutes + 0.1 * seconds;
        let secondRotation = 6 * seconds;

hourHand.style.transform = `rotate(${hourRotation}deg)`;
        minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
        secondHand.style.transform = `rotate(${secondRotation}deg)`;

if (secondRotation === 0) {
          // Stop the clock and check if the second hand is at 12 o'clock
          if (minuteRotation % 360 === 0) {
            alert("Congratulations! You stopped the clock at 12 o'clock.");
          } else {
            alert("Oops! You missed stopping the clock at 12 o'clock.");
          }
        }
      }

// Start rotating the clock hands every second
      setInterval(rotateHands, 1000);
    }

startClock();
  </script>
</body>
</html>
```

Once you stop the clock, an alert message will appear congratulating you if you succeeded or alerting you that you missed if the second hand did not stop at 12 o'clock.

Please note that this is a basic example to demonstrate the game mechanics. You can customize the styling and enhance the game features as per your requirements.