国际象棋时钟倒计时

时间:2013-04-08 15:17:08

标签: javascript dom

我正在尝试使用简单的国际象棋代码,我将了解它是如何工作的。我确实找到了一两个样本,但我没有理解这些代码。 (link 1link 2) 你能救我吗?

我尝试将倒数计时器与checc时钟结合使用,但没有成功。 当我按下“开始”按钮时,播放器1(白色)的时钟将开始倒计时。当这个播放器按下一个按钮(“白色”)时,该播放器的时间将停止,并开始倒数黑色播放器,所以当这个按下“黑色”按钮时,定时器开始倒计时为白色。 我需要2个独立的计时器,还是能够“节省”计时器的计时器? 如何设置“添加时间”?这是当玩家按下按钮时,定时器加几秒钟?

这是我到目前为止的尝试:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Chess clock</title>

    <style type="text/css">
        #MoveWhite{
            margin-left: 50px;
            float:Left;
            width:200px;
            height: 100px;
            background-color: silver;
            text-align: center;
        }

        #MoveBlack{
            float:left;
            width:200px;
            height: 100px;
            background-color: blue;
            text-align: center;
        }

        #Begin{
            margin-left: 50px;
            float:left;
            width: 400px;
            height: 100px;
            background-color: green;
            text-align: center;
        }
        #SetUp{
            margin-left: 50px;
            margin-right: 50px;
            float: left;
            width: 400px;
            height: 100px;
            background-color: green;
        }
        body{
            width: 500px;
            background-color: #06F;
        }

    </style>

    <script type="text/javascript">
    var minutesleft = 0;
    var secondsleft = 60;
    var finishedtext = "Lost"

    ura = new Date();

    ura.setMinutes(ura.getMinutes() + minutesleft);
    ura.setSeconds(ura.getSeconds() + secondsleft);

    function cdWhite(){
        now = new Date();
        diff = ura - now;
        diff = new Date(diff);
        var sec = diff.getSeconds();
        var min = diff.getMinutes();
        if (min < 10){
            min = "0" + min;
        }
        if (sec < 10){
            sec = "0" + sec;
        }

        if(now >= ura){
            clearTimeout(timerID);
            document.getElementById("cdtime").innerHTML = finishedtext;
        }
        else{
        document.getElementById("cdtime").innerHTML = min + ":" + sec;
        }
        timerID = setTimeout("cdWhite()", 10); 
    }

    </script>

</head>

<body>
    <div id = "Begin">
        <p>White player start game when press "Start game" button</p>
        <button onClick="cdWhite()">Start game!</button>

    </div>

    <div id = "num1">
        <div id = "MoveWhite">
            <h1 id = "White"><span id="cdtime">TimerWhite??<!-- Lost (if white player loose) -->
            </span></h1>
            <button onClick="startBlack()">White</button>

        </div>

        <div id = "MoveBlack">
             <h1 id = "Black">TimerBlack??</h1> <!-- Lost (if black player loose) -->
            <button onClick="startWhite()">Black</button>

         </div>

    </div>

    <div id = "SetUp">
        <p>Set different starting time <br/>
            Set starting time: ___min ___sec</p>
        <p>Add time: ____ sec</p>


    </div>

    <ul id = "cas">
    </ul>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

我可以帮助设计,但你必须解决这个问题。您将需要两个单独的计时器来存储每个玩家剩余的当前时间。您当前的实现似乎通过查找开始时间和当前时间之间的差异来跟踪剩余的时间。这对于时钟滴答的一个实例来说很好,但不适合停止/启动定时器。

我建议尝试以下设计。创建两个计时器变量whiteTimeblackTime。将它们初始化为零。您的添加时间按钮可以调用函数addTime()

function addTime(min, sec)
{
    whiteTime += 60 * min + sec;
    blackTime += 60 * min + sec;
}

您还需要一个变量来跟踪它的转弯,以及一个变量来跟踪当前转弯的开始时间。当白色开始时,创建一个新日期来记录当前时间。当玩家点击“白色”按钮时调用此功能。为黑色创建一个类似的功能。

var currentPlayer = "white";
var ura = new Date();
function whitesTurn()
{
    if (currentPlayer == "black")
    {
        // Get current time and subtract ura, subtract difference from black's timer
        currentPlayer = "white";
        ura = new Date();
    }
}
function blacksTurn() { }

现在,在您的主计时器功能中,您需要:

  • 查找当前时间
  • 减去ura
  • 减去与currentPlayer的计时器
  • 引用的玩家的差异
  • 更新该播放器的时钟,检查它是否为零,等等