0

私は簡単なチェスコードを作成しようとしています.それがどのように機能するかを理解するでしょう. 1 つまたは 2 つのサンプルを見つけましたが、そのコードはわかりません。(リンク 1、リンク 2 ) 助けてもらえますか?

カウントダウンタイマーをチェッククロックに組み合わせようとしましたが、成功しませんでした。ボタン「開始」を押すと、時計はプレーヤー1（白）のカウントダウンを開始します。このプレーヤーがボタン (「白」) を押すと、このプレーヤーの時間が停止し、黒のプレーヤーのカウントダウンが開始されます。したがって、このボタン「黒」を 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>
4

1 に答える 1

0

私はデザインを手伝うことができますが、JS を作成する必要があります。各プレイヤーの現在の残り時間を保存するには、2 つの別個のタイマーが必要です。現在の実装は、開始時刻と現在の時刻の差を見つけることで、残り時間を追跡しているようです。これは、時計が時を刻む 1 つのインスタンスでは問題ありませんが、タイマーの停止/開始には適していません。

次のデザインを試すことをお勧めします。2 つのタイマー変数whiteTimeと を作成しますblackTime。それらをゼロに初期化します。時間追加ボタンは関数を呼び出すことができますaddTime():

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

誰のターンかを追跡するための変数と、現在のターンがいつ開始されたかを追跡するための変数も必要です。White のターンが開始したら、新しい日付を作成して現在の時刻を記録します。プレイヤーが「白い」ボタンを押したときに、この関数を呼び出します。黒について同様の関数を作成します。

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のタイマーによって参照されるプレーヤーから差を引きます
  • そのプレイヤーの時計を更新し、ゼロになっているかどうかを確認するなど
于 2013-04-08T16:01:19.757 に答える