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

No:24647

154

Time Machine
Developer User11298｜Date and time 23/11/11 1:10:58
Build time 89.463 sec｜Game capacity 4.308KB｜

Time Machine Game

Welcome! Can you travel through time?

Explanation: This is a game called "Time Machine" implemented as a single HTML file. The game allows the player to travel between the past and the future using a time machine. The game is displayed in a centered format with a title, an output section showing the current image and a message, and three buttons for controlling the time travel actions. The JavaScript code includes functions for each time travel action: `travelToPast()`, `travelToFuture()`, and `restartGame()`. These functions manipulate the image and message elements based on the player's choice. The event listeners are added to the buttons using `addEventListener()` to trigger the corresponding action when the buttons are clicked. The game starts with the image "emozi_all/game.png" and a welcome message. The player can then click either the "Go to the Past" or "Go to the Future" button to travel and see the respective image with a related message. The player can restart the game at any time by clicking the "Restart" button. Please note that you would need to replace the image references (`emozi_dog.png`, `emozi_himawari.png`, `emozi_cat.png`) with actual paths to your own pictogram images or adjust the code according to your requirements.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Time Machine Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    img {
      width: 100px;
    }
    #output {
      margin: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 18px;
      margin: 10px;
    }
    #btn-container button {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Time Machine Game</h1>
  
  <div id="output">
    <img id="currentImage" src="start.png">
    <p id="message">Welcome! Can you travel through time?</p>
  </div>

<div id="btn-container">
    <button id="pastBtn">Go to the Past</button>
    <button id="futureBtn">Go to the Future</button>
    <button id="restartBtn">Restart</button>
  </div>

<script>
    function travelToPast() {
      var currentImage = document.getElementById('currentImage');
      var message = document.getElementById('message');
      var pastBtn = document.getElementById('pastBtn');
      var futureBtn = document.getElementById('futureBtn');
      var restartBtn = document.getElementById('restartBtn');
      
      // Change image and message
      currentImage.src = "past.png";
      message.innerText = "You traveled to the past!";
      
      // Disable past button and enable future button
      pastBtn.disabled = true;
      futureBtn.disabled = false;

// Show restart button
      restartBtn.style.display = "inline-block";
    }

function travelToFuture() {
      var currentImage = document.getElementById('currentImage');
      var message = document.getElementById('message');
      var pastBtn = document.getElementById('pastBtn');
      var futureBtn = document.getElementById('futureBtn');
      var restartBtn = document.getElementById('restartBtn');
      
      // Change image and message
      currentImage.src = "future.png";
      message.innerText = "You traveled to the future!";
      
      // Disable future button and enable past button
      futureBtn.disabled = true;
      pastBtn.disabled = false;

// Show restart button
      restartBtn.style.display = "inline-block";
    }

function restartGame() {
      var currentImage = document.getElementById('currentImage');
      var message = document.getElementById('message');
      var pastBtn = document.getElementById('pastBtn');
      var futureBtn = document.getElementById('futureBtn');
      var restartBtn = document.getElementById('restartBtn');
      
      // Reset image and message
      currentImage.src = "start.png";
      message.innerText = "Welcome! Can you travel through time?";
      
      // Enable both past and future buttons
      pastBtn.disabled = false;
      futureBtn.disabled = false;

// Hide restart button
      restartBtn.style.display = "none";
    }

// Add event listeners to buttons
    document.getElementById('pastBtn').addEventListener('click', travelToPast);
    document.getElementById('futureBtn').addEventListener('click', travelToFuture);
    document.getElementById('restartBtn').addEventListener('click', restartGame);
  </script>
</body>
</html>
```

Explanation:

This is a game called "Time Machine" implemented as a single HTML file. The game allows the player to travel between the past and the future using a time machine.

The game is displayed in a centered format with a title, an output section showing the current image and a message, and three buttons for controlling the time travel actions.

The JavaScript code includes functions for each time travel action: `travelToPast()`, `travelToFuture()`, and `restartGame()`. These functions manipulate the image and message elements based on the player's choice.

The event listeners are added to the buttons using `addEventListener()` to trigger the corresponding action when the buttons are clicked.

The game starts with the image "start.png" and a welcome message. The player can then click either the "Go to the Past" or "Go to the Future" button to travel and see the respective image with a related message. The player can restart the game at any time by clicking the "Restart" button.

Please note that you would need to replace the image references (`start.png`, `past.png`, `future.png`) with actual paths to your own pictogram images or adjust the code according to your requirements.