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

No:1623

1144

←

Prev Next

→

Concentrate the brine.
Developer sayaensm｜Date and time 23/6/18 19:58:09
Build time 29.617 sec｜Game capacity 2.829KB｜

Script

以下が「食塩水を濃くする」というゲームの実装例です。プレイヤーは水を注いで食塩を加え、濃度を上げていくゲームです。絵文字で可愛らしく表現されています。

食塩水を濃くする

🍚

▁▂▃▄▅▆▇█

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>食塩水を濃くする</title>
    <style>
      body {
        text-align: center;
        background-color: lightblue;
      }
      #water {
        width: 300px;
        height: 200px;
        background-color: lightblue;
        border: 1px solid blue;
        position: relative;
        display: inline-block;
      }
      #salt {
        position: absolute;
        top: 50px;
        left: 130px;
        font-size: 30px;
      }
      #submitBtn {
        margin-top: 20px;
        font-size: 20px;
        border-radius: 10px;
        background-color: yellow;
        padding: 10px 30px;
        cursor: pointer;
      }
      #result {
        margin-top: 20px;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h1>食塩水を濃くする</h1>
    <div id="water">
      <div id="salt">🍚</div>
      <div id="waterLevel">▁▂▃▄▅▆▇█</div>
    </div>
    <form onsubmit="return false;">
      <input type="number" id="amount" placeholder="水を入れる量(ml)" autofocus>
      <input type="number" id="saltAmount" placeholder="食塩を入れる量(小さじ)" step="0.1">
      <button id="submitBtn">混ぜる💪</button>
    </form>
    <div id="result">濃度: 0%</div>
    <script>
      let waterLevel = document.getElementById("waterLevel");
      let result = document.getElementById("result");

document.getElementById("submitBtn").addEventListener("click", mix);
    </script>
  </body>
</html>
```

プレイヤーはフォームから水と食塩の量を指定して混ぜるボタンを押します。水の量に応じて水位が上昇し、濃度が表示されます。水位は絵文字の█で表現されています。また、入力が間違っている場合にはエラーメッセージが表示されます。