IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

该问题已被官方收录

游戏进行到第二天，第一天的4个框的状态如何保存？

1

本地储存

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var inbox = '<div \"content1\" >\n' +
   '        <span></span>\n' +
   '        <span \"day\">第'+ i + '天</span>\n' +
   '        <span \"icon\"></span>\n' +
   '    </div>\n' +
   '    <div \"hidden1\">\n' +
   '        <div \"bar\">\n' +
   '            <div \"circular-first\"></div>\n' +
   '            <div \"circular-second\"></div>\n' +
   '        </div>\n' +
   '        <ul>\n' +
   '            <li \"killer\">\n' +
   '                <div \"triangle1\"></div>\n' +
   '                <span \"triangle2\">杀手杀人</span>\n' +
   '            </li>\n' +
   '            <div \"box2\">\n' +
   '            <span>昨晚' + theKillNum + '号被杀，真实身份是' + theKillId + '</span>\n' +
   '            </div>\n' +
   '        </ul>\n' +
   '        <ul>\n' +
   '            <li \"die\">\n' +
   '                <div \"triangle1\"></div>\n' +
   '                <span \"triangle2\">亡灵发表遗言</span>\n' +
   '            </li>\n' +
   '        </ul>\n' +
   '        <ul>\n' +
   '            <li \"player\">\n' +
   '                <div \"triangle1\"></div>\n' +
   '                <span \"triangle2\">玩家依次发言</span>\n' +
   '            </li>\n' +
   '        </ul>\n' +
   '        <ul>\n' +
   '            <li \"vote\">\n' +
   '                <div \"triangle1\"></div>\n' +
   '                <span \"triangle2\">投票</span>\n' +
   '            </li>\n' +
   '        </ul>\n' +
   '            <div \"box2\">\n' +
   '            <span>昨晚' + theVoteNum + '号被投死，真实身份是' +  theVoteId + '</span>\n' +
   '            </div>\n' +
   '    </div>';

<div "content">
<span></span>
<span "day">第1天</span>
<span "icon"></span>
</div>
<div "hidden">
<div "bar">
<div "circular-first"></div>
<div "circular-second"></div>
</div>
<ul>
<li "killer">
<div "triangle" id="one1"></div>
<span id="one2">杀手杀人</span>
</li>
</ul>
<div "box">
<span>昨晚<span id="realNum">theKillNum</span>号被杀,真实身份是<span id="realId">theKillRole</span></span>
</div>
<ul>
<li "die">
<div "triangle" id="two1"></div>
<span id="two2">亡灵发表遗言</span>
</li>
</ul>
<ul>
<li "player">
<div "triangle" id="three1"></div>
<span id="three2">玩家依次发言</span>
</li>
</ul>
<ul>
<li "vote">
<div "triangle" id="four1"></div>
<span id="four2">投票</span>
</li>
</ul>
<div "box1">
<span>昨晚  theKillNum 号被杀真实身份是 Thekillrole </span>
</div>
</div>

该问题已被官方收录

怎样使游戏流程的已变色步骤，在法官查看或杀人（投票）页面跳转后保持背景不变色

2

1

本地储存

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<header>
    <span id="return" class="fa fa-angle-left"></span>
    <span>法官日记</span>
    <span id="close" class="fa fa-times"></span>
</header>
<main>
    <div class="oneDayCopy">
        <div class="dayCopy">
            <div class="dateCopy">
                <span class="text-center btn-block">第1天</span>
            </div>
        </div>
        <div class="happeningCopy">
            <div class="asideCopy"></div>
            <div class="incidentsCopy">
                <div id="kill" class="incidentCopy">
                    <img class="moon" src="../img/night.png" alt="">
                    <a class="kill"><span class="triangle-leftCopy"></span>杀手杀人</a>
                </div>
                <div class="killMsgCopy">
                    <span id="beKilledCopy"></span>
                    号被杀手杀死，真实身份是
                    <span id="beKilledRoleCopy"></span>
                </div>
                <div id="deadSpeakCopy" class="incidentCopy">
                    <img class="sun" src="../img/day.png" alt="">
                    <a class="death"><span class="triangle-leftCopy"></span>亡灵发言</a>
                </div>
                <div id="aliveSpeakCopy" class="incidentCopy">
                    <a class="aliveSpeak"><span class="triangle-leftCopy"></span>玩家依次发言</a>
                </div>
                <div id="voteCopy" class="incidentCopy">
                    <a class="vote"><span class="triangle-leftCopy"></span>玩家投票</a>
                </div>
                <div class="voteMsgCopy">
                    <span id="beVoted"></span>
                    号被投票杀死，真实身份是
                    <span id="beVotedRole"></span>
                </div>
            </div>
        </div>
    </div>
</main>
<footer>
    <a class="over">结束游戏</a>
    <a class="watch">法官查看</a>
</footer>

JS代码（部分）
var playerStatus=JSON.parse(sessionStorage.getItem('playerStatus')),
    days=JSON.parse(sessionStorage.getItem('days')),
    beKillNum=JSON.parse(sessionStorage.getItem('beKillNum')),
    beVoteNum=JSON.parse(sessionStorage.getItem('beVoteNum')),
    step=sessionStorage.getItem('step');
//为法官查看页面准备
sessionStorage.setItem('playerStatus',JSON.stringify(playerStatus));
sessionStorage.setItem('beKillNum',JSON.stringify(beKillNum));
sessionStorage.setItem('beVoteNum',JSON.stringify(beVoteNum));
sessionStorage.setItem('days',JSON.stringify(days));

switch(step){
        case "dead":
            var i=days-1;
            changeColor($('.kill'),$('.kill .triangle-leftCopy'));
            $('.killMsgCopy').text(beKillNum[beKillNum.length-(1+i)].number+"号被杀死，真实身份是"+beKillNum[beKillNum.length-(1+i)].role).show();
            break;
        case "speak":
            i=days-1;
            changeColor($('.kill'),$('.kill .triangle-leftCopy'));
            $('.killMsgCopy').text(beKillNum[beKillNum.length-(1+i)].number+"号被杀死，真实身份是"+beKillNum[beKillNum.length-(1+i)].role).show();
            changeColor($('.death'),$('.death .triangle-leftCopy'));
            break;
        case "vote":
            i=days-1;
            changeColor($('.kill'),$('.kill .triangle-leftCopy'));
            $('.killMsgCopy').text(beKillNum[beKillNum.length-(1+i)].number+"号被杀死，真实身份是"+beKillNum[beKillNum.length-(1+i)].role).show();
            changeColor($('.death'),$('.death .triangle-leftCopy'));
            changeColor($('.aliveSpeak'),$('.aliveSpeak .triangle-leftCopy'));
            break;
    }
    //变色函数
    function changeColor(a,b){
        a.css({
            'backgroundColor':'#83b09a',
            'borderColor':'#83b09a'
        });
        b.css('borderRightColor','#83b09a');
    }

该问题已被官方收录

滑块填充效果用原生JS怎么写

0

1

数据类型事件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

新建一个RangeSlider.js文件，实现对滑动控件属性的设置、事件的监听、以及设置回调函数。监听input事件时，对进度条进行填充，让我们来直接看看代码是怎么实现的。

$.fn.RangeSlider = function(cfg){
    this.sliderCfg = {
        min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, 
        max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
        step: cfg && Number(cfg.step) ? cfg.step : 1,
        callback: cfg && cfg.callback ? cfg.callback : null
    };

    var $input = $(this);
    var min = this.sliderCfg.min;
    var max = this.sliderCfg.max;
    var step = this.sliderCfg.step;
    var callback = this.sliderCfg.callback;

    $input.attr('min', min)
        .attr('max', max)
        .attr('step', step);

    $input.bind("input", function(e){
        $input.attr('value', this.value);
        $input.css( 'background', 'linear-gradient(to right, #059CFA, white ' + this.value + '%, white)' );

        if ($.isFunction(callback)) {
            callback(this);
        }
    });
};

该问题已被官方收录

在Node.js输命令会报错

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如何用构造函数为数组添加具体的属性，比如role,isAlive

0

1

数据类型

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var killsObj
{
    for (i = 0; i < kills.length; i++) {
        function kills(role, isAlive) {
            this.role = kills[i];
            this.isAlive = "yep";
            this.sayRole = function () {
                alert(this.role);
            }
        }
    }
}

该问题已被官方收录

被杀死的玩家如何变色？点击事件如何移除？

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

   if(death  !== null){
            for (i=0;i<death.length;i++){
                $(".block").eq(death[i]) .unbind();
                $("  .block").eq(death[i]) .removeClass("click");
                $(" .block").eq(death[i]) .css("opacity","0.5");//死亡玩家事件移除及变色
            }
        }

该问题已被官方收录

循环出来的盒子里面的值没有改变

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// 返回按钮返回到发牌页面
var backtrack=document.getElementById("backtrack");
backtrack.onclick=function() {
    location.href = "../html/check.html";
}

// 关闭按钮返回到主页面
var off=document.getElementById("off");
off.onclick=function() {
    // 点击关闭弹出提示窗口
    if (confirm("是否要退出游戏返回到主页面")) {
        location.href = "../html/start.html"; //点击确定返回到主页面
    } else {
        return false; //点击取消停留在当前页面
    }
}


// 获取发牌时保存的数据
var data = JSON.parse(localStorage.getItem('key'));


var arr = []; //声明一个数组
var arr = data; //把获取的数据传递到数组
// console.log(arr);


// 获取角色属性dom节点
var role = document.getElementsByClassName("role")[0];
// 获取角色人数序号dom节点
var number = document.getElementsByClassName("number")[0];
// 获取角色属性盒子父元素节点
var parent = document.getElementsByTagName("main")[0];
// console.log(parent)


// 通过父元素节点克隆人数属性盒子
for (let i = 0; i < arr.length - 1; i++) {
    // 获取子级盒子属性节点,并克隆节点
    var son = document.getElementsByClassName("box")[0].cloneNode(true);
    parent.appendChild(son); //规定在父级里面克隆子级节点
}

var x = 0; //声明一个变量记录玩家序号

for (let i = 0; i <= arr.length - 1; i++) {
    role.innerText = (arr[i]); //获取数组指标对应的玩家属性
    x = x + 1; //每次循把玩家人数序号+1
    number.innerText = (x + "号"); //把玩家人数序号传入对应的盒子
    // console.log(arr[i])
    // console.log(x);

}

// 点击button生成构造函数
var button=document.getElementsByTagName("button")[0];
button.onclick=function() {
    // 创建构造函数
    function Part(breed, status, num) {
        this.breed = breed;
        this.status = status;
        this.num = num;
    }

    var PartArr = [] //声明一个数组，把构造函数的对象放到该数组

    // 构造函数生成玩家对象
    for (var i = 0; i < arr.length; i++) {
        var temp = arr[i] //获取玩家对应的角色属性传到对象里
        var num = i + 1 //生成玩家数量序号传入到对象
        PartArr.push(new Part(temp, "存活", num)); //把生成的玩家对象push到数组
    }
    // 把玩家对象数组储存到浏览器本地
    localStorage.setItem("store", JSON.stringify(PartArr));
    // console.log(PartArr);
 

    location.href = "../html/libretto.html";//进入下一个页面
}

该问题已被官方收录

到了第二天，杀手杀人页面无法显示玩家

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var words = JSON.parse(sessionStorage.getItem("words"));//存放事件描述的数组

该问题已被官方收录

桌游精灵杀人游戏简单版本的游戏，有个逻辑错误

0

1

控制流程语句事件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$(".ft-second button").on("click", function () {
        var Message = JSON.parse(sessionStorage.getItem("Message"));
        if (pick == 1) {
            var person = sessionStorage.getItem("person"),
                killer = sessionStorage.getItem("killer");
            if (killer == person) {
                Message.push("晚上：" + (choiceNum + 1) + "号被杀手杀死，其真实身份是平民。");
                Message.push("没能撑到，晚上已经结束。");
                sessionStorage.setItem("Message", JSON.stringify(Message));
                alert("Game Over");
                location.href = "游戏结果.html";
            }
            else {
                Message.push("晚上：" + (choiceNum + 1) + "号被杀手杀死，其真实身份是平民。");
                sessionStorage.setItem("Message", JSON.stringify(Message));
                location.href = "法官台本.html";
            }
        }
        else if (pick == 0) {
            var ask = confirm("确定这轮不杀人吗？")
            if (ask === true) {
                Message.push("晚上：昨晚杀手没有杀人。");
                sessionStorage.setItem("Message", JSON.stringify(Message));
                location.href = "法官台本.html";
            }
            else {
                console.log("用户撤销，重新选择");
            }
        }
        sessionStorage.setItem("pick", pick);
    })

该问题已被官方收录

状态机的状态不会保存

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无