<repo_name>kikyoluka/Simple-version-of-werewolf-kill<file_sep>/js-2-5.js
//简化获取dom操作
const byID = (id) => {
    return document.getElementById(id);
  };
  
  const boxes = byID("boxes");
  //杀手和平民数组
  const killsArr= JSON.parse(localStorage.killsArr);
  const peopleArr= JSON.parse(localStorage.peopleArr);
  //被杀手杀死的玩家数组
  let killDeath = JSON.parse(localStorage.killDeath);
  //所有玩家类的数组
  let players = JSON.parse(localStorage.players);
  //玩家人数
  const playerNum = JSON.parse(localStorage.playerNum);
  //当前是否时投票状态
  const isVote = JSON.parse(localStorage.isVote);
  //本回合被杀死的玩家
  let killedPlayerNum; 
  //有选择对象
  let isChoose = false;
  
  
  //根据数组下标获取玩家的状态框，并加入到页面上
  const addBox = (player) => {
    const div = document.createElement("div");
    const divChild1 = document.createElement("div");
    const divChild2 = document.createElement("div");
    divChild1.innerHTML = player.id;
    divChild2.innerHTML = `${player.playerNum}号`;
    div.classList.add("box");
    player.isAlive ? null :  div.classList.add("box-death");
    div.appendChild(divChild1);
    div.appendChild(divChild2);
    div.onclick = () => {
      isChoose = true;
      if(player.isAlive) {
        //玩家还是存活状态,可以被杀
        for( let i = 0; i < playerNum; i++) {
          [...boxes.getElementsByTagName("div")].map((element) => {
            element.classList.remove("box-selected");
          });
        };
        div.classList.add("box-selected");
        killedPlayerNum = player.playerNum;
      } else { 
        //玩家死亡状态
        alert("玩家已死亡请重新选择");
      };
    };
    boxes.appendChild(div);
  };
  
  //根据玩家类对数据进行挂载
  const init = () => {
    players.map((player) => {
      addBox(player);
    });
  };
  
  //点击确认按钮
  const confirm = () => {
    let tag = true;
    //变更被杀死玩家状态
    players.map((player) => {
      if(player.playerNum === killedPlayerNum)
        if(player.id === "杀手" && (!isVote)) {
          //杀人时选择的是杀手
          tag = false;
        } else {
          player.isAlive = false;
        };
    });
    //判断选择情况
    if(tag && isChoose) {
      localStorage.players = JSON.stringify(players);
      killDeath.push(killedPlayerNum);
      localStorage.killDeath = JSON.stringify(killDeath);
      //剩余玩家
      let remainPlayers = players.filter((player) => {
        return player.isAlive === true;
      });
      let remainKill = false;
      let remainPeople = false;
      remainPlayers.map((player) => {
        if(player.id === "杀手") 
          remainKill = true;
        else 
          remainPeople = true;
      });
      if(!remainKill || !remainPeople) {
        //游戏结束
        localStorage.day = JSON.parse(-1);
        location.assign("js-2-8.html");
      } else {
        //游戏继续
        if(isVote) {
          localStorage.day = JSON.stringify(JSON.parse(localStorage.day) + 1);
          let isClicked = JSON.parse(localStorage.isClicked);
          isClicked.map((tag, i) => {
            isClicked[i] = false;
          });
          localStorage.isClicked = JSON.stringify(isClicked);
        }
        location.assign("js-2-6.html");
      };
    } else if(!isChoose){
      alert("请选择操作对象！");
    } else {
      alert("不能杀杀手，请重新选择!");
    }
  };
  
  
  //页面加载
  this.onload = () => {
    const btn = byID("btn");
    //将所有玩家状态加入到页面上
    init();
    //点击确认
    btn.addEventListener("click", confirm);  
  };
  <file_sep>/js-2-3.js
//简化获取dom
const byID = (id) => {
  return document.getElementById(id);
};

const content = byID("content");
const  killsArr= JSON.parse(localStorage.killsArr);
const  peopleArr= JSON.parse(localStorage.peopleArr);

//根据数组下标获取玩家的状态框
const addBox = (player) => {
  const div = document.createElement("div");
  const divChild1 = document.createElement("div");
  const divChild2 = document.createElement("div");
  divChild1.innerHTML = player.id;
  divChild2.innerHTML = `${player.playerNum}号`;
  div.classList.add("box-alive");
  div.appendChild(divChild1);
  div.appendChild(divChild2);
  content.appendChild(div);
};

//数据挂载
const init = () => {
  const players = JSON.parse(localStorage.players);
  players.map((player) => {
    addBox(player);
  });
};

//页面加载
this.onload = () => {
  const arrow = byID("arrow");
  const remove = byID("remove");
  const btn = byID("btn");

  //页面数据加载
  init();

  //点击返回
  arrow.addEventListener("click", () => {
    history.go(-1);
  });

  //点击右上角X
  remove.addEventListener("click", () => {
    if(confirm("结束本轮游戏吗？")) 
      history.go(-1);
  });

  //点击开始游戏
  btn.addEventListener("click", () => {
    location.assign("js-2-6.html");
  });

};<file_sep>/js-2-2.js
//简化流程//
var byID=(id)=>{
    return document.getElementById(id);
};
var {floor,random}=Math;
//建立数组//
var UpsetArr=(arr,exchanggeNum)=>{
    var num1,num2;
    for (var i=0;i<exchangeNum;i++){
        num1=floor(random()*arr.length);
        num2=floor(random()*arr.length);
        //打乱数组顺序//
        [arr[num1],arr[num2]]=[arr[num2],arr[num1]];
    } ;
};

//根据玩家数量得到乱序数组//
var getUpsetArr=(length,exchangeNum)=>{
    var arr=new Array(0);
    for (var i=0;i<length;i++){
        arr.push(i);
    } ;
    UpsetArr(arr,exchangeNum);
    return arr;
};

//获得玩家的身份并返回数组//
var getSpecific=(arr,peopleNum)=>{
    var people=arr.filter((v,i)=>i<peopleNum);
    var kills=arr.filter((v,i)=>i>=peopleNum);
    return [people,kills];
};

//判断是否为杀手//
var isKiller=(killArr,peopleNum)=>{
    return killsArr.includes(playerNum);
};

//数据加载//
this.onload=()=>{
    var btn=byID("btn");
    var arrow=byID("arrow");
    var remove=byID("remove");
    var bottomLayer=byID("bottomLayer");
    var describe=byID("describe");
    var avatar=byID("avatar");
    var num=byID("num");
    var peopleArr,killArr;
    var page=1;
    var players=getUpsetArr(localStorage.playerNum,50);

    switch (players.length){
        case 4:[playersArr,killArr]=getSpecific(players,3);break;
        case 5:[playersArr,killArr]=getSpecific(players,4);break;
        case 6:[playersArr,killArr]=getSpecific(players,4);break;
        case 7:[playersArr,killArr]=getSpecific(players,5);break;
        case 8:[playersArr,killArr]=getSpecific(players,6);break;
        case 9:[playersArr,killArr]=getSpecific(players,6);break;
        case 10:[playersArr,killArr]=getSpecific(players,7);break;
        case 11:[playersArr,killArr]=getSpecific(players,8);break;
        case 12:[playersArr,killArr]=getSpecific(players,8);break;
        case 13:[playersArr,killArr]=getSpecific(players,9);break;
        case 14:[playersArr,killArr]=getSpecific(players,10);break;
        case 15:[playersArr,killArr]=getSpecific(players,11);break;
        case 16:[playersArr,killArr]=getSpecific(players,11);break;
        case 17:[playersArr,killArr]=getSpecific(players,12);break;
        case 18:[playersArr,killArr]=getSpecific(players,13);break;
        default:alert("数据错误!");break;
    };

    //点击返回按钮//
    arrow.addEventListener("click",()=>{
        history.go(-1);
    });
    //点击右上关闭按钮//
    remove.addEventListener("click",()=>{
        if (confirm("确认结束本轮游戏吗？")){
            history.go(-1);
    };
});
    //点击查看身份按钮//
    btn.addEventListener("click",()=>{
        if (page>players.length){
            //跳转到法官台本//
		localStorage.killArr=JSON.stringify(killArr);
        localStorage.peopleArr=JSON.stringify(peopleArr);
        location.assign("js-2-5.html");
    }else if (page % 1==0){
            //翻牌//
        bottomLayer.setAttribute("src","bottomLayer.png");
        avatar.style.display="block";
        describe.innerHTML=iskiller(killArr,page)?
            `玩家${page}是<span style="color: #ff502f">杀手</span>` : `玩家${page}是<span style="color: #ffa323">平民</span>`;
        btn.innerHTML = page === players.length ? "法官查看" : `隐藏并传递给${page+1}号`;
    }else {
            //回到初始页面//
        bottomLayer.setAttribute("src","overTurn.png");
        avatar.style.display="none";
        describe.innerHTML="";
        btn.innerHTML=`查看${page+0.5}号身份`;
        num.innerHTML=page+0.5;
    }
    page+=0.5;
    });
}<file_sep>/js-2.js
//简化根据id获取dom元素操作
const byID = (id) => {
    return document.getElementById(id);
};

//获取dom元素
const people = byID("people");
const kill = byID("kill");
const range = byID("range");
const backLayer = byID("backLayer");
const input = byID("input");

//根据输入的不同值改变玩家配比
const changePlayerRate = (value) => {
    switch(value) {
        case "4" :  people.innerHTML = "平民3人"; kill.innerHTML = "杀手1人";break;
        case "5" :  people.innerHTML = "平民4人"; kill.innerHTML = "杀手1人";break;
        case "6" :  people.innerHTML = "平民4人"; kill.innerHTML = "杀手2人";break;
        case "7" :  people.innerHTML = "平民5人"; kill.innerHTML = "杀手2人";break;
        case "8" :  people.innerHTML = "平民6人"; kill.innerHTML = "杀手2人";break;
        case "9" :  people.innerHTML = "平民6人"; kill.innerHTML = "杀手3人";break;
        case "10":  people.innerHTML = "平民7人"; kill.innerHTML = "杀手3人";break;
        case "11":  people.innerHTML = "平民8人"; kill.innerHTML = "杀手3人";break;
        case "12":  people.innerHTML = "平民8人"; kill.innerHTML = "杀手4人";break;
        case "13":  people.innerHTML = "平民9人"; kill.innerHTML = "杀手4人";break;
        case "14":  people.innerHTML = "平民10人"; kill.innerHTML = "杀手4人";break;
        case "15":  people.innerHTML = "平民11人"; kill.innerHTML = "杀手4人";break;
        case "16":  people.innerHTML = "平民11人"; kill.innerHTML = "杀手5人";break;
        case "17":  people.innerHTML = "平民12人"; kill.innerHTML = "杀手5人";break;
        case "18":  people.innerHTML = "平民13人"; kill.innerHTML = "杀手5人";break;
        default  :  people.innerHTML = "输入错误"; kill.innerHTML = "输入错误";break;
    }
};

//更改输入框的值,并改变玩家配比
const changInput = (value) => {
    input.value = value;
    changePlayerRate(value);
}

//更改滑块位置和背景高亮
const ChangeRange = (value) => {
    backLayer.style.background = `linear-gradient(to right, #fab344 0%, #fab344 ${(value - 4) / 14 * 100}%, #eee ${(value - 4) / 14 * 100}%, #eee 100%)`;
    range.value = value;
}

//加载
this.onload = () => {
    //获取dom元素
    const back = byID("back");
    const deal = byID("deal");
    const reduce = byID("reduce");
    const add = byID("add");

    //根据输入框初始值改变初始滑块位置和背景高亮
    ChangeRange(input.value);

    //输入框输入时自动变更玩家配比
    input.addEventListener("input", () => {
        changePlayerRate(input.value);
    ChangeRange(input.value);
});

    //拖动滑块实时监听
    range.addEventListener("input", () => {
        ChangeRange(range.value);
    changInput(range.value);
});

    //点击减
    reduce.addEventListener("click", () => {
        ChangeRange(range.value - 1);
    changInput(range.value);
});

    //点击加
    add.addEventListener("click", () => {
        ChangeRange(Math.floor(range.value) + 1);
    changInput(range.value);
});

    //点击回到首页
    back.addEventListener("click", () => {
        this.history.go(-1);
});

    //点击去发牌
    deal.addEventListener("click", () => {
        if(people.innerHTML === "输入错误") {
        confirm("请输入正确的玩家数量");
    } else {
        localStorage.playerNum = input.value;
        location.assign("js-2-4.html");
    };
});

};<file_sep>/README.md

# Project Practice-Board-game-wizard
This is a board game wizard that can be used for board games. 
You can play killing games inside.

<a href="https://kikyoluka.github.io/Simple-version-of-werewolf-kill/js-2-1.html">Demo interface</a>
