发表于: 2020-04-30 23:45:24

1 2111


今日完成

任务四大体流程完成

明日计划

完成结果页

完成法官日报跳转

细节完成


遇到的问题

数据传递时要注意数据类型的转换

本地存储是以JSON字符串格式进行存储

存储前使用 JSON.stringify(数据)将数据转化为JSON字符串

提取后存储的数据后 使用 JSON.parse(数据)解析JSON字符串

二者缺一不可

否则存储读取修改数组时可能会出现我这种错误

(这个问题排查了好久)



最主要的地方就是对数据的存储修改  逻辑要特别清晰

我存储了四个本地数据


身份信息 identifyArr数组

每天杀死的序号 dayBook{}对象

步骤数 (兼游戏结果) step

deathList 死亡列表数组


将开始游戏法官日报界面 杀手杀人页面 全民投票页面设为同一个页面

判断逻辑需要清晰

满足条件完成方法 

$(document).ready(function () {
  /* ============ 读取数据 ===================== */
  // 身份信息
  var identifyArr = sessionStorage.getItem("identifyArr");
  identifyArr = identifyArr.split(",");

  // 流水日志
  var dayBook = sessionStorage.getItem("dayBook");
  if (dayBook) {
    dayBook = JSON.parse(dayBook);
    console.log(dayBook);
    var day = Object.keys(dayBook).length;
  }

  // 步骤
  var step = sessionStorage.getItem("step");
  console.log(step);
  // 死者信息
  var deathList = JSON.parse(sessionStorage.getItem("deathList"));

  // 死亡列表初始化
  if (!deathList) {
    deathList = [];
  } else {
    console.log(deathList);
    deathList = deathList.split(",");
  }
  console.log(deathList);
  /* ============= 创建盒子  ==================== */

  // 创建所有身份盒子
  for (var i = 0; i < identifyArr.length; i++) {
    //   克隆后追加至末尾
    $(".block_id").first().clone().appendTo("main").show();
    // 修改文字数据
    $(".block_id")
      .eq(i + 1)
      .find(".block_id_head")
      .text(identifyArr[i]);
    $(".block_id")
      .eq(i + 1)
      .find(".block_id_num")
      .text(i + 1 + "");
  }
  /* ==============  法官日记  ============== */
  // 开始游戏前dayBook日志不存在 则跳转下一页
  console.log(dayBook);
  if (!dayBook) {
    $("footer")
      .find("button")
      .click(function () {
        $(location).attr("href""../task2/page4.html");
      });
  } else {
    /* ========= 杀人和投票公用 ======== */

    //   事件委托

    $(".block_id").on("click"function (event) {
      //   排他 隐藏
      $(".block_id_select").hide();
      // 点击显示图标
      $(event.target).parent().find(".block_id_select").show();
      console.log($(event.target).parent().index());
      // 获取选中的索引值
      killId = $(event.target).parent().index();
      console.log("killId:" + killId);
    });
    //   阻止子元素冒泡
    $(".block_id_select").click(function () {
      event.stopPropagation();
    });
    /* ==========  死者渲染  =========== */
    console.log(day);
    console.log(dayBook);
    console.log(typeof dayBook);
    console.log(dayBook[day]);
    if (deathList) {
      // 天数
      for (var j = 1; j <= day; j++) {
        // 两个死亡者
        for (var i = 0; i < 2; i++) {
          $(".block_id")
            .eq(dayBook[j][i])
            .find(".block_id_head")
            .css("background-color""#83b09a");
        }
      }
    }
    // 游戏结束判断
    function overOrContinue() {
      // 总人数
      var total = identifyArr.length,
        // 杀手人数
        killer = allKiller(total),
        // 死亡杀手数
        killerDeath = 0,
        // 死亡平民数
        civilianDeath = 0,
        // 结果
        content;

      // 计算杀手总人数
      function allKiller(totalNum) {
        if (totalNum < 14) {
          killer = Math.floor(totalNum / 3);
        } else if (totalNum <= 18) {
          killer = Math.floor((totalNum - 1/ 3);
        }
        return killer;
      }
      console.log(deathList);
      console.log(typeof deathList);
      console.log(deathList.length);
      // 遍历死亡列表数组
      for (i = 0; i < deathList.length; i++) {
        if (deathList[i] == "杀手") {
          killerDeath++;
        } else if (deathList[i] == "平民") {
          civilianDeath++;
        }
      }

      if (killer == killerDeath) {
        content = "平民胜利";
      } else if (killer - killerDeath == total - killer - civilianDeath) {
        content = "杀手胜利";
      }
      return content;
    }
    /* =========== 杀手杀人页面 ============= */

    if (step == 1) {
      $(".l_header").find(".header_title").text("杀手杀人");
      $(".l_footer").find("button").text("确定");

      // 取消选中 不杀人
      var killId = 0;
      $("main").click(function () {
        if (event.target == this) {
          $(".block_id_select").hide();
          killId = 0;
          console.log("killId:" + killId);
        }
      });

      /* ------------------------------------------- */
      // 确定按钮
      $(".l_footer")
        .find("button")
        .click(function () {
          if (identifyArr[killId - 1== "杀手") {
            alert("不可以");
          } else {
            // 死亡名单
            if (killId == 0) {
              // 无人死亡
              deathList.push(killId);
            } else {
              deathList.push(identifyArr[killId - 1]);
            }
            // 死亡日报
            dayBook[day].push(killId);
            sessionStorage.setItem("dayBook"JSON.stringify(dayBook));
            //
            var result = overOrContinue();
            if (result) {
              // 游戏结束
              step = result;
              sessionStorage.setItem("step", step);
              $(location).attr("href""../task2/page5.html");
            } else {
              sessionStorage.setItem("step", step);
              // // 死亡列表 转换类型
              deathList = deathList.join(",");
              sessionStorage.setItem("deathList"JSON.stringify(deathList));
              $(location).attr("href""../task2/page4.html");
            }
          }
        });

      /* ============ 全民投票 ============== */
    } else if (step == 4) {
      $(".l_header").find(".header_title").text("投票");
      $(".l_footer").find("button").text("确定");
      // 投票按钮
      $(".l_footer")
        .find("button")
        .click(function () {
          console.log(killId);
          // 如未选中  弹窗
          if (!killId) {
            alert("请选择投票对象");
          } else {
            // 添加
            deathList.push(identifyArr[killId - 1]);

            // 死亡日报
            dayBook[day].push(killId); //添加投票死亡者序号
            dayBook[day + 1= [];
            sessionStorage.setItem("dayBook"JSON.stringify(dayBook));
            var result = overOrContinue();
            if (result) {
              // 游戏结束
              step = result;
              sessionStorage.setItem("step", step);
              $(location).attr("href""../task2/page5.html");
            } else {
              step = 0;
              sessionStorage.setItem("step", step);
              // // 死亡列表 转换类型
              deathList = deathList.join(",");
              sessionStorage.setItem("deathList"JSON.stringify(deathList));
              $(location).attr("href""../task2/page4.html");
            }
          }
        });
    }
  }
});



返回列表 返回列表
评论

    分享到