首页 > 解决方案 > 编写一个可以随意存储和加载数据的点击游戏,但页面刷新后仍然继续点击计数器

问题描述

我是编码新手,今天几天我试图编写一个简单的点击游戏,里面有一个计数器,基本上你所要做的就是点击图片来增加你的 xp 数和 25 xp 数您从中获得 1 次杀戮计数,我已经尝试了 localstorage setitem 并获取项目,它们工作正常但是在我刷新页面然后再次单击图像后,计数器从 1 重置我尝试了一些薄

<html>
    <head>
            <title> Menggokil Adventure </title>
    </head>
    <body> 
        <p>XP: <span id="XP">0</span></p>
        <p>KillCount <span id="KillCount">0</span></p>
        <img src="gokil.jpg" height="256px" width="256px"  onclick="addToXP (1)">
        <br> 
        <button onclick="SAVE()">Save Game Gokil ini</button> <button onclick="LOAD()">Load Game Gokil ini</button>
    </body>
</html>
 
<script>
  var XP= 0 , checkXP;
  var KillCount=0;
    function addToXP(amount) { 
      XP = XP + (amount)
      document.getElementById("XP").innerHTML = XP;
      killCount(); 
    }

    function SAVE() {
      localStorage.setItem("XP", XP); console.log('XP', XP);
      localStorage.setItem("killcount", KillCount); console.log("killcount" , KillCount)
    } 
    function LOAD() {
      var XP = localStorage.getItem("XP");
      var KillCount = localStorage.getItem("killcount");
      document.getElementById("XP").innerHTML = XP;
      document.getElementById("KillCount").innerHTML = KillCount; 
      console.log("killcount", KillCount)
    } 

  function killCount() {
    if(XP % 25 === 0) {
      KillCount++ 
      document.getElementById("KillCount").innerHTML = KillCount;
  }
  function checkXP() {
      var XP = checkXP("XP"); }
      if (XP == "checkXP") {
          XP = "checkXP"
          setCookie("CheckXP", XP);
      }
      return parseInt(XP);
  }

</script>

gs 但是我仍然不知所措,因为我是新手,谁能给我一些解决这个问题的线索?

标签: javascript

解决方案


如评论中所述,我将制定答案。

如果您想在您之后使用全局定义的计数器(如XPor killCount),LOAD()那么您必须覆盖变量。如果您从LOAD()函数中访问它们,这是可能的。您正在做的是在LOAD()上下文中定义新的局部变量。要覆盖全局定义变量中的值,请var从变量中省略关键字,XPkillCount确保从 localContext 中读取的变量被正确解析为数字。

function LOAD() {
      XP = parseInt(localStorage.getItem("XP"));
      KillCount = localStorage.getItem("killcount");
      document.getElementById("XP").innerHTML = XP;
      document.getElementById("KillCount").innerHTML = KillCount; 
      console.log("killcount", KillCount)
    }

这应该让你加快速度。


推荐阅读