A working clock with 1000 lines of code's game

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

No:9575

←

Prev Next

→

A working clock with 1000 lines of code
Developer FirstNormalPerson｜Date and time 23/7/26 3:51:43
Build time 26.956 sec｜Game capacity 2.918KB｜

Script

Here's an example of a working clock implemented as a single HTML file, using JavaScript and enclosed in script tags. The clock is designed to be playable as a game on a smartphone, with the use of pictograms:

This implementation includes a clock that updates every second, taking the current time from the user's device. It also allows the user to input a specific hour and minute combination, and when the submit button is clicked, an alert message is displayed with the entered time. You can then add your game logic based on the entered time.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Interactive Clock Game</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }
    #clock-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      padding: 30px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }
    #clock {
      font-size: 30px;
      margin-bottom: 20px;
    }
    #hour-input,
    #minute-input,
    #submit-button {
      width: 150px;
      padding: 10px;
      border: none;
    }
    #submit-button {
      margin-top: 10px;
      background-color: #4CAF50;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="clock-container">
    <div id="clock">Loading...</div>
    <input type="number" id="hour-input" placeholder="Enter Hour (0-23)">
    <input type="number" id="minute-input" placeholder="Enter Minute (0-59)">
    <button id="submit-button">Submit</button>
  </div>

// Start the clock
    setInterval(updateClock, 1000);

// Handle submit button click event
    document.getElementById('submit-button').addEventListener('click', function() {
      const hourInput = document.getElementById('hour-input');
      const minuteInput = document.getElementById('minute-input');
      const hour = parseInt(hourInput.value);
      const minute = parseInt(minuteInput.value);

if (!isNaN(hour) && !isNaN(minute) && hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59) {
        alert(`You entered ${hour}:${minute}.`);
        // Insert your game logic here, based on the entered hour and minute
        // For example, you could check if the entered time matches the current time on the clock
      } else {
        alert('Please enter a valid hour (0-23) and minute (0-59).');
      }
    });
  </script>
</body>
</html>
```