Einstellen eines Timers auf Benutzerinteraktion

Question

Ich versuche Tic-Tac-Toe mit einem Timer zu machen. Der Timer, den ich hinzugefügt habe, startet, wenn die Seite geladen wird. Wie kann ich diesen Timer nur starten, wenn der erste Zug gemacht wird? Ist es auch möglich, den Standardwert 'x' zu ändern und ihn je nach Benutzerauswahl auf "o" oder "x" zu setzen? https://jsfiddle.net/ku1dmbzd/

var sec = 0; 
 
    
 
    function pad(val) { 
 
     return val > 9 ? val : "0" + val; 
 
    } 
 
    var timer = setInterval(function() { 
 
     document.getElementById("seconds").innerHTML = pad(++sec % 60); 
 
     document.getElementById("minutes").innerHTML = pad(parseInt(sec/60, 10)); 
 
    }, 1000); 
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    //tic-tac-toe 
 
    
 
    (function Game() { 
 
     // Elements 
 
     var game = document.getElementById('game'); 
 
     var boxes = document.querySelectorAll('li'); 
 
     var resetGame = document.getElementById('reset-game'); 
 
     var turnDisplay = document.getElementById('whos-turn'); 
 
     var gameMessages = document.getElementById('game-messages'); 
 
     var playerOneScoreCard = document.getElementById('player-one-score'); 
 
     var playerTwoScoreCard = document.getElementById('player-two-score'); 
 
     
 
     // Vars 
 
     var context = { 'player1' : 'x', 'player2' : 'o' }; 
 
     var board = []; 
 
     
 
     var playerOneScore = 0; 
 
     var playerTwoScore = 0; 
 
     
 
     var turns; 
 
     var currentContext; 
 
     
 
     // Constructor 
 
     var init = function() { 
 
      turns = 0; 
 
      
 
      // Get current context 
 
      currentContext = computeContext(); 
 
      
 
      // Setup 3 x 3 board 
 
      board[0] = new Array(3); 
 
      board[1] = new Array(3); 
 
      board[2] = new Array(3); 
 
      
 
      // bind events 
 
      for(var i = 0; i < boxes.length; i++) { 
 
       boxes[i].addEventListener('click', clickHandler, false); 
 
      } 
 
      
 
      resetGame.addEventListener('click', resetGameHandler, false); 
 
     } 
 
     
 
     //Keeps track of player's turn 
 
     var computeContext = function() { 
 
      return (turns % 2 == 0) ? context.player1 : context.player2; 
 
     } 
 
     
 
     // Bind the dom element to the click callback 
 
     var clickHandler = function() { 
 
      this.removeEventListener('click', clickHandler); 
 
      
 
      this.className = currentContext; 
 
      this.innerHTML = currentContext; 
 
      
 
      var pos = this.getAttribute('data-pos').split(','); 
 
      board[pos[0]][pos[1]] = computeContext() == 'x' ? 1 : 0; 
 
      
 
      if(checkStatus()) { 
 
       gameWon(); 
 
      } 
 
      
 
      turns++; 
 
      currentContext = computeContext(); 
 
      turnDisplay.className = currentContext; 
 
     } 
 
     
 
     
 
     // Check to see if player has won 
 
     var checkStatus = function() { 
 
      var used_boxes = 0; 
 
      
 
      for(var rows = 0; rows < board.length; rows++) { 
 
       var row_total = 0; 
 
       var column_total = 0; 
 
       
 
       for(var columns = 0; columns < board[rows].length; columns++) { 
 
        row_total += board[rows][columns]; 
 
        column_total += board[columns][rows]; 
 
        
 
        if(typeof board[rows][columns] !== "undefined") { 
 
         used_boxes++; 
 
        } 
 
       } 
 
       
 
       // Winning combination for diagonal scenario [0,4,8], [2,4,6] 
 
       var diagonal_tl_br = board[0][0] + board[1][1] + board[2][2]; // diagonal top left to bottom right 
 
       var diagonal_tr_bl = board[0][2] + board[1][1] + board[2][0]; // diagonal top right bottom left 
 
       
 
       if(diagonal_tl_br == 0 || diagonal_tr_bl == 0 || diagonal_tl_br == 3 || diagonal_tr_bl == 3) { 
 
        return true; 
 
       } 
 
       
 
       // Winning combination for row [0,1,2], [3,4,5], [6,7,8] 
 
       // Winning combination for column [0,3,6], [1,4,7], [2,5,8] 
 
       // Only way to win is if the total is 0 or if the total is 3. X are worth 1 point and O are worth 0 points 
 
       if(row_total == 0 || column_total == 0 || row_total == 3 || column_total == 3) { 
 
        return true; 
 
       } 
 
       
 
       // if all boxes are full - Draw!!! 
 
       if(used_boxes == 9) { 
 
        gameDraw(); 
 
       } 
 
      } 
 
     } 
 
     var gameWon = function() { 
 
      clearEvents(); 
 
      
 
      // show game won message 
 
      gameMessages.className = 'player-' + computeContext() + '-win'; 
 
      
 
      // update the player score 
 
      switch(computeContext()) { 
 
       case 'x': 
 
        playerOneScoreCard.innerHTML = ++playerOneScore; 
 
        break; 
 
       case 'o': 
 
        playerTwoScoreCard.innerHTML = ++playerTwoScore; 
 
      } 
 
     } 
 
     // Tells user when game is a draw. 
 
     var gameDraw = function() { 
 
      gameMessages.className = 'draw'; 
 
      clearEvents(); 
 
     } 
 
     
 
     // Stops user from clicking empty cells after game is over 
 
     var clearEvents = function() { 
 
      for(var i = 0; i < boxes.length; i++) { 
 
       boxes[i].removeEventListener('click', clickHandler); 
 
      } 
 
     } 
 
     // Reset game to play again 
 
     var resetGameHandler = function() { 
 
      clearEvents(); 
 
      init(); 
 
    
 
      
 
      // Go over all the li nodes and remove className of either x,o 
 
      // clear out innerHTML 
 
      for(var i = 0; i < boxes.length; i++) { 
 
       boxes[i].className = ''; 
 
       boxes[i].innerHTML = ''; 
 
       
 
      //setTimeout(function() { 
 
     //clearInterval(timer); 
 
    
 
       
 
      } 
 
      
 
      // Change Who's turn class back to player1 
 
      turnDisplay.className = currentContext; 
 
      gameMessages.className = ''; 
 
     } 
 
     
 
     game && init(); 
 
    })();

body { 
 
     margin-top: 40px; 
 
     background: #485b6e; 
 
      color: #fff; 
 
      font-family: Helvetica; 
 
     font-weight: bold; 
 
     text-align:center; 
 
    } 
 
    
 
    h1 { 
 
     text-transform: uppercase; 
 
     letter-spacing: 0.1em; 
 
     color: #f1f1f1 
 
     
 
    } 
 
    .container { 
 
     margin: 0 auto; 
 
     width: 400px; 
 
    } 
 
    
 
    #game { 
 
     width: 300px; 
 
     height: 300px; 
 
     border: 1px solid #dadada; 
 
     margin: 0 auto; 
 
     padding: 0; 
 
     margin-bottom: 20px; 
 
    } 
 
    
 
    #game > li { 
 
     list-style: none; 
 
     float: left; 
 
     overflow: hidden; 
 
     text-decoration:none; 
 
     width: 100px; 
 
     height: 100px; 
 
     background: #f1f1f1; 
 
     border: 1px solid #ccc; 
 
     border-right: 1px solid #fff; 
 
     cursor: pointer; 
 
     text-transform: uppercase; 
 
     text-align: center; 
 
     padding-top: 20px; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
    } 
 
    
 
    #game > li.x { 
 
     font-size: 40px; 
 
     color: #ed4e6e 
 
    } 
 
    
 
    #game > li.o { 
 
     font-size: 40px; 
 
     color: #485b6e; 
 
    } 
 
    
 
    #game > li:hover { 
 
     background: #f9f9f9; 
 
    } 
 
    
 
    #game > li:active { 
 
     width: 100px; 
 
     height: 100px; 
 
     border: 0; 
 
    } 
 
    
 
    #nfo { 
 
     text-align:center; 
 
     margin-top: 10px; 
 
    } 
 
    
 
    #whos-turn > span, 
 
    #game-messages > span { 
 
     display: none; 
 
    } 
 
    
 
    #whos-turn.x span.x, 
 
    #whos-turn.o span.o, 
 
    #game-messages.player-x-win > span.player-x-win, 
 
    #game-messages.player-o-win > span.player-o-win, 
 
    #game-messages.draw > span.draw { 
 
     display: block; 
 
     margin-top: 10px; 
 
    } 
 
    
 
    #reset-game { 
 
     text-align: center; 
 
      border: none; 
 
      padding: 0.6em 1.2em; 
 
      background: #ed4e6e; 
 
      color: #fff; 
 
      font-size: 1em; 
 
      letter-spacing: 1px; 
 
      text-transform: uppercase; 
 
      cursor: pointer; 
 
      display: inline-block; 
 
      margin: 3px 2px; 
 
      border-radius: 2px; 
 
    } 
 
    
 
    #reset-game:hover { 
 
      background: #2c3e52; 
 
    }

<body> 
 
     <div class="container"> 
 
      <h1>Tic-Tac-Toe</h1> 
 
      <ul id="game"> 
 
       <!-- first row --> 
 
       <li data-pos="0,0"></li> 
 
       <li data-pos="0,1"></li> 
 
       <li data-pos="0,2"></li> 
 
       <!-- second row --> 
 
       <li data-pos="1,0"></li> 
 
       <li data-pos="1,1"></li> 
 
       <li data-pos="1,2"></li> 
 
       <!-- third row --> 
 
       <li data-pos="2,0"></li> 
 
       <li data-pos="2,1"></li> 
 
       <li data-pos="2,2"></li> 
 
      </ul> 
 
      
 
      <button id="reset-game">Reset Game</button> 
 
      
 
      <!-- Game Messages --> 
 
      <div id="game-messages"> 
 
       <span class="player-x-win">Player One Wins</span> 
 
       <span class="player-o-win">Player Two Wins</span> 
 
       <span class="draw">Draw Game</span> 
 
      </div> 
 
      
 
      <aside id="nfo"> 
 
       <h2>Who's Turn</h2> 
 
       <div id="whos-turn" class="x"> 
 
        <span class="x">Player 1</span> 
 
        <span class="o">Player 2</span> 
 
       </div> 
 
       
 
       
 
       
 
       <h2>timer</h2> 
 
       <span id="minutes">00</span>:<span id="seconds">00</span> 
 
       
 
        
 
        
 
        <h2>Score Card</h2> 
 
       <div id="score"> 
 
        Player 1: <span id="player-one-score">0</span> <br /> 
 
        Player 2: <span id="player-two-score">0</span> <br /> 
 
       </div> 
 
      </aside> 
 
     </div> 
 
    </body>

Answer 1

Dadurch wird der Timer nach dem ersten Klick starten:

var timer; 
document.getElementById('game').onclick = function(){ 

    timer = setInterval(function() { 
     document.getElementById("seconds").innerHTML = pad(++sec % 60); 
     document.getElementById("minutes").innerHTML = pad(parseInt(sec/60, 10)); 
    }, 1000); 
    this.onclick = null; 

}; 

Dies ist der HTML Sie zum Starten Symbol Wahl zur Verfügung gestellt:

<div id="pickerButton"> 
    <h2>Pick o or x</h2> 
    <button class="pickerButton" type="button">X</button> 
    <button class="pickerButton" type="button">O</button> 
</div> 

hinzufügen das irgendwo versteckt e die Game Funktion:

var buttons = document.getElementsByClassName('pickerButton'); 
buttons[0].onclick = function(){ 
    var context = { 'player1' : 'x', 'player2' : 'o' }; 
    this.parentNode.style.display = 'none'; 
}; 
buttons[1].onclick = function(){ 
    var context = { 'player1' : 'o', 'player2' : 'x' }; 
    this.parentNode.style.display = 'none'; 
}; 

Edit: integriert sie alle zusammen - https://jsfiddle.net/ftfuh1oj/

Answer 2

bearbeiten

Added Demo - DEMO

Set Timer null = auf Seite Last:

var timer = null;

dann Ihre Click-Handler ändern diesen Code enthalten:

var clickHandler = function() { 
     this.removeEventListener('click', clickHandler); 
     if (timer == null) { 
      timer = setInterval(function() { 
       document.getElementById("seconds").innerHTML = pad(++sec % 60); 
       document.getElementById("minutes").innerHTML = pad(parseInt(sec/60, 10)); 
      }, 1000); 
     } 
     this.className = currentContext; 
     this.innerHTML = currentContext; 

     var pos = this.getAttribute('data-pos').split(','); 
     board[pos[0]][pos[1]] = computeContext() == 'x' ? 1 : 0; 

     if(checkStatus()) { 
      gameWon(); 
     } 

     turns++; 
     currentContext = computeContext(); 
     turnDisplay.className = currentContext; 
    } 

Answer 3

einen Weg X oder O auszuwählen, bevor das Spiel beginnt:

var xyChoice = prompt('player 1, do you want to be X\'s or O\'s'); 
var player2Marker; 
if(xyChoice==='x'){player2Marker = 'o'}else{player2Marker = 'x'} 
var context = { 'player1' : xyChoice, 'player2' : player2Marker };