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

No:1751

1885

←

Prev Next

→

A game where you enter an ingredient and it tells ..ALL
Developer GOひろし｜Date and time 23/6/19 0:19:41
Build time 31.986 sec｜Game capacity 2.825KB｜

Script

以下がJavaScriptを含む1枚のHTMLファイルで実装した材料から料理名を教えてくれるゲームです。スマホでの操作にも対応しています。

材料から料理名を当てるゲーム

以下の材料から何か料理を作れるでしょうか？

卵
パスタ
にんじん
しめじ
ツナ缶

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

以下がJavaScriptを含む1枚のHTMLファイルで実装した材料から料理名を教えてくれるゲームです。スマホでの操作にも対応しています。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>材料から料理名を当てるゲーム</title>
  </head>
  <body>
    <h1>材料から料理名を当てるゲーム</h1>
    <p>以下の材料から何か料理を作れるでしょうか？</p>
    <ul id="ingredients">
      <li>卵</li>
      <li>パスタ</li>
      <li>にんじん</li>
      <li>しめじ</li>
      <li>ツナ缶</li>
    </ul>
    <form id="guess-form">
      <label for="guess-input">料理名：</label>
      <input type="text" id="guess-input" autocomplete="off">
      <button type="submit">答える</button>
    </form>
    <p id="result"></p>
    <script>
      // 料理名のパターン
      const recipes = [
        {
          name: 'カルボナーラ',
          ingredients: ['卵', 'パスタ']
        },
        {
          name: 'きんぴら',
          ingredients: ['にんじん', 'しめじ']
        },
        {
          name: 'マヨツナパスタ',
          ingredients: ['パスタ', 'ツナ缶']
        }
      ];

// 材料リストの取得
      const ingredientsList = document.getElementById('ingredients');

// 材料リストから配列を作成
      const ingredients = Array.from(ingredientsList.children).map(li => li.textContent);

// 入力フォームの取得
      const guessForm = document.getElementById('guess-form');

// 結果表示用の要素を取得
      const resultElement = document.getElementById('result');

// 答え合わせ処理
      guessForm.addEventListener('submit', event => {
        event.preventDefault(); // フォームの送信を防止

// 入力値の取得
        const guess = guessForm.elements['guess-input'].value.trim();

// 料理名の判定
        const result = recipes.some(recipe => {
          if (recipe.name === guess) {
            return ingredients.every(ingredient => recipe.ingredients.includes(ingredient));
          }
          return false;
        });

// 答え表示
        if (result) {
          resultElement.textContent = '正解！';
        } else {
          resultElement.textContent = '不正解...';
        }
      });
    </script>
  </body>
</html>
```

ゲームの概要は、表示された材料から作れる料理名を当てるというものです。制限時間や回答数はありません。材料リストを更新することで新しい問題に挑戦することができます。絵文字は使用していませんが、HTMLのマークアップやCSSを追加することでデザインは自由にカスタマイズ可能です。