赢得比赛后,如何添加提醒(checkWinning)?

时间:2019-06-07 10:57:17

标签: javascript html css

当数字中的数字为“我赢了”时,如何获得提醒 顺序正确吗?以1(上部,左上角)开始,以8(中间,最低的框)结束。左下角的框应该为空。

我刚开始编码,所以我没有很多经验。

谢谢!

<html>
  <head>
    <style>
      div {
        color: blue;
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
        border: solid green 2px;
        width: 30px;
        height: 30px;
        float: left;
      }

      div.førstPåLinja {
        clear: left;
      }
    </style>
  </head>
  <body>
    <div id="r1k1" onclick="trykk(this, 'r1k2', 'r2k1', 'r2k1', 'r2k1' )">
      7
    </div>
    <div id="r1k2" onclick="trykk(this, 'r1k1', 'r1k3', 'r2k2', 'r2k2' )">
      1
    </div>
    <div id="r1k3" onclick="trykk(this, 'r1k2', 'r2k3', 'r2k3', 'r2k3' )">
      2
    </div>

    <div
      id="r2k1"
      class="førstPåLinja"
      onclick="trykk(this, 'r2k2', 'r1k1','r3k1', 'r3k1')"
    >
      5
    </div>
    <div id="r2k2" onclick="trykk(this, 'r1k2', 'r2k3', 'r3k2', 'r2k1' )"></div>
    <div id="r2k3" onclick="trykk(this, 'r3k3', 'r1k3', 'r2k2', 'r2k2')">3</div>

    <div
      id="r3k1"
      class="førstPåLinja"
      onclick="trykk(this, 'r2k1', 'r3k2', 'r3k2', 'r3k2' )"
    >
      8
    </div>
    <div id="r3k2" onclick="trykk(this,'r3k1','r2k2','r3k3', 'r3k3')">4</div>
    <div id="r3k3" onclick="trykk(this, 'r2k3', 'r3k2', 'r3k2', 'r3k2')">6</div>

    <script>
      function trykk(tagElement, alt1, alt2, alt3, alt4) {
        if (document.getElementById(alt1).innerHTML == "") {
          document.getElementById(alt1).innerHTML = tagElement.innerHTML;
          tagElement.innerHTML = "";
        }
        if (document.getElementById(alt2).innerHTML == "") {
          document.getElementById(alt2).innerHTML = tagElement.innerHTML;
          tagElement.innerHTML = "";
        }
        if (document.getElementById(alt3).innerHTML == "") {
          document.getElementById(alt3).innerHTML = tagElement.innerHTML;
          tagElement.innerHTML = "";
        }
        if (document.getElementById(alt4).innerHTML == "") {
          document.getElementById(alt4).innerHTML = tagElement.innerHTML;
          tagElement.innerHTML = "";
        }
      }
    </script>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试这样。

function trykk(tagElement, alt1, alt2, alt3, alt4) {
        if (document.getElementById(alt1).innerHTML == '') {
            document.getElementById(alt1).innerHTML = tagElement.innerHTML;
            tagElement.innerHTML = '';
        }
        if (document.getElementById(alt2).innerHTML == '') {
            document.getElementById(alt2).innerHTML = tagElement.innerHTML;
            tagElement.innerHTML = '';
        }
        if (document.getElementById(alt3).innerHTML == '') {
            document.getElementById(alt3).innerHTML = tagElement.innerHTML;
            tagElement.innerHTML = '';
        }
        if (document.getElementById(alt4).innerHTML == '') {
            document.getElementById(alt4).innerHTML = tagElement.innerHTML;
            tagElement.innerHTML = '';
        }
        if(checkwin()){
          alert("won");
        }
    }
    
function checkwin(){

  var i = 1;
  var match = true;
  $('.boxCls').each(function(){
    if(this.innerHTML != '' && i != this.innerHTML){
      match = false;
    } else {
      i++;
    }
  });
  
  return match;
}
.boxCls {
        color: blue;
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
        border: solid green 2px;
        width: 30px;
        height: 30px;
        float: left;

    }

div.førstPåLinja {
    clear: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="r1k1" class="boxCls" onclick="trykk(this, 'r1k2', 'r2k1', 'r2k1', 'r2k1' )">7</div>
<div id="r1k2" class="boxCls" onclick="trykk(this, 'r1k1', 'r1k3', 'r2k2', 'r2k2' )">1</div>
<div id="r1k3" class="boxCls" onclick="trykk(this, 'r1k2', 'r2k3', 'r2k3', 'r2k3' )">2</div>

<div id="r2k1" class="førstPåLinja boxCls" onclick="trykk(this, 'r2k2', 'r1k1','r3k1', 'r3k1')">5</div>
<div id="r2k2" class="boxCls" onclick="trykk(this, 'r1k2', 'r2k3', 'r3k2', 'r2k1' )"></div>
<div id="r2k3" class="boxCls" onclick="trykk(this, 'r3k3', 'r1k3', 'r2k2', 'r2k2')">3</div>

<div id="r3k1" class="førstPåLinja boxCls" onclick="trykk(this, 'r2k1', 'r3k2', 'r3k2', 'r3k2' )">8</div>
<div id="r3k2" class="boxCls" onclick="trykk(this,'r3k1','r2k2','r3k3', 'r3k3')">4</div>
<div id="r3k3" class="boxCls" onclick="trykk(this, 'r2k3', 'r3k2', 'r3k2', 'r3k2')">6</div>