HTML/JS游戏：如何实现玩家方块颜色自定义与启动页功能？

Hey Sebastian, great questions—both of these features are totally achievable with vanilla HTML, CSS, and JavaScript, and I’ll show you straightforward ways to implement them. Let’s dive in!

1. Let Players Customize Their Block Color #

Absolutely! You can add a color selection interface (like a color picker or preset swatches) on your launch screen, then pass the chosen color to your player sprite when the game starts. Here’s how to do it:

Step 1: Add Color Selection to Your Launch Screen #

In your HTML, add a section for color choices. For simplicity, I’ll use a native color input and some preset swatches:

<!-- Launch Screen -->
<div id="launch-screen">
  <h1>Choose Your Player Color</h1>
  <div class="color-options">
    <input type="color" id="custom-color" value="#ff0000">
    <div class="color-swatch" style="background: #ff0000" data-color="#ff0000"></div>
    <div class="color-swatch" style="background: #00ff00" data-color="#00ff00"></div>
    <div class="color-swatch" style="background: #0000ff" data-color="#0000ff"></div>
  </div>
  <button id="start-game-btn">Start Game</button>
</div>

<!-- Game Container (hidden by default) -->
<div id="game-container" style="display: none;">
  <div id="player"></div>
  <!-- Rest of your game elements -->
</div>

Step 2: Style the Color Swatches (Optional but Nice) #

Add some CSS to make the swatches clickable and visually appealing:

.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  border: 2px solid transparent;
}

.color-swatch.selected {
  border-color: #333;
}

Step 3: Capture the Chosen Color and Apply It to the Player #

In your JavaScript, listen for clicks on swatches or changes to the color input, store the selected color, then apply it when starting the game:

let selectedColor = "#ff0000"; // Default color

// Handle swatch clicks
document.querySelectorAll('.color-swatch').forEach(swatch => {
  swatch.addEventListener('click', () => {
    // Remove selected class from all swatches
    document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected'));
    // Add selected class to clicked swatch
    swatch.classList.add('selected');
    // Update selected color
    selectedColor = swatch.dataset.color;
    // Sync color input with swatch
    document.getElementById('custom-color').value = selectedColor;
  });
});

// Handle custom color input changes
document.getElementById('custom-color').addEventListener('input', (e) => {
  selectedColor = e.target.value;
  // Update swatches to reflect custom color
  document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected'));
});

// Start game button click handler
document.getElementById('start-game-btn').addEventListener('click', () => {
  // Hide launch screen, show game container
  document.getElementById('launch-screen').style.display = 'none';
  document.getElementById('game-container').style.display = 'block';
  
  // Apply selected color to player sprite
  const player = document.getElementById('player');
  player.style.backgroundColor = selectedColor;
  
  // Initialize your game logic here (start movement, spawn enemies, etc.)
  initGame();
});

// Your existing game initialization function
function initGame() {
  // Your current game code (player movement, collision detection, etc.)
}

2. Adding a Launch Screen Instead of Instant Game Start #

As you can see in the code above, the key here is to hide the game container by default and show the launch screen first. When the user selects their color and clicks "Start Game", we toggle the visibility of the two sections.

A few extra tips to polish the launch screen:

• Add some styling to make it stand out (center the content, add a background, etc.)
• You could add other options here too, like difficulty levels or sound toggles
• If your game loads assets (sprites, sounds), you could add a loading progress bar in the launch screen before allowing the user to start

Example Launch Screen CSS #

#launch-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-family: Arial, sans-serif;
}

#start-game-btn {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  cursor: pointer;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

#start-game-btn:hover {
  background: #45a049;
}

That’s it! Both features integrate smoothly with your existing game code. Just drop these snippets in and adjust them to match your game’s styling and structure.

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