2013-04-08 209 views
0

我試圖cerate簡單的國際象棋代碼,我會明白它是如何工作的。我確實找到了一兩個樣本,但我不會忽視那些代碼。 (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

我認真地建議您將此代碼移至JSFiddle,以便讀取和調試。而且,任何決定提供幫助的人都可以輕鬆創建自己的叉子。我試着將你的代碼移動到JSFiddle本身,它沒有運行,我也沒有深入瞭解爲什麼(因爲你聲稱它的工作原理和計時器開始運行)。所以我想你的第一步應該是轉向JSF。 – 2013-04-08 15:26:52

+0

http://jsfiddle.net/9tEpu/ – Phantom 2013-04-08 16:05:02

回答

0

我可以用設計幫助,但你必須制定出JS。您需要兩個獨立的計時器來存儲每個玩家剩下的當前時間。您目前的實施似乎通過查找開始時間與當前時間之間的差異來追蹤剩餘時間。對於時鐘的一個實例來說,這很好,但不適用於停止/啓動計時器。

我會建議嘗試以下設計。創建兩個計時器變量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的計時器
  • 引用玩家的區別
  • 更新該玩家的時鐘,檢查它是否爲零等
+1

中的代碼由於大部分代碼都是相同的,所以我會考慮對這兩個按鈕使用相同的函數。只需將onclick =「startTurn('black')」和onclick =「startTurn('white')」添加到任一按鈕,然後決定哪個人在功能startTurn(who){}內部。同樣,沒有必要使用第三個按鈕,因爲按任一按鈕都應啓動定時器。哎呀,即使一個按鈕就足以啓動/切換定時器,但它不會像機械國際象棋鍾。 – 2013-04-08 17:39:16

+0

任何想法如何「修復」顯示秒數少於10的時間。現在它顯示9,8,7 ... 1,但我想在前面顯示0秒,如09,08,07 ... 01。如何修復? – Phantom 2013-04-19 09:16:12

+0

看看http:// stackoverflow。COM /問題/ 10073699 /墊一個用戶號碼與領先的3/0型的JavaScript – Otaia 2013-04-19 14:46:03