Thiết kế website giá rẻ

Question

Ok, so basically I was writing the code for a HTML game to test my skills and here is the problem – for example I collected 1 cube and for some reason It counted me 6 points (sometimes 5). Also the speed should change every cube collected. BTW the game is on polish but I think you’ll understand.

HERE’S THE CODE

var gameContainer = document.getElementById("game-container");
var catcher = document.getElementById("catcher");
var endMessage = document.getElementById("end-message");
var scoreDisplay = document.getElementById("score");
var score = 0;
var missedCubes = 0; // Counter for missed cubes
var cubes = []; // Array to store falling cubes

var initialInterval = 1870; // Initial interval for cube creation (1.87 seconds)
var intervalChangeRate = 0.8; // Rate at which the interval decreases (20%)
var initialSpeed = 1.0; // Initial speed of cube falling (pixels per frame)
var speedIncreaseRate = 0.1; // Rate at which the speed increases (0.1 units every 5 seconds)

var mainMenu = document.getElementById("main-menu");
var controlsMenu = document.getElementById("controls-menu");
var objectCreationInterval;
var speedChangeInterval;

function startGame() {
  mainMenu.style.display = "none";
  controlsMenu.style.display = "none";
  gameContainer.style.display = "block";
  catcher.style.display = "block"; // Show the catcher when starting the game
  initializeGame();
}

function showControls() {
  mainMenu.style.display = "none";
  controlsMenu.style.display = "block";
}

function hideControls() {
  controlsMenu.style.display = "none";
  mainMenu.style.display = "block";
}

function initializeGame() {
  gameContainer.addEventListener("mousemove", function(event) {
    var containerWidth = gameContainer.offsetWidth;
    var catcherWidth = catcher.offsetWidth;
    var mouseX = event.pageX - gameContainer.offsetLeft;

    // Keep the catcher within the game container
    var maxCatcherX = containerWidth - catcherWidth;
    var catcherX = Math.min(maxCatcherX, Math.max(0, mouseX - catcherWidth / 2));

    catcher.style.left = catcherX + "px";
  });

  function createObject() {
    var object = document.createElement("div");
    object.className = "object";

    // Randomly position the object within the game container
    var containerWidth = gameContainer.offsetWidth;
    var objectWidth = object.offsetWidth;
    var maxObjectX = containerWidth - objectWidth;
    var objectX = Math.floor(Math.random() * maxObjectX);

    object.style.left = objectX + "px";
    object.style.top = "0px"; // Start from the top

    cubes.push(object);
    gameContainer.appendChild(object);

    // Animate the falling object
    var speed = initialSpeed;
    var animationInterval = setInterval(function() {
      var objectY = object.offsetTop;
      var containerHeight = gameContainer.offsetHeight;

      // Check if the object has reached the catcher or the bottom of the container
      if (objectY + object.offsetHeight >= catcher.offsetTop && objectY <= catcher.offsetTop + catcher.offsetHeight && isColliding(catcher, object)) {
        gameContainer.removeChild(object);
        cubes.splice(cubes.indexOf(object), 1);
        score++;
        scoreDisplay.textContent = score;
        clearInterval(animationInterval); // Clear interval after collision to avoid incrementing score twice
      } else if (objectY >= containerHeight) {
        clearInterval(animationInterval);
        gameContainer.removeChild(object);
        cubes.splice(cubes.indexOf(object), 1);
        missedCubes++; // Increment missed cubes counter
        if (missedCubes >= 1) {
          endGame(); // Trigger end of the game
        }
      } else {
        object.style.top = (objectY + speed) + "px"; // Make the object fall with the current speed
      }
    }, 10);

    // Change the color of the object one by one
    var colors = ["red", "green", "blue", "yellow"]; // Add more colors if desired
    var currentColorIndex = 0;

    object.style.backgroundColor = colors[currentColorIndex];
    setInterval(function() {
      currentColorIndex = (currentColorIndex + 1) % colors.length;
      object.style.backgroundColor = colors[currentColorIndex];
    }, 500);
  }

  function isColliding(element1, element2) {
    var rect1 = element1.getBoundingClientRect();
    var rect2 = element2.getBoundingClientRect();

    return !(rect1.right < rect2.left ||
      rect1.left > rect2.right ||
      rect1.bottom < rect2.top ||
      rect1.top > rect2.bottom);
  }

  function endGame() {
    clearInterval(objectCreationInterval);
    clearInterval(speedChangeInterval);
    endMessage.style.display = "block";
    scoreDisplay.textContent = score;
    gameContainer.style.display = "none";
    catcher.style.display = "none";
    missedCubes = 0; // Reset missed cubes counter
    score = 0; // Reset score
  }

  objectCreationInterval = setInterval(createObject, initialInterval);

  // Increase the speed every 5 seconds
  speedChangeInterval = setInterval(function() {
    initialSpeed += speedIncreaseRate;
  }, 5000);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  display: none;
  /* Hide the game container initially */
}

#catcher {
  position: absolute;
  bottom: 5vh;
  /* Adjusted value to move the palette higher */
  width: 11.6vw;
  height: 3vh;
  background-color: blue;
}

.object {
  position: absolute;
  width: 1.7vw;
  height: 1.7vw;
  background-color: red;
}

#end-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 45px;
  display: none;
}

.menu-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.menu-title {
  font-weight: bold;
  font-size: 40px;
}

.menu-item {
  font-size: 26px;
  cursor: pointer;
  margin-bottom: 10px;
}

<div id="game-container">
  <div id="catcher"></div>
</div>
<div id="end-message">Koniec Gry! Twój wynik to: <span id="score"></span></div>

<div id="main-menu" class="menu-container">
  <div class="menu-title">Menu główne</div>
  <br>
  <div class="menu-item" onclick="startGame()">Zacznij grać</div>
  <br>
  <div class="menu-item" onclick="showControls()">Sterowanie</div>
</div>

<div id="controls-menu" class="menu-container" style="display: none;">
  <div class="menu-item" onclick="hideControls()"><b>Wróć</b></div>
  <div>Poruszaj myszką w lewo i prawo, aby sterować niebieską paletką.</div>
</div>

I tried fixing It by preventing multiplying points, stacking cubes and resetting points after every game, but nothing happened.

Thiết kế website giá rẻ

Danh mục

Counting Points