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

No:4314

1013

←

Prev Next

→

Fold the paper 30 times and indicate its thickness
Developer User1006｜Date and time 23/6/27 19:35:05
Build time 17.822 sec｜Game capacity 1.845KB｜

Script

するゲームを作ります。

紙を折って厚みを表示するゲーム

スマホで上のボタンを押して遊んでね！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

するゲームを作ります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>紙を折るゲーム</title>
    <style>
      body {
        background-color: #f2f2f2;
        text-align: center;
        font-size: 2em;
      }
      
      img {
        width: 50%;
        margin: 25px auto;
      }
      
      button {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #008CBA;
        border: none;
        color: white;
        font-size: 1.5em;
        border-radius: 5px;
        cursor: pointer;
      }
      
    </style>
  </head>
  <body>
    <h1>紙を折って厚みを表示するゲーム</h1>
    <p>スマホで上のボタンを押して遊んでね！</p>
    
    <img src="https://cdn.pixabay.com/photo/2015/03/29/19/04/paper-698336_1280.png" alt="紙">
    
    <script>
      
      let thickness = 0.0001; // 最初の紙の厚み
      
      function fold() {
        thickness *= 2; // 紙を2つ折る
        document.getElementById("thickness").textContent = "厚み：" + thickness.toString() + "cm";
        document.querySelector("img").setAttribute("src", "https://cdn.pixabay.com/photo/2015/09/28/14/16/paper-folded-962957_1280.png");
        if (thickness >= 0.3) { // 厚さが3mmを超えたら
          document.querySelector("button").setAttribute("disabled", "disabled");
          alert("おめでとう！あなたは紙を30回折りました！");
        }
      }
      
      document.addEventListener("DOMContentLoaded", function(event) { 
        document.querySelector("button").addEventListener("click", fold);
        document.getElementById("thickness").textContent = "厚み：" + thickness.toString() + "cm";
      });
      
    </script>
    
    <p id="thickness"></p>
    <button>紙を折る</button>
    
  </body>
</html>