Question

在弹出气泡后尝试向气泡大小添加点。

这里是链接> http://mylesbanner.com/devprojectshome/bubble/bubble.html

气泡的大小范围是直径10像素到100像素。 10px-30px范围内的气泡将获得5分（因为它们难以弹出）在31px至70px范围内的气泡将为3分。大男孩泡泡，范围从71px到100px仅为1点。

不确定到目前为止如何解决该问题，并继续尝试失败。

到目前为止，这是我的js：

let bubbleCount = 0;
let startGame = function () {
let mainBody = document.getElementById("bubbles");
let test = "hello";
let speedVal = {
10: "20s",
20: "17s",
30: "15s",
40: "13s",
50: "10s",
60: "9s",
70: "8s",
80: "7s",
90: "6s",
100: "5s" };


function updateScore(el, size) {
let score = document.getElementById("score");
let points = 100 / size;
let newScore = parseInt(score.innerHTML) + points;
score.innerHTML = newScore.toFixed(0);
mainBody.removeChild(document.getElementById(el));
}

  let slider = document.getElementById("slider");
  slider.addEventListener("change", function (e) {
let speed = e.target.value;
console.log(window.innerHeight);
let root = document.documentElement;
root.style.setProperty("--speed", speedVal[speed]);
});

return function () {
setInterval(function () {
  let bubble = document.createElement("div");
  bubble.setAttribute("class", "bubble");
  let bubbleId = "bubble_" + ++bubbleCount;
  let size = Math.floor(Math.random() * (100 - 10 + 1) + 10);
  let left = Math.floor(Math.random() * (window.innerWidth - size));
  // const color = getRandomColor();

  bubble.setAttribute("id", bubbleId);
  bubble.setAttribute("size", size);
  bubble.style.height = size + "px";
  bubble.style.width = size + "px";
  bubble.style.left = left + "px";

  bubble.addEventListener(
  "click",
  function () {
    updateScore(bubbleId, size);
  },
  { once: true });

  mainBody.appendChild(bubble);
}, 1000);
};
 }();
 startGame();

为泡泡流行音乐添加点-JS

0 个答案: