Добавление очков в Bubble Pops - JS - PullRequest
Новая
       17

Добавление очков в Bubble Pops - JS

0 голосов
/ 30 декабря 2018

Попытка добавить точки к размеру пузырьков после того, как они лопнут.

Вот ссылка> http://mylesbanner.com/devprojectshome/bubble/bubble.html

Диапазон размеров пузырьков составляет от 10 до 100 пикселей.Пузыри в диапазоне от 10 до 30 пикселей будут составлять 5 баллов (так как их трудно выскочить) Пузыри в диапазоне от 31 до 70 пикселей будут составлять 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();
...