Spaces:

miya3333
/

DiscoveringNumbersGame

Running

App Files Files Community

miya3333 commited on Apr 26

Commit

ed2ca9d

verified ·

1 Parent(s): 114b88b

Upload 3 files

Browse files

Implemented a battle mode against enemy AI.

Files changed (2) hide show

index.html +12 -0
script.js +131 -1

index.html CHANGED Viewed

@@ -7,10 +7,22 @@
 </head>
 <body>
   <div class="container">
     <div id="gameInfo">
       探す数字: <span id="target">--</span>
     </div>
     <button id="startBtn">ゲーム開始</button>
     <canvas id="gameCanvas" width="800" height="600"></canvas>
     <div id="message"></div>
   </div>

 </head>
 <body>
   <div class="container">
+    <div id="modeSelect" style="margin-bottom:1rem;">
+      <label><input type="radio" name="mode" value="single" checked> シングルプレイ</label>
+      <label style="margin-left:1rem;"><input type="radio" name="mode" value="vsAI"> VS AI</label>
+    </div>
+    <div id="difficultySelect" style="display:none; margin-bottom:1rem;">
+      難易度:
+      <label><input type="radio" name="difficulty" value="easy" checked> 簡単</label>
+      <label style="margin-left:1rem;"><input type="radio" name="difficulty" value="hard"> 難しい</label>
+    </div>
     <div id="gameInfo">
       探す数字: <span id="target">--</span>
     </div>
     <button id="startBtn">ゲーム開始</button>
+    <div id="scores" style="display:none; margin-bottom:1rem;">
+      プレイヤー: <span id="playerScore">0</span>　AI: <span id="aiScore">0</span>
+    </div>
     <canvas id="gameCanvas" width="800" height="600"></canvas>
     <div id="message"></div>
   </div>

script.js CHANGED Viewed

@@ -4,6 +4,30 @@
   const targetSpan = document.getElementById('target');
   const startBtn = document.getElementById('startBtn');
   const messageDiv = document.getElementById('message');
   let items = [];
   let remaining = [];
   let currentTarget = null;
@@ -26,6 +50,22 @@
     messageDiv.textContent = '';
     messageDiv.className = '';
     targetSpan.textContent = '--';
     for (let i = 1; i <= count; i++) {
       const text = i.toString();
       const metrics = ctx.measureText(text);
@@ -65,12 +105,27 @@
       currentTarget = null;
       targetSpan.textContent = '--';
       messageDiv.className = 'clear';
-      messageDiv.textContent = 'ゲームクリア！';
       return;
     }
     const idx = Math.floor(Math.random() * remaining.length);
     currentTarget = remaining[idx].num;
     targetSpan.textContent = currentTarget;
   }
   function repositionItems() {
@@ -137,6 +192,73 @@
     ctx.lineTo(x2, y1);
     ctx.stroke();
   }
   canvas.addEventListener('click', e => {
     if (currentTarget === null) return;
@@ -148,6 +270,14 @@
       if (clickX >= item.x && clickX <= item.x + item.width &&
           clickY <= item.y && clickY >= item.y - item.height) {
         if (item.num === currentTarget) {
           messageDiv.className = 'correct';
           messageDiv.textContent = '正解！';
           drawAll();

   const targetSpan = document.getElementById('target');
   const startBtn = document.getElementById('startBtn');
   const messageDiv = document.getElementById('message');
+  const modeRadios = document.querySelectorAll('input[name="mode"]');
+  const difficultyDiv = document.getElementById('difficultySelect');
+  const difficultyRadios = document.querySelectorAll('input[name="difficulty"]');
+  modeRadios.forEach(radio => {
+    radio.addEventListener('change', () => {
+      if (document.querySelector('input[name="mode"]:checked').value === 'vsAI') {
+        difficultyDiv.style.display = 'block';
+      } else {
+        difficultyDiv.style.display = 'none';
+      }
+    });
+  });
+  const scoresDiv = document.getElementById('scores');
+  const playerScoreSpan = document.getElementById('playerScore');
+  const aiScoreSpan = document.getElementById('aiScore');
+  let gameMode = 'single';
+  let playerScore = 0;
+  let aiScore = 0;
+  let aiTimeout = null;
+  let aiAccuracy;
+  const AI_EASY_ACCURACY = 0.3;
+  const AI_HARD_ACCURACY = 0.7;
+  const aiMinDelay = 500;
+  const aiMaxDelay = 2000;
   let items = [];
   let remaining = [];
   let currentTarget = null;
     messageDiv.textContent = '';
     messageDiv.className = '';
     targetSpan.textContent = '--';
+    gameMode = document.querySelector('input[name="mode"]:checked').value;
+    if (gameMode === 'vsAI') {
+      const difficulty = document.querySelector('input[name="difficulty"]:checked').value;
+      aiAccuracy = difficulty === 'easy' ? AI_EASY_ACCURACY : AI_HARD_ACCURACY;
+      playerScore = 0;
+      aiScore = 0;
+      playerScoreSpan.textContent = playerScore;
+      aiScoreSpan.textContent = aiScore;
+      scoresDiv.style.display = 'block';
+    } else {
+      scoresDiv.style.display = 'none';
+    }
+    if (aiTimeout) {
+      clearTimeout(aiTimeout);
+      aiTimeout = null;
+    }
     for (let i = 1; i <= count; i++) {
       const text = i.toString();
       const metrics = ctx.measureText(text);
       currentTarget = null;
       targetSpan.textContent = '--';
       messageDiv.className = 'clear';
+      if (gameMode === 'vsAI') {
+        if (aiTimeout) {
+          clearTimeout(aiTimeout);
+          aiTimeout = null;
+        }
+        let resultText = '';
+        if (playerScore > aiScore) resultText = 'あなたの勝ち！';
+        else if (playerScore < aiScore) resultText = 'AIの勝ち！';
+        else resultText = '引き分け！';
+        messageDiv.textContent = 'ゲームクリア！結果: あなた ' + playerScore + ' - AI ' + aiScore + ' ' + resultText;
+      } else {
+        messageDiv.textContent = 'ゲームクリア！';
+      }
       return;
     }
     const idx = Math.floor(Math.random() * remaining.length);
     currentTarget = remaining[idx].num;
     targetSpan.textContent = currentTarget;
+    if (gameMode === 'vsAI') {
+      scheduleAIAttempt();
+    }
   }
   function repositionItems() {
     ctx.lineTo(x2, y1);
     ctx.stroke();
   }
+  function drawBlueCircle(item) {
+    const cx = item.x + item.width / 2;
+    const cy = item.y - item.height / 2;
+    const r = Math.max(item.width, item.height) / 2 + 5;
+    ctx.strokeStyle = 'blue';
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+    ctx.stroke();
+  }
+  function drawBlueCross(item) {
+    const x1 = item.x;
+    const y1 = item.y - item.height;
+    const x2 = item.x + item.width;
+    const y2 = item.y;
+    ctx.strokeStyle = 'blue';
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.moveTo(x1, y2);
+    ctx.lineTo(x2, y1);
+    ctx.stroke();
+  }
+  function scheduleAIAttempt() {
+    if (aiTimeout) clearTimeout(aiTimeout);
+    const delay = aiMinDelay + Math.random() * (aiMaxDelay - aiMinDelay);
+    aiTimeout = setTimeout(doAIAttempt, delay);
+  }
+  function doAIAttempt() {
+    aiTimeout = null;
+    if (gameMode !== 'vsAI' || currentTarget === null) return;
+    const correct = Math.random() < aiAccuracy;
+    if (correct) {
+      const idx = remaining.findIndex(item => item.num === currentTarget);
+      if (idx === -1) return;
+      const item = remaining[idx];
+      aiScore++;
+      aiScoreSpan.textContent = aiScore;
+      messageDiv.className = 'correct';
+      messageDiv.textContent = 'AIが正解！';
+      drawAll();
+      drawBlueCircle(item);
+      setTimeout(() => {
+        remaining.splice(idx, 1);
+        const oldItems = remaining.map(it => ({ ...it }));
+        const newItems = repositionItems();
+        animateReposition(oldItems, newItems, 1000, () => {
+          remaining = newItems;
+          pickNext();
+        });
+      }, 500);
+    } else {
+      if (remaining.length > 1) {
+        const wrongItems = remaining.filter(item => item.num !== currentTarget);
+        const wrongItem = wrongItems[Math.floor(Math.random() * wrongItems.length)];
+        messageDiv.className = 'wrong';
+        messageDiv.textContent = 'AIが間違えた！';
+        drawAll();
+        drawBlueCross(wrongItem);
+        setTimeout(drawAll, 500);
+      }
+      scheduleAIAttempt();
+    }
+  }
   canvas.addEventListener('click', e => {
     if (currentTarget === null) return;
       if (clickX >= item.x && clickX <= item.x + item.width &&
           clickY <= item.y && clickY >= item.y - item.height) {
         if (item.num === currentTarget) {
+          if (gameMode === 'vsAI') {
+            if (aiTimeout) {
+              clearTimeout(aiTimeout);
+              aiTimeout = null;
+            }
+            playerScore++;
+            playerScoreSpan.textContent = playerScore;
+          }
           messageDiv.className = 'correct';
           messageDiv.textContent = '正解！';
           drawAll();