たのしくないさんすう's game

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

No:21598

←

Prev Next

→

たのしくないさんすう
Developer バファリンヌ｜Date and time 23/10/16 20:23:27
Build time 100.273 sec｜Game capacity 2.921KB｜

Script

了解しました。実装するプログラムとしては、簡単な四則演算を行う電卓ゲームを作成します。以下がその実装例です。

このプログラムでは、htmlの`display`というidを持つ要素に計算結果や入力値を表示し、各ボタンをクリックすることで計算を行います。四則演算の他にも小数点やクリアボタンも実装されています。スマートフォンで操作することを想定して、ボタンの配置や大きさを調整しました。以上が、電卓ゲームの実装例です。この実装を1枚のHTMLファイルとして保存し、ウェブブラウザで開くことで実行できます。

←

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>
    #display {
      width: 200px;
      height: 40px;
      text-align: center;
      font-size: 24px;
      margin-bottom: 10px;
    }
    .btn {
      width: 50px;
      height: 50px;
      text-align: center;
      font-size: 24px;
      margin: 5px;
      display: inline-block;
      cursor: pointer;
    }
    #clear {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="display"></div>
  <div id="buttons">
    <div class="btn">1</div>
    <div class="btn">2</div>
    <div class="btn">3</div>
    <div class="btn" onclick="operation('+')">+</div>
    <div class="btn">4</div>
    <div class="btn">5</div>
    <div class="btn">6</div>
    <div class="btn" onclick="operation('-')">-</div>
    <div class="btn" onclick="operation('7')">7</div>
    <div class="btn">8</div>
    <div class="btn">9</div>
    <div class="btn" onclick="operation('*')">×</div>
    <div class="btn">0</div>
    <div class="btn" onclick="operation('.')">.</div>
    <div class="btn" onclick="calculate()">=</div>
    <div class="btn" onclick="operation('/')">÷</div>
    <div class="btn" id="clear" onclick="clearDisplay()">C</div>
  </div>
  
  <script>
    let display = document.getElementById('display');
    let currentValue = '0';
    let currentOperation = '';
    
    function operation(operator) {
      if (operator === '=') {
        calculate();
        return;
      }
      
      if (operator === '.' && currentValue.includes('.')) {
        return;
      }
      
      if (currentValue === '0' && operator !== '.') {
        currentValue = '';
      }
      
      currentValue += operator;
      display.innerHTML = currentValue;
    }
    
    function calculate() {
      try {
        currentValue = eval(currentValue);
        display.innerHTML = currentValue;
      } catch (error) {
        display.innerHTML = 'エラー';
      }
    }
    
    function clearDisplay() {
      currentValue = '0';
      display.innerHTML = currentValue;
    }
  </script>
</body>
</html>
```

このプログラムでは、htmlの`display`というidを持つ要素に計算結果や入力値を表示し、各ボタンをクリックすることで計算を行います。四則演算の他にも小数点やクリアボタンも実装されています。スマートフォンで操作することを想定して、ボタンの配置や大きさを調整しました。

以上が、電卓ゲームの実装例です。この実装を1枚のHTMLファイルとして保存し、ウェブブラウザで開くことで実行できます。