将文本居中在各自的图像上并分割图像，值

const items = [
  { name: "Ferrari Portofino 2021", value: 250000, imageSrc: "https://cdn.vox-cdn.com/thumbor/K0DGSuoYmpv34Jli04xH2g5nGfk=/0x0:5385x3029/1000x1000/filters:focal(2693x1515:2694x1516)/cdn.vox-cdn.com/uploads/chorus_asset/file/22780648/COUNTACH_LPI800_4__2_.jpg" },
  { name: "Lamborghini Gallardo", value: 126000, imageSrc: "https://di-uploads-pod30.dealerinspire.com/bmwofschererville/uploads/2021/10/1-BMW-Exterior-1000x1000-Oct2021.png" },
  { name: "BMW X60", value: 10000000, imageSrc:"https://img.freepik.com/premium-photo/luxury-house-with-luxury-car-ai-generate_539191-2658.jpg" },
  { name: "Luxury25", value: 30000000 ,imageSrc:"https://img.freepik.com/premium-photo/luxury-house-with-luxury-car-ai-generate_539191-2634.jpg"},
  { name: "Ferrari FF", value: 2000000, imageSrc: "https://i.pinimg.com/originals/54/a7/13/54a7136b78041477c6863d848dbba231.jpg" },
  // Add more items and their values here
];

let currentScore = 0;
let item1, item2, correctIndex;

const item1Element = document.getElementById("item1");
const item2Element = document.getElementById("item2");
const scoreTextElement = document.getElementById("score-text");
const questionTextElement = document.getElementById("question-text");
const moreButton = document.getElementById("more");
const lessButton = document.getElementById("less");
const valueIndex = document.getElementById("valueIndex");
const navPlay = document.getElementById("playy")
const playNav = document.getElementById("playnav")
const highScore = document.getElementById("highScore")
function startNewRound() {
  const index1 = Math.floor(Math.random() * items.length);
  let index2;
  do {
    index2 = Math.floor(Math.random() * items.length);
  } while (index2 === index1);

  item1 = items[index1];
  item2 = items[index2];

  item1Element.src = item1.imageSrc;
  item2Element.src = item2.imageSrc;
  setTimeout(function () {
    item1Element.style.opacity = 1;
    item2Element.style.opacity = 1;
  }, 100);

  questionTextElement.innerHTML = `${item1.name}                                                    ${item2.name}`;
  document.getElementById("item1").textContent = item1.name + " " + formatCurrency(item1.value);
  document.getElementById("item2").textContent = item2.name + " " + formatCurrency(item2.value);

  correctIndex = item1.value > item2.value ? 0 : 1;

  moreButton.addEventListener("click", handleMoreClick);
  lessButton.addEventListener("click", handleLessClick);
  
}

// WHEN CLICKED #playy OPEN CATEGORIES POPUP
navPlay.addEventListener("click", function()
  {
    popup.style.display = "block"
  });
//````````````````````````````````````````````



function handleMoreClick() {
  handleItemClick(0, correctIndex);
  showValue(0, correctIndex, item1, item2);
  removeClickListeners();
}

function handleLessClick() {
  handleItemClick(1, correctIndex);
  showValue(1, correctIndex, item1, item2);
  removeClickListeners();
}

function removeClickListeners() {
  moreButton.removeEventListener("click", handleMoreClick);
  lessButton.removeEventListener("click", handleLessClick);
}

function startNewGame() {
  currentScore = 0;
  scoreTextElement.textContent = `Score: ${currentScore}`;
  startNewRound();
}

function endGame() {
  moreButton.disabled = true;
  lessButton.disabled = true;

  const playAgainButton = document.createElement("button");
  playAgainButton.textContent = "Play Again";
  playAgainButton.addEventListener("click", function () {
    moreButton.disabled = false;
    lessButton.disabled = false;
    valueIndex.style.display = "none";
    playAgainButton.remove();
    startNewGame();
  });

  questionTextElement.textContent = "Game Over!";
  questionTextElement.appendChild(playAgainButton);
  playAgainButton.style.pointerEvents = "all";
}

function handleItemClick(clickedIndex, correctIndex) {
  if (clickedIndex === correctIndex) {
    currentScore++;
    scoreTextElement.textContent = `Score: ${currentScore}`;
    alert("You Guessed Correct");
  } else {
    endGame();
    return;
  }

  setTimeout(startNewRound, 1000);
}

function showValue(clickedIndex, correctIndex, item1, item2) {
  if (clickedIndex === correctIndex) {
    valueIndex.innerHTML = `${formatCurrency(item1.value)}                             ${formatCurrency(item2.value)}`;
    valueIndex.style.display = "block";
  } else {
    valueIndex.style.display = "none";
  }
}

function formatCurrency(value) {
  return `$${value.toLocaleString()}`;
}

/* if(currentScore++)
{
  highScore = currentScore;
  highScore.textContent("High Score: ");
}
 */




document.addEventListener("DOMContentLoaded", function () {
  const playButton = document.querySelector(".play");
  const popup = document.getElementById("popup");
  const closePopupButton = document.getElementById("close-popup");
  const categoryButtons = document.querySelectorAll(".category");
  const gameStarted = document.querySelector(".gameStarted");
  const mainPage = document.getElementById("main-page");
  const main = document.querySelector("main");
  const body = document.querySelector("body");

  playButton.addEventListener("click", function() {
    popup.style.display = "block";
  });

  closePopupButton.addEventListener("click", function() {
    popup.style.display = "none";
  });

  playNav.addEventListener("click", function()
{
    popup.style.display = "none";
    mainPage.style.display = "none";
    gameStarted.style.display = "block";
    main.style.display = "none";
    gameStarted.classList.add('active');
    body.classList.add('active');
    startNewRound();
  });
  categoryButtons.forEach(function(button) {
    button.addEventListener("click", function() {
      popup.style.display = "none";
      mainPage.style.display = "none";
      gameStarted.style.display = "block";
      main.style.display = "none";
      gameStarted.classList.add('active');
      body.classList.add('active');
      startNewRound();
    });
  });
});

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: Ink Free;
}

html,body,.body.active{
    pointer-events:none;
}
/*SET THE NAVIGATION BAR AT THE TOP OF THE SCREEN, REMOVE BACKGROUND COLOR AND BOX SHADOW LATER ON*/
.navbar{
    
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
 
  pointer-events:all;
  
}
html{
    overflow-x: hidden;
}

/*SETTING THE LOGO COLOR AND ANIMATION*/
h1{
    color: white;
    font-size: 2rem;
    margin-left: 2rem;
   
}
h1>a:hover{
    margin-left: 2rem;
    transition: 0.5s ease-out;
  
}
/*SETTING THE NAVBAR*/
li>a{
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
    margin-left: 0.6rem;
    margin-right: 3rem;
}
li>a:hover{
    color:bisque;
    opacity: 0.8;
    transition: 0.25s ease-out;
}
h1>a{
    text-decoration: none;
    color: white;
}
ul{
    list-style-type: none;
}

/*BACKGROUND IMAGE SET TO FIT, CHANGE THE WIDTH AND HEIGHT VH IF NEEDED, OPACITY TO 1 OR REMOVE*/
body{
    background-image: url("https://wallpapercave.com/wp/wp8327655.jpg");
  background-size: cover; 
    width: 100vh;
    height: 100vh;
    opacity: 1;
    object-fit: cover;
    
  
}
/*THE MAIN TEXT AT THE MIDDLE OF THE SCREEN*/
.wwm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.title{
    font-size: 5rem;

}

/*PLAY BUTTON NEEDS JAVASCRIPT*/
.play{
    margin-top: 1rem;
font-size: 3rem;
padding: 0rem 3rem;
background-color: rgba(122, 64, 72, 0);
color: white;
border-radius: 2rem;
border: 0.125rem solid #fff;
pointer-events:all;

}
.play:hover{
    background-color: rgb(255, 252, 252);
    transition: .50s ease-in-out;
    color: black;
}


/*chatgpt*/
.popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    pointer-events:all;
 padding-top: 350px;
    
}

.popup-content {
    background: white;
    width: 60%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.category {
    margin: 5px;
    padding: 10px 20px;
   
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 2rem;
    background-color: black;
color: white;
}

.category:hover{

    background-color: wheat;
    color: black;
transition: 0.50s ease;
}
.close-popup {
    margin-top: 20px;
    background-color: #DC3545;
    font-size: 1.8rem;
    padding: 0rem 1rem;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 2rem;
}

.close-popup:hover{
    background-color: red;
    transition: 0.50s ease;

}


.gameStarted {
    display: none;
    position: relative; /* Change the position to relative */
    margin-top: 0; /* Remove the top margin */
}

.gameStarted.active{
    
    display: none;
    position: relative; /* Change the position to relative */
    margin-top: 0; /* Remove the top margin */
}


.divv{
    flex-direction: row;
    border: 2px solid red;
}


.body.active{
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59/var(--tw-bg-opacity));
    transition: 1s ease;
   
}

/* Style the game container */






.line{
    position: absolute;
display: flex;
top: 50%;
left: 103%;
transform: translate(-50%, -20%);
height: 100vh;
align-items: center;
opacity: 0.9;
z-index: 104;
}
.vs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: white;
    color: black;
    font-size: 44px; /* Adjust font size as needed */
    font-weight: bold; /* Optionally make the text bold */
    z-index: 104;
   position: relative;
}


:root{

    --color: white;
    --font-size: 3rem;
}
.dog {
    background-color: var(--color); /* Use the variable --main-color */
    color: white;
    padding: 10px 20px;
  }

   

  @import url('https://fonts.cdnfonts.com/css/rooneysans');
  .question-text {
    
    color: white;
    position: relative;
    z-index: 1000;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-25%, 500%);
    width: 98vw;
    font-family: 'RooneySans', sans-serif;
    font-size: 3rem;

} 



/* Add this CSS to your existing styles.css file */

#item1{
  width:50vw;
  height:100vh;
  margin: 0;
  padding: 0;
  min-height: 973px;
  min-width: 1000px;
  object-fit: cover;
  
}

#item2{
 
    width:50vw;
    height:100vh;
    margin: 0;
  padding: 0;
 min-height: 973px;
  min-width: 1000px;
  object-fit: cover;
 
  
}


.the-images {
    display: flex;
    position: absolute;
    z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.the-images img {
    object-fit: cover;
    height: 100%;
    width: 100%;

  }
  img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
#more,#less{
   display: flex;
   font-size: 2rem;
   padding: 0.8rem 5.5rem;
   color: #fff989;
   border-radius: 2.5rem;
   border: 0.125rem solid #fff;
   margin-bottom: 1rem;
   background-color: rgba(255,255,255,0);
   pointer-events:all;

}

#more:hover, #less:hover{
    background-color: rgba(255,255,255,1);
    color: black;
    transition: 0.50s ease;
}
#less{
    font-size: 2rem;
    padding: 0.8rem 5.7rem;
}
.buttons{
    position: relative;
    display: inline-block;
    position: absolute;
    top: 80%;
    left: 150%;
    transform: translate(-50%, 300%);
    position: relative;
    z-index: 103;
}


.score-text{
   color: white;
   display: inline-block;
   position: relative;
   z-index: 105;
   font-size: 2rem;
 top: 100%;
 left: 195%;
 transform: translate(-100%, 2380%);
}


#valueIndex {
    color: green;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    top: 50%;
    left: 50%;
    transform: translate(28%, -50%);
    width: 98vw;
    font-family: 'RooneySans', sans-serif;
    font-size: 3rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Whats Worth More</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
    <main>
        <div id="main-page">
            <header class="navbar">
                <h1><a href="#">WWM</a></h1>
                <nav class="nav">
                    <ul>
                        <li>
                            <a id="playnav"href="#gameStarted">Play</a>
                            <a id="playy" href="#popup">Gamemodes</a>
                        </li>
                    </ul>
                </nav>
            </header>
        </div>
        <section class="main">
            <div class="wwm">
                <h2 class="title">Whats Worth More</h2>
                <button class="play" id="playy">Play</button>
            </div>
        </section>
        <div class="popup" id="popup">
            <div class="popup-content">
                <h2>Select a Gamemode</h2>
                <div class="categories">
                    <button class="category">Classic</button>     
                </div>
                <button class="close-popup" id="close-popup">Close</button>
            </div>
        </div>
    </main>
 
  
    <div class="gameStarted">
        <div class="line"><p class="vs">VS</p></div>
        <div id="score-container" class="score-container">
           <p id="score-text" class="score-text">Score: 0</p>
       </div>
        <h2 id="question-text" class="question-text">
       
            <span class="item">${item2.name} ${item2.value}</span>
            <span class="space">&nbsp;&nbsp;&nbsp;</span>
            <span class="item">${item1.name} ${item1.value}</span>
        
        </h2>
         
        
        <h3 id="valueIndex">
            <span class="value">${item2.value}</span> 
            <span class="space">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="value">${item1.value}</span> 
        </h3>
        <div class="buttons">
            <button id="more">
                More
               </button>
               <button id="less">
                Less
               </button>
        </div>
        
            <div class="the-images">
                <img id="item1" class="item" src="" alt="Item 1">
                <img id="item2" class="item" src="" alt="Item 2">
            </div>
             
               <div id="highScore">
              <span></span>
               </div>
            
             
            
    </div>

    <script src="questions.js"></script>
    <script src="game.js"></script>
</body>
</html>