2013-04-08 90 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