morpionJS

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Morpion</title>
  <link rel="stylesheet" href="style.css">
  <script>
  var finish = false
  var nbCoup = 0
  var player=null

  function setCase(selectedCase){
    if(!finish && selectedCase.value=="."){
    player = "Joueur";
    selectedCase.value = "X";
    nbCoup++;
    checkWin();
    if(nbCoup<=8 && !finish){
      ordi();
    }
  }
  }
  function findCase(){
    var n
    var trouve=false
    while(!trouve){
      n = Math.floor((Math.random() * 9) + 1);
      if(document.getElementById(n).value=="."){
        trouve = true
      }
    }
    return n
  }
  function ordi(){
    player="ordi"
    var changer = document.getElementById(findCase());
    changer.value = "O";
    nbCoup++
    checkWin()
  }
  function checkWin(){
    if (document.getElementById("1").value==document.getElementById("2").value && document.getElementById("2").value==document.getElementById("3").value && document.getElementById("1").value!="."){
    finish=true;
    }else if(document.getElementById("4").value==document.getElementById("5").value && document.getElementById("5").value==document.getElementById("6").value && document.getElementById("4").value!="."){
    finish=true;
    }else if(document.getElementById("7").value==document.getElementById("8").value && document.getElementById("8").value==document.getElementById("9").value && document.getElementById("7").value!="."){
    finish=true;
    }else if(document.getElementById("1").value==document.getElementById("4").value && document.getElementById("4").value==document.getElementById("7").value && document.getElementById("1").value!="."){
    finish=true;
    }else if(document.getElementById("2").value==document.getElementById("5").value && document.getElementById("5").value==document.getElementById("8").value && document.getElementById("2").value!="."){
    finish=true;
    }else if(document.getElementById("3").value==document.getElementById("6").value && document.getElementById("6").value==document.getElementById("9").value && document.getElementById("3").value!="."){
    finish=true;
    }else if(document.getElementById("1").value==document.getElementById("5").value && document.getElementById("5").value==document.getElementById("9").value && document.getElementById("1").value!="."){
    finish=true;
    }else if(document.getElementById("3").value==document.getElementById("5").value && document.getElementById("5").value==document.getElementById("7").value && document.getElementById("3").value!="."){
    finish=true;
    }
    if(finish){
      var elem = document.getElementById("player");
      elem.innerHTML = player+" gagne la partie !";
      finish=true;
    }
    if(nbCoup==8){
      var elem = document.getElementById("player");
      elem.innerHTML = "Match Nul !";
      finish=true;
    }


  }


  </script>
</head>
<body>
<center>
<h3>Morpion 1 joueur</h3>
<div id="jeu">
  <p id="player">Bon courage, Vous avez les croix ! </p>
  <input type="button" id="1" value="." onclick= "setCase(this)"/>
  <input type="button" id="2" value="." onclick= "setCase(this)"/>
  <input type="button" id="3" value="." onclick= "setCase(this)"/><br>
  <input type="button" id="4" value="." onclick= "setCase(this)"/>
  <input type="button" id="5" value="." onclick= "setCase(this)"/>
  <input type="button" id="6" value="." onclick= "setCase(this)"/><br>
  <input type="button" id="7" value="." onclick= "setCase(this)"/>
  <input type="button" id="8" value="." onclick= "setCase(this)"/>
  <input type="button" id="9" value="." onclick= "setCase(this)"/>
</div>
</center>
</body>
</html>