Javascript. Изменения стиля, затрагивающие два элемента, хотя их значения регистрируются по-разному - PullRequest
Новая
       1

Javascript. Изменения стиля, затрагивающие два элемента, хотя их значения регистрируются по-разному

3 голосов
/ 05 апреля 2020

Я практикую localStorage с простой игрой-кликером, и у меня есть два элемента "апгрейда", которые ускоряют игровой процесс. Когда они нажимаются, они изменяют заданное значение c с 0 на 1, а также изменяют элемент с видимого на скрытый.

Когда я «покупаю» обновление, а затем сохраняю игру и обновляю sh журнал, он возвращает значения правильно, если я купил одно обновление (значение этого обновления равно 1, а значение другого обновления все еще равно 0). Однако, несмотря на то, что они регистрируют два разных значения, оператор if, который проверяет значение 0, по-прежнему вызывает скрытие обоих элементов при покупке только одного.

Я добавил CSS / HTML и очистил ненужные биты. Я не знаю, как заставить фрагмент работать с localStorage, но результаты должны воспроизводиться здесь. 

//declare constants
const storage = window.localStorage;
const counter = document.getElementById("count");
const clicker = document.getElementById("clicker");
const savebtn = document.getElementById("savebtn");
const clearbtn = document.getElementById("clearbtn");
const auto = document.getElementById("auto");
const up1 = document.getElementById("up1");
const up2 = document.getElementById("up2");


let save = {};
var clickStrength = 1;
var passive = 0;
var up1done = 0;
var up2done = 0;

//check save
if (storage.getItem("save")) {
  save = JSON.parse(storage.getItem("save"));
  counter.innerHTML = "Gold: " + save.count;
  clickStrength = JSON.parse(storage.getItem("clickStrength"));
  passive= JSON.parse(storage.getItem("passive"));

  //check upgrades
  if (JSON.parse(storage.getItem("up1done") === 0)) {
    up1.style.visibility = "visible";
  } else {
    up1.style.visibility = "hidden";
  };

  if (JSON.parse(storage.getItem("up2done") === 0)) {
    up2.style.visibility = "visible";
  } else {
    up2.style.visibility = "hidden";
  };

} else {
  save.count = 0;
  counter.innerHTML = "Gold: " + 0;
};

clicker.addEventListener("click", function() {
  save.count = save.count + clickStrength;
  counter.innerHTML = "Gold: " + save.count;
});

//save
savebtn.addEventListener("click", function() {
  storage.setItem("save", JSON.stringify(save));
  storage.setItem("clickStrength", JSON.stringify(clickStrength));
  storage.setItem("passive", JSON.stringify(passive));
  storage.setItem("up1done", JSON.stringify(up1done));
  storage.setItem("up2done", JSON.stringify(up2done));
});

//clear
clearbtn.addEventListener("click", function () {
  storage.clear();
});

//Upgrades
up1.addEventListener("click", function() {
  clickStrength = clickStrength + 1;
  up1.style.visibility = "hidden";
  up1done = up1done + 1;
});

up2.addEventListener("click", function() {
  passive = passive + 0.5;
  up2.style.visibility = "hidden";
  up2done = up2done + 1;
});


console.log(up1done);
console.log(up2done);
console.log(JSON.parse(storage.getItem("up1done")));
console.log(clickStrength);
console.log(JSON.parse(storage.getItem("up2done")));
#wrapper {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  height: 98vh;
  width: 100%;
  grid-gap: 10px;
}

#savebar {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1/3;
  grid-row: 1/2;
  grid-gap: 10px;
}

.savebtn {
  text-align: center;
  height: 30%;
  align-self: center;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 5vh;
  color: white;
  -webkit-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
  box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
}

#savebtn {
  background-color: green;
}

#clearbtn {
  background-color: red;
}

#auto {
  background-color: blue;
}

#gamespace {
  grid-column: 1/3;
  grid-row: 2/5;
}


#upgrades {
  grid-column: 3/4;
  grid-row: 1/5;
}

#upInfo {
  text-align: center;
  margin-top: 5vh;
  font-size: 2.5em;
}

#upsWrap {
  grid-gap: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.ups {
  width: 90%;
  cursor: pointer;
  width: 100px;
  height: 100px;
  background-color: red;
}

.upsTool {
  visibility: hidden;
  position: absolute;
  text-align: center;
  background-color: darkGrey;
  width: 10vw;
  height: 5vh;
  line-height: 5vh;
  margin-left: 3.25vh;
  font-size: .85em;
  border-radius: 8px;
}

.ups:hover .upsTool {
  visibility: visible;
}
<body>

  <div id="wrapper">

    <div id="savebar">
      <span id="savebtn" class="savebtn">Save</span>
      <span id="clearbtn" class="savebtn">Clear</span>
      <span id="auto" class="savebtn"></span>
    </div>

    <div id="gamespace">
      <div id="clicker">Click Me!</div>
      <div id="count">Gold: 0</div>
    </div>



    <div id="upgrades">
      <div id="upInfo">Upgrades!</div>
      <div id="upsWrap">
        <div id="up1" class="ups"><div id="up1Tool" class="upsTool">Click gold +1</div></div>
        <div id="up2" class="ups"><div id="up2Tool" class="upsTool">Income +0.5</div></div>
      </div>
    </div>

  </div>

</body>

1 Ответ

1 голос
/ 05 апреля 2020

Вы просто сделали опечатку здесь: 

if (JSON.parse(storage.getItem("up1done") === 0)) {
   ...
}

Взгляните на скобки. Это должно быть if (JSON.parse(storage.getItem("up1done")) === 0). Вы можете запустить localStorage в JSFiddle. Попробуйте запустить его здесь . 

//declare constants
const storage = window.localStorage;
const counter = document.getElementById("count");
const clicker = document.getElementById("clicker");
const savebtn = document.getElementById("savebtn");
const clearbtn = document.getElementById("clearbtn");
const auto = document.getElementById("auto");
const up1 = document.getElementById("up1");
const up2 = document.getElementById("up2");


let save = {};
var clickStrength = 1;
var passive = 0;
var up1done = 0;
var up2done = 0;

//check save
if (storage.getItem("save")) {
  save = JSON.parse(storage.getItem("save"));
  counter.innerHTML = "Gold: " + save.count;
  clickStrength = JSON.parse(storage.getItem("clickStrength"));
  passive= JSON.parse(storage.getItem("passive"));

  //check upgrades
  if (JSON.parse(storage.getItem("up1done")) === 0) {
    up1.style.visibility = "visible";
  } else {
    up1.style.visibility = "hidden";
  };

  if (JSON.parse(storage.getItem("up2done")) === 0) {
    up2.style.visibility = "visible";
  } else {
    up2.style.visibility = "hidden";
  };

} else {
  save.count = 0;
  counter.innerHTML = "Gold: " + 0;
};

clicker.addEventListener("click", function() {
  save.count = save.count + clickStrength;
  counter.innerHTML = "Gold: " + save.count;
});

//save
savebtn.addEventListener("click", function() {
  storage.setItem("save", JSON.stringify(save));
  storage.setItem("clickStrength", JSON.stringify(clickStrength));
  storage.setItem("passive", JSON.stringify(passive));
  storage.setItem("up1done", JSON.stringify(up1done));
  storage.setItem("up2done", JSON.stringify(up2done));
});

//clear
clearbtn.addEventListener("click", function () {
  storage.clear();
});

//Upgrades
up1.addEventListener("click", function() {
  clickStrength = clickStrength + 1;
  up1.style.visibility = "hidden";
  up1done = up1done + 1;
});

up2.addEventListener("click", function() {
  passive = passive + 0.5;
  up2.style.visibility = "hidden";
  up2done = up2done + 1;
});


console.log(up1done);
console.log(up2done);
console.log(JSON.parse(storage.getItem("up1done")));
console.log(clickStrength);
console.log(JSON.parse(storage.getItem("up2done")));
#wrapper {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  height: 98vh;
  width: 100%;
  grid-gap: 10px;
}

#savebar {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1/3;
  grid-row: 1/2;
  grid-gap: 10px;
}

.savebtn {
  text-align: center;
  height: 30%;
  align-self: center;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 5vh;
  color: white;
  -webkit-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
  box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
}

#savebtn {
  background-color: green;
}

#clearbtn {
  background-color: red;
}

#auto {
  background-color: blue;
}

#gamespace {
  grid-column: 1/3;
  grid-row: 2/5;
}


#upgrades {
  grid-column: 3/4;
  grid-row: 1/5;
}

#upInfo {
  text-align: center;
  margin-top: 5vh;
  font-size: 2.5em;
}

#upsWrap {
  grid-gap: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.ups {
  width: 90%;
  cursor: pointer;
  width: 100px;
  height: 100px;
  background-color: red;
}

.upsTool {
  visibility: hidden;
  position: absolute;
  text-align: center;
  background-color: darkGrey;
  width: 10vw;
  height: 5vh;
  line-height: 5vh;
  margin-left: 3.25vh;
  font-size: .85em;
  border-radius: 8px;
}

.ups:hover .upsTool {
  visibility: visible;
}
<body>

  <div id="wrapper">

    <div id="savebar">
      <span id="savebtn" class="savebtn">Save</span>
      <span id="clearbtn" class="savebtn">Clear</span>
      <span id="auto" class="savebtn"></span>
    </div>

    <div id="gamespace">
      <div id="clicker">Click Me!</div>
      <div id="count">Gold: 0</div>
    </div>



    <div id="upgrades">
      <div id="upInfo">Upgrades!</div>
      <div id="upsWrap">
        <div id="up1" class="ups"><div id="up1Tool" class="upsTool">Click gold +1</div></div>
        <div id="up2" class="ups"><div id="up2Tool" class="upsTool">Income +0.5</div></div>
      </div>
    </div>

  </div>

</body>

Хотя это не имеет отношения к тому, что вы спрашиваете, я думаю, что вы не собираетесь устанавливать переменные up1done и up2done до 0 каждый раз, когда игра перезапускается. Это заставляет две кнопки снова появляться при повторном запуске во второй раз после сохранения в первый раз.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...