Java反應游戲，得到隨機圖紙不起作用。當你開始游戲時，顏色和形狀不會顯示出來。

這是游戲應該做的隨機生成多達10個不同形狀，大小和顏色的圖紙。每個玩家可以玩10輪。在每一輪游戲中，他們被要求點擊某種顏色的特定形狀。例如，他們可能被要求點擊一個藍色方塊。一旦他們點擊了正確的圖畫，程序會記錄他們的反應時間并進入下一輪。10回合后，游戲進行到下一個玩家。當所有玩家完成他們的回合時，游戲顯示所有玩家的結果，根據他們的平均反應時間排名。平均反應時間最短的玩家獲勝。

桌面游戲的外觀

java文件

// Constants
const TOTAL_ROUNDS = 10;
const SHAPES = ['square', 'circle', 'triangle'];
const COLORS = ['blue', 'red', 'green'];

// Game variables
let players = [];
let currentPlayer = 0;
let currentRound = 1;
let reactions = [];

// DOM elements
const startButton = document.getElementById('startButton');
const instructionsContainer = document.getElementById('instructionsContainer');
const drawingContainer = document.getElementById('drawingContainer');
const resultsContainer = document.getElementById('resultsContainer');

// Initialize the game
function initializeGame() {
  const playerCount = parseInt(prompt('Enter the number of players:'));
  if (isNaN(playerCount) || playerCount <= 0) {
    alert('Invalid player count. Please enter a positive number.');
    return;
  }

  for (let i = 0; i < playerCount; i++) {
    const playerName = prompt('Enter player ' + (i + 1) + ' name:');
    players.push({
      name: playerName,
      reactionTimes: []
    });
  }

  startButton.addEventListener('click', startRound);
  startButton.disabled = false;
}

// Start a round
function startRound() {
  // Clear the previous round's elements
  drawingContainer.innerHTML = '';

  // Get the current drawing requirements
  const shape = getRandomElement(SHAPES);
  const color = getRandomElement(COLORS);
  const instructionsText = `Click on the specified shape and color: ${color} ${shape}`;
  instructionsContainer.textContent = instructionsText;

  // Generate random drawings
  for (let i = 0; i < TOTAL_ROUNDS; i++) {
    const drawing = generateDrawing();
    displayDrawing(drawing);
  }

  // Start the timer
  const startTime = Date.now();

  // Listen for click event on drawingContainer
  drawingContainer.addEventListener('click', function handleClick(event) {
    const clickedDrawing = event.target;
    const clickedShape = clickedDrawing.dataset.shape;
    const clickedColor = clickedDrawing.dataset.color;

    // Check if the clicked drawing matches the required shape and color
    if (clickedShape === shape && clickedColor === color) {
      const reactionTime = Date.now() - startTime;
      reactions.push(reactionTime);
      players[currentPlayer].reactionTimes.push(reactionTime);
      currentRound++;

      // Check if the current player has completed all rounds
      if (currentRound > TOTAL_ROUNDS) {
        currentPlayer++;
        currentRound = 1;
      }

      // Check if all players have completed the game
      if (currentPlayer >= players.length) {
        endGame();
      } else {
        startRound();
      }
    }
  });
}

// End the game and display results
function endGame() {
  // Disable the start button
  startButton.disabled = true;

  // Calculate average reaction times
  const playerResults = players.map((player) => {
    const reactionTimes = player.reactionTimes;
    const averageReactionTime = calculateAverage(reactionTimes);
    return {
      name: player.name,
      averageReactionTime: averageReactionTime
    };
  });

  // Sort the players based on average reaction time
  playerResults.sort((a, b) => a.averageReactionTime - b.averageReactionTime);

  // Display the results
  let resultsHTML = '<h2>Game Results</h2>';
  playerResults.forEach((result, index) => {
    const rank = index + 1;
    resultsHTML += `<p>${rank}. ${result.name}: ${result.averageReactionTime.toFixed(2)} ms</p>`;
  });
  resultsContainer.innerHTML = resultsHTML;
}

// Generate a random drawing
function generateDrawing() {
  const shape = getRandomElement(SHAPES);
  const color = getRandomElement(COLORS);
  return { shape, color };
}

// Display a drawing on the drawing container
function displayDrawing(drawing) {
  const drawingElement = document.createElement('div');
  drawingElement.classList.add('drawing');
  drawingElement.dataset.shape = drawing.shape;
  drawingElement.dataset.color = drawing.color;
  drawingContainer.appendChild(drawingElement);
}

// Get a random element from an array
function getRandomElement(array) {
  const randomIndex = Math.floor(Math.random() * array.length);
  return array[randomIndex];
}

// Calculate the average of an array of numbers
function calculateAverage(numbers) {
  if (numbers.length === 0) {
    return 0;
  }
  const sum = numbers.reduce((acc, curr) => acc + curr, 0);
  return sum / numbers.length;
}

// Initialize the game when the page loads
window.addEventListener('DOMContentLoaded', initializeGame);

html文件

<!DOCTYPE html>
<html>
<head>
  <title>Reaction Game</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Reaction Game</h1>
  <div id="gameContainer">
    <div id="instructionsContainer">
      <p id="instructions">Click on the specified shape and color:</p>
    </div>
    <div id="drawingContainer"></div>
    <button id="startButton">Start Game</button>
    <div id="resultsContainer"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

css文件

#gameContainer {
  text-align: center;
}

#instructions {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

#drawingContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.drawing {
 
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 2px solid black;
}

.square {
  background-color: blue;
}

.circle {
  background-color: red;
  border-radius: 50%;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

button {
  font-size: 16px;
  padding: 10px 20px;
  margin-top: 20px;
}

#resultsContainer {
  font-size: 18px;
  margin-top: 20px;
  text-align: left;
}

有人能幫忙嗎？