Freaky Stan: The Life Story's game

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

No:33725

←

Prev Next

→

Freaky Stan: The Life Story
Developer User13970｜Date and time 24/1/6 15:56:44
Build time 41.557 sec｜Game capacity 4.293KB｜

Script

Welcome to Freaky Stan: The Life Story!

Start

Quit

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Freaky Stan: The Life Story</title>
    <style>
      body {
        background-color: #f0f0f0;
        text-align: center;
      }
      
      #game-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      
      #game-board {
        width: 300px;
        height: 400px;
        background-color: #ffffff;
        border: 2px solid #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
      }
      
      #image-container {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        border: 1px solid #000000;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
      }
      
      #message {
        font-size: 18px;
        margin-bottom: 10px;
      }
      
      #options-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
      
      .option-button {
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        background-color: #ffffff;
        border: 1px solid #000000;
        cursor: pointer;
      }
      
      .option-button:hover {
        background-color: #e0e0e0;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="game-board">
        <div id="image-container">
          <img id="character-image" src="stan.png" width="180" height="180" alt="Character Image">
        </div>
        <div id="message">Welcome to Freaky Stan: The Life Story!</div>
        <div id="options-container">
          <div class="option-button" onclick="playGame(true)">Start</div>
          <div class="option-button" onclick="playGame(false)">Quit</div>
        </div>
      </div>
    </div>
    
    <script>
      function playGame(started) {
        var gameContainer = document.getElementById("game-container");
        var gameBoard = document.getElementById("game-board");
        var messageElement = document.getElementById("message");
        var characterImage = document.getElementById("character-image");
        var optionsContainer = document.getElementById("options-container");
        
        gameContainer.style.justifyContent = "flex-start";
        gameContainer.style.paddingTop = "20px";
        gameBoard.style.height = "auto";
        optionsContainer.style.display = "none";
        
        if (started) {
          messageElement.textContent = "Once upon a time, there was a funky character named Freaky Stan.";
          characterImage.setAttribute("src", "stan.png");
          characterImage.setAttribute("alt", "Character Image");
          
          setTimeout(function() {
            messageElement.textContent = "Stan loved to dance and party all night long.";
            characterImage.setAttribute("src", "dance.png");
            
            setTimeout(function() {
              messageElement.textContent = "One day, while dancing, Stan discovered a secret treasure map.";
              characterImage.setAttribute("src", "treasure-map.png");
              
              setTimeout(function() {
                messageElement.textContent = "He decided to embark on a thrilling adventure to find the hidden treasure.";
                characterImage.setAttribute("src", "adventure.png");
                
                setTimeout(function() {
                  messageElement.textContent = "Help Stan navigate through challenges and obstacles to uncover the treasure!";
                  characterImage.setAttribute("src", "obstacles.png");
                  
                  setTimeout(function() {
                    messageElement.textContent = "Game Over! Thank you for playing Freaky Stan: The Life Story.";
                    characterImage.style.display = "none";
                  }, 5000);
                }, 5000);
              }, 5000);
            }, 5000);
          }, 5000);
        } else {
          messageElement.textContent = "Thanks for considering playing Freaky Stan: The Life Story. See you next time!";
          characterImage.style.display = "none";
        }
      }
    </script>
  </body>
</html>