如何让Cookie Clicker游戏升级模块与居中Cookie并排且居左？

To achieve your desired layout—with the upgrade module fixed to the left and the cookie centered in the viewport—Flexbox is the perfect tool. It’s responsive and straightforward to implement. Here’s how to do it step by step:

Key Layout Concepts #

We’ll build a full-width flex container that holds three core parts:

1. The upgrade module (left-aligned, with a fixed width)
2. "Spacer" divs that fill remaining space to push the cookie to the center
3. The cookie container (centered relative to the entire viewport)

Step 1: HTML Structure #

Wrap your upgrade and cookie elements in a main container, with spacer divs on either side of the cookie to maintain centering:

<div class="main-container">
  <!-- Left-Aligned Upgrade Module -->
  <div class="upgrade-module">
    <h3>Upgrades</h3>
    <button class="upgrade-button" onclick="buyMultiplier()">Buy Multiplier (10 Cookies)</button>
    <div id="ammountMultiplier">Multiplier: x1</div>
  </div>

  <!-- Spacers to balance layout -->
  <div class="spacer"></div>

  <!-- Centered Cookie Container -->
  <div class="cookie-container">
    <img src="your-cookie-image.png" alt="Cookie" id="cookie" />
    <input type="text" id="text" readonly />
  </div>

  <div class="spacer"></div>
</div>

Step 2: CSS Layout #

Use Flexbox to control alignment and spacing:

/* Reset default browser styles */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Main flex container spanning full viewport */
.main-container {
  display: flex;
  align-items: center; /* Vertically center items */
  width: 100vw;
  min-height: 100vh; /* Fill full screen height */
}

/* Upgrade module styling */
.upgrade-module {
  width: 220px; /* Fixed width for the panel */
  padding: 2rem;
  background-color: #f0f0f0;
  border-right: 1px solid #ddd;
  height: 100vh; /* Make panel full height */
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Space between upgrade elements */
}

/* Spacers grow to fill remaining space */
.spacer {
  flex-grow: 1;
}

/* Cookie container styling */
.cookie-container {
  text-align: center; /* Center content inside the container */
}

/* Cookie image hover effect */
#cookie {
  width: 180px;
  height: 180px;
  cursor: pointer;
  transition: transform 0.1s;
}

#cookie:hover {
  transform: scale(1.05);
}

Step 3: Updated JavaScript #

I expanded your existing script to add functional cookie clicks and a working multiplier upgrade:

let cookiecount = 0;
let multiplier = 1;

function update() {
  document.getElementById('text').value = cookiecount;
  document.title = cookiecount + " Cookies";
  document.getElementById('ammountMultiplier').innerHTML = "Multiplier: x" + multiplier;
}

// Handle cookie clicks
document.getElementById('cookie').addEventListener('click', () => {
  cookiecount += multiplier;
  update();
});

// Handle multiplier purchase
function buyMultiplier() {
  if (cookiecount >= 10) {
    cookiecount -= 10;
    multiplier += 1;
    update();
  } else {
    alert("Not enough cookies to buy this upgrade!");
  }
}

How It Works #

• The main-container uses display: flex to arrange its children in a horizontal row.
• The two spacer divs use flex-grow: 1 to take up equal amounts of remaining space, ensuring the cookie stays perfectly centered relative to the entire screen.
• The upgrade-module has a fixed width, so it stays anchored to the left while the cookie remains centered.

Alternative: CSS Grid Layout #

If you prefer Grid over Flexbox, replace the .main-container CSS with this:

.main-container {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
}

.upgrade-module {
  grid-column: 1;
}

.cookie-container {
  grid-column: 3;
}

This creates four columns: upgrade, flexible space, cookie, flexible space—achieving the same centered cookie effect.

内容的提问来源于stack exchange，提问作者mahan lorik