AIと作る100のゲーム実験室　　　　　　　　（*＾v＾*）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スナップエンドウ収穫ゲーム - 完璧版(効果音付き) -</title>
<style>
  body {
    font-family: sans-serif;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 20px;
  }
  h1 {
    color: #2e7d32;
    margin-bottom: 20px;
  }
  #game-wrapper {
    display: flex;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative; /* スタート画面の基準位置 */
  }
  canvas {
    background-color: #2e7d32;
    cursor: crosshair;
    border: 3px solid #1b5e20;
    border-radius: 4px;
  }
  #sidebar {
    width: 260px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
  }
  #score-board {
    background: #e8f5e9;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 15px;
    border: 2px solid #81c784;
  }
  #score-board div:first-child {
    font-size: 14px;
    color: #555;
  }
  #score {
    font-size: 32px;
    font-weight: bold;
    color: #2e7d32;
    margin: 5px 0;
  }
  #harvest-count {
    font-size: 14px;
    font-weight: bold;
    color: #388e3c;
  }
  #instructions {
    background: #f1f8e9;
    border: 2px solid #aed581;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
  }
  #instructions strong {
    color: #2e7d32;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    border-bottom: 1px solid #aed581;
    padding-bottom: 3px;
  }
  .point-good { color: #2e7d32; font-weight: bold; }
  .point-bad { color: #d32f2f; }
  .hint-text {
    margin-top: 8px;
    color: #e65100;
    font-weight: bold;
    font-size: 12px;
  }
  #basket-container {
    flex-grow: 1;
    background: #fff3e0;
    border: 2px solid #ffb74d;
    border-radius: 8px;
    padding: 15px 10px 10px 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    position: relative;
  }
  #basket-title {
    position: absolute;
    top: -12px;
    left: 10px;
    background: #fff3e0;
    padding: 0 5px;
    font-size: 12px;
    color: #e65100;
    font-weight: bold;
  }
  .harvested-pea {
    width: 24px;
    height: 16px;
    border-radius: 12px;
    border: 1px solid #1b5e20;
    display: inline-block;
  }
  #message-area {
    margin-top: 20px;
    width: 100%;
    max-width: 890px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: none;
    text-align: center;
    border: 3px solid #ff9800;
    box-sizing: border-box;
  }
  #penalty-message {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  #knowledge-text {
    font-size: 18px;
    font-weight: bold;
    color: #3e2723;
    line-height: 1.6;
    margin: 20px 0;
    padding: 15px;
    background: #fff8e1;
    border-radius: 8px;
  }
  .btn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    background-color: #ff9800;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn:hover {
    background-color: #f57c00;
  }
  /* スタート画面のスタイル */
  #start-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: 8px;
  }
  #start-screen h2 {
    color: #2e7d32;
    margin-bottom: 20px;
  }
</style>
</head>
<body>
<h1>スナップエンドウ収穫ゲーム</h1>
<div id="game-wrapper">
  <div id="start-screen">
    <h2>準備ができたらクリック！</h2>
    <button class="btn" id="start-btn">ゲームスタート（音が出ます）</button>
  </div>
  <canvas id="gameCanvas" width="600" height="600"></canvas>
  
  <div id="sidebar">
    <div id="score-board">
      <div>合計スコア</div>
      <div id="score">0</div>
      <div id="harvest-count">収穫数: <span id="count">0</span> / 20</div>
    </div>
    
    <div id="instructions">
      <strong>【遊び方とポイント】</strong>
      緑の群れから、ちょうどいい大きさの豆を探してクリック！<br><br>
      ・<span class="point-bad">小さすぎ：-10点</span><br>
      ・<span class="point-good">ちょうど：+50点</span><br>
      ・<span class="point-bad">大きめ(黄)：-20点</span><br>
      ・<span class="point-bad">育ちすぎ(濃黄)：-50点</span><br><br>
      <span class="point-bad">※終了時に画面に残った黄色い豆も減点対象になります。</span>
      <div class="hint-text">💡ヒント：豆が発生する場所には、一瞬「白い花」が咲きます！</div>
    </div>
    <div id="basket-container">
      <div id="basket-title">収穫カゴ</div>
    </div>
  </div>
</div>
<div id="message-area">
  <h2 style="color: #e65100; margin-top:0;">収穫完了！</h2>
  <p>あなたの最終スコアは <span id="final-score" style="font-size:28px; font-weight:bold; color:#2e7d32;"></span> ポイントです。</p>
  <div id="penalty-message"></div>
  <div id="knowledge-text"></div>
  <button class="btn" onclick="location.reload()">もう一度収穫に行く</button>
</div>
<script>
// --- Web Audio API を使った効果音の実装 ---
const AudioContext = window.AudioContext || window.webkitAudioContext;
let audioCtx;
function initAudio() {
  if (!audioCtx) {
    audioCtx = new AudioContext();
  }
}
function playSound(type) {
  if (!audioCtx) return;
  const osc = audioCtx.createOscillator();
  const gainNode = audioCtx.createGain();
  
  osc.connect(gainNode);
  gainNode.connect(audioCtx.destination);
  
  const now = audioCtx.currentTime;
  
  if (type === 'good') {
    // ちょうどいい収穫：明るい「ピコッ！」
    osc.type = 'sine';
    osc.frequency.setValueAtTime(880, now); // A5
    osc.frequency.exponentialRampToValueAtTime(1760, now + 0.1);
    gainNode.gain.setValueAtTime(0.2, now);
    gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
    osc.start(now);
    osc.stop(now + 0.1);
  } else if (type === 'bad') {
    // 減点収穫：鈍い「ブブッ」
    osc.type = 'sawtooth';
    osc.frequency.setValueAtTime(150, now);
    osc.frequency.linearRampToValueAtTime(100, now + 0.15);
    gainNode.gain.setValueAtTime(0.1, now);
    gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.15);
    osc.start(now);
    osc.stop(now + 0.15);
  } else if (type === 'clear') {
    // ゲームクリア：ファンファーレ風
    osc.type = 'square';
    osc.frequency.setValueAtTime(523.25, now);       // C5
    osc.frequency.setValueAtTime(659.25, now + 0.15); // E5
    osc.frequency.setValueAtTime(783.99, now + 0.3);  // G5
    osc.frequency.setValueAtTime(1046.50, now + 0.45);// C6
    
    gainNode.gain.setValueAtTime(0.1, now);
    gainNode.gain.linearRampToValueAtTime(0, now + 0.8);
    osc.start(now);
    osc.stop(now + 0.8);
  }
}
// --- ゲーム本体の処理 ---
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let score = 0;
let harvestCount = 0;
const MAX_HARVEST = 20;
let isGameOver = false;
let isGameStarted = false; // スタートフラグ
const peas = [];
const flowers = []; 
const leavesBg = [];
const leavesFg = [];
const vines = [];
const colorBg = '#2e7d32';
const colorVine = '#1b5e20';
const colorLeaf = ['#388e3c', '#43a047', '#2e7d32', '#1b5e20', '#4caf50'];
function random(min, max) {
  return Math.random() * (max - min) + min;
}
function generateDecorations() {
  for(let i=0; i<40; i++) {
    vines.push({
      x1: random(0, canvas.width), y1: random(0, canvas.height),
      cx: random(0, canvas.width), cy: random(0, canvas.height),
      x2: random(0, canvas.width), y2: random(0, canvas.height),
      width: random(2, 6)
    });
  }
  for(let i=0; i<200; i++) {
    leavesBg.push({ 
      x: random(0, canvas.width), y: random(0, canvas.height), 
      size: random(15, 45), color: colorLeaf[Math.floor(Math.random()*colorLeaf.length)], 
      angle: random(0, Math.PI*2) 
    });
  }
  for(let i=0; i<100; i++) {
    leavesFg.push({ 
      x: random(0, canvas.width), y: random(0, canvas.height), 
      size: random(25, 60), color: colorLeaf[Math.floor(Math.random()*colorLeaf.length)], 
      angle: random(0, Math.PI*2), alpha: random(0.6, 0.9) 
    });
  }
}
class Flower {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.timer = 40; 
    this.isFinished = false;
    this.angle = random(0, Math.PI * 2);
  }
  update() {
    this.timer--;
    if (this.timer <= 0) {
      this.isFinished = true;
    }
  }
  draw(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    if(this.timer < 10) ctx.globalAlpha = this.timer / 10;
    ctx.fillStyle = '#FFFFFF';
    ctx.beginPath();
    ctx.ellipse(0, -5, 8, 10, 0, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.beginPath();
    ctx.ellipse(-4, 4, 5, 7, random(-0.2, 0.2), 0, Math.PI * 2);
    ctx.ellipse(4, 4, 5, 7, random(-0.2, 0.2), 0, Math.PI * 2);
    ctx.fill();
    
    ctx.fillStyle = '#FFEB3B';
    ctx.beginPath();
    ctx.arc(0, 0, 2, 0, Math.PI*2);
    ctx.fill();
    ctx.restore();
  }
}
class Pea {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 0; 
    this.growthRate = random(0.04, 0.12);
    this.angle = random(0, Math.PI * 2);
  }
  update() {
    if (this.size < 100) {
      this.size += this.growthRate;
    }
  }
  draw(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    let color = '#4CAF50';
    if (this.size >= 90) color = '#FFEB3B';
    else if (this.size >= 70) color = '#CDDC39';
    else if (this.size >= 40) color = '#66BB6A';
    
    ctx.beginPath();
    let w = 8 + this.size * 0.25;
    let h = 4 + this.size * 0.12;
    ctx.ellipse(0, 0, w, h, 0, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.strokeStyle = '#1b5e20';
    ctx.lineWidth = 1.5;
    ctx.stroke();
    ctx.restore();
  }
  getRadius() {
    return 10 + this.size * 0.25;
  }
}
function drawLeaf(leaf, ctx, isForeground = false) {
  ctx.save();
  ctx.translate(leaf.x, leaf.y);
  ctx.rotate(leaf.angle);
  if (isForeground) ctx.globalAlpha = leaf.alpha;
  
  ctx.beginPath();
  ctx.ellipse(0, 0, leaf.size, leaf.size/2.5, 0, 0, Math.PI*2);
  ctx.fillStyle = leaf.color;
  ctx.fill();
  ctx.strokeStyle = '#0d5302';
  ctx.lineWidth = 1;
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(-leaf.size, 0);
  ctx.lineTo(leaf.size, 0);
  ctx.stroke();
  
  ctx.restore();
}
function gameLoop() {
  if (isGameOver || !isGameStarted) return;
  ctx.fillStyle = colorBg;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = colorVine;
  vines.forEach(v => {
    ctx.lineWidth = v.width;
    ctx.beginPath();
    ctx.moveTo(v.x1, v.y1);
    ctx.quadraticCurveTo(v.cx, v.cy, v.x2, v.y2);
    ctx.stroke();
  });
  leavesBg.forEach(l => drawLeaf(l, ctx));
  if ((peas.length + flowers.length) < 25 && Math.random() < 0.03) {
    const spawnX = random(40, canvas.width - 40);
    const spawnY = random(40, canvas.height - 40);
    flowers.push(new Flower(spawnX, spawnY));
  }
  
  peas.forEach(p => {
    p.update();
    p.draw(ctx);
  });
  leavesFg.forEach(l => drawLeaf(l, ctx, true));
  for (let i = flowers.length - 1; i >= 0; i--) {
    const f = flowers[i];
    f.update();
    f.draw(ctx);
    if (f.isFinished) {
      peas.push(new Pea(f.x, f.y));
      flowers.splice(i, 1);
    }
  }
  requestAnimationFrame(gameLoop);
}
// スタートボタンの処理
document.getElementById('start-btn').addEventListener('click', () => {
  initAudio(); // 音声コンテキストの初期化
  isGameStarted = true;
  document.getElementById('start-screen').style.display = 'none';
  gameLoop();
});
canvas.addEventListener('mousedown', (e) => {
  if(isGameOver || !isGameStarted) return;
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  for (let i = peas.length - 1; i >= 0; i--) {
    const p = peas[i];
    const dx = mouseX - p.x;
    const dy = mouseY - p.y;
    if (Math.sqrt(dx * dx + dy * dy) <= p.getRadius()) {
      harvest(p);
      peas.splice(i, 1);
      break;
    }
  }
});
function harvest(pea) {
  let points = 0;
  let color = '';
  
  if (pea.size < 40) {
    points = -10;
    color = '#4CAF50';
    playSound('bad'); // 減点音
  } else if (pea.size < 70) {
    points = 50;
    color = '#66BB6A';
    playSound('good'); // 加点音
  } else if (pea.size < 90) {
    points = -20;
    color = '#CDDC39';
    playSound('bad'); // 減点音
  } else {
    points = -50;
    color = '#FFEB3B';
    playSound('bad'); // 減点音
  }
  score += points;
  harvestCount++;
  
  document.getElementById('score').innerText = score;
  document.getElementById('count').innerText = harvestCount;
  const basket = document.getElementById('basket-container');
  const peaIcon = document.createElement('div');
  peaIcon.className = 'harvested-pea';
  peaIcon.style.backgroundColor = color;
  peaIcon.title = `サイズ: ${Math.floor(pea.size)} / ポイント: ${points}`;
  basket.appendChild(peaIcon);
  if (harvestCount >= MAX_HARVEST) {
    endGame();
  }
}
const triviaAndRecipes = [
  "【豆知識】スナップエンドウは「スナックエンドウ」と呼ばれることもありましたが、昭和58年に農林水産省によって名称が統一されました。",
  "【豆知識】豆とサヤの両方を食べるスナップエンドウは栄養価がとても高く、免疫力をサポートするβ-カロテンやビタミンCが豊富です！",
  "【豆知識】シャキシャキの歯ごたえを保つには、サッと短時間で茹でた直後に冷水にとるのが、色鮮やかに仕上げるコツです。",
  "【レシピ】『スナップエンドウとベーコンのバター醤油炒め』。サッと炒めてバターの香りを纏わせるだけで、ご飯が止まらない絶品おかずに！",
  "【レシピ】『スナップエンドウのツナマヨ和え』。茹でてマヨネーズとツナ缶で和えるだけ。シャキシャキ感とツナの旨味が相性抜群です。",
  "【レシピ】『スナップエンドウとすまきの卵とじ』。高知でおなじみのピンクの「すまき」と一緒に切って卵でとじれば、彩り豊かで優しい味の小鉢が完成！",
  "【豆知識】スナップエンドウは比較的歴史が浅く、1970年代にアメリカで、グリーンピースの改良品種として誕生したと言われています。",
  "【豆知識】美味しく食べるための最大のコツは「筋取り」です。サヤのカーブの内側と外側、両方の太い筋をしっかり取ることで、シャキッとした食感が活きます！",
  "【豆知識】「さやえんどう」は豆が大きくなる前にサヤごと食べるもの。「スナップエンドウ」は大きくなってからサヤごと食べるもの。似て非なる存在です。",
  "【レシピ】『スナップエンドウの肉巻き』。豚バラ肉をぐるぐると巻きつけて、甘辛いタレで焼き上げるだけ。お弁当の主役にもなる大満足の一品です！",
  "【レシピ】『スナップエンドウと生節（なまぶし）のマヨサラダ』。高知特産の鰹の生節をほぐして、茹でたエンドウとマヨネーズで和えるだけ。お酒のアテに最高です。",
  "【レシピ】『スナップエンドウとニンニクの塩炒め』。オリーブオイルと刻みニンニクでサッと炒り、少しの塩で味付け。豆の甘みが一番際立ちます。",
  "【豆知識】スナップエンドウの花は白色が一般的ですが、品種によっては赤紫色の美しい花を咲かせるものもあります。",
  "【豆知識】実はエンドウの花は、ほぼ100%「自花受粉」といって、自分の花粉で受粉します。蜂などが来なくても実がなるんですよ。",
  "【豆知識】花が咲いてから収穫までの期間は、天候にもよりますがだいたい2週間〜3週間程度です。ゲームでは大幅に早送りしています！",
  "【レシピ】『スナップエンドウの天ぷら』。サクサクの衣の中に、蒸された豆の甘みが凝縮されます。塩だけで食べるのがおすすめです。",
  "【レシピ】『スナップエンドウと彩り野菜のペペロンチーノ』。パスタの具材として。最後にサッと加えることで、緑の色鮮やかさとシャキシャキ感が残ります。",
  "【レシピ】『スナップエンドウの白和え』。茹でたエンドウを、水切りした豆腐、すりごま、砂糖、味噌を混ぜた衣で和えます。優しい甘みが豆と合います。",
  "【豆知識】サヤが固くならないのが最大の特徴。他のエンドウ豆にある「内果皮」という固い層が退化しているため、丸ごと美味しく食べられるんです。",
  "【豆知識】鮮度を見分けるポイントは「ハリ」と「色」。新鮮なものはポキッと折れるほどハリがあり、緑色が鮮やかです。",
  "【豆知識】保存する時は乾燥に注意！濡らしたキッチンペーパーでふんわり包み、ポリ袋に入れて冷蔵庫の野菜室へ。これで数日はシャキシャキ感を保てます。",
  "【レシピ】『スナップエンドウのナムル』。サッと塩茹でした豆に、ごま油、鶏ガラスープの素、すりおろしニンニク、白ごまを和えるだけ。無限に食べられます。",
  "【レシピ】『スナップエンドウと桜えびの塩炒め』。ごま油で桜えびをカリッと炒め、そこに豆を投入。エビの香ばしさと豆の甘みが口に広がる春らしい一品です。",
  "【レシピ】『スナップエンドウの柚子胡椒マヨディップ』。高知特産の柚子胡椒をマヨネーズに混ぜ、茹でた豆にたっぷりつけてガブリ。爽やかな辛味が甘さを引き立てます！",
  "【豆知識】高知県は温暖な気候を生かして、スナップエンドウの栽培も盛ん。四万十川流域などの自然豊かな環境で美味しく育ちます。",
  "【豆知識】スナップエンドウのカロリーは100gあたり約43kcal。甘みが強いのにヘルシーで、ダイエット中のおやつ代わりにもなります。",
  "【レシピ】『スナップエンドウといりごまのきんぴら』。細切りにして、ごま油と醤油、みりんでサッと炒めるだけ。お弁当の隙間埋めにも最適です。",
  "【レシピ】『スナップエンドウとちくわの磯辺揚げ』。青のりを混ぜた衣でサクッと揚げます。スーパーのお惣菜コーナーにありそうなホッとする味です。"
];
function endGame() {
  isGameOver = true;
  playSound('clear'); // クリア音
  
  let penalty = 0;
  let yellowCount = 0;
  let darkYellowCount = 0;
  peas.forEach(pea => {
    if (pea.size >= 90) {
      penalty += 50;
      darkYellowCount++;
    } else if (pea.size >= 70) {
      penalty += 20;
      yellowCount++;
    }
  });
  score -= penalty;
  document.getElementById('final-score').innerText = score;
  
  const penaltyEl = document.getElementById('penalty-message');
  if (penalty > 0) {
    penaltyEl.style.color = '#d32f2f';
    penaltyEl.innerText = `※収穫忘れペナルティ：育ちすぎ（濃い黄色）${darkYellowCount}個、大きめ（黄色）${yellowCount}個が残っていたため、計 ${penalty} ポイント減点…！`;
  } else {
    penaltyEl.style.color = '#388e3c';
    penaltyEl.innerText = `※黄色い豆ゼロ！完璧なタイミングでの収穫です！`;
  }
  document.getElementById('message-area').style.display = 'block';
  
  const randomIndex = Math.floor(Math.random() * triviaAndRecipes.length);
  document.getElementById('knowledge-text').innerText = triviaAndRecipes[randomIndex];
}
generateDecorations();
// gameLoop() はスタートボタンが押されてから呼び出されます
</script>
</body>
</html>