javascript - 结束点击的功能

问题描述

我正在为井字棋做一个课堂项目（我是一个绝对的初学者，只编码了大约 2 个月，最近才接触到 javascript 和 jquery，所以请不要评判我非常生疏的技能哈哈）。我在游戏结束时遇到一个问题，在宣布获胜后您可以继续点击棋盘上的空白方块，有没有办法防止这种情况发生？代码如下，谢谢！（我也知道我的获胜条件需要稍微修正一下）

let currentPlayer = "X";

$(".cell").on('click', function() { 
  if (currentPlayer == "X" && $(this).hasClass("takenByX" || "takenByO")) { //checks to see if square has been played
      (""); //does nothing
  } else if (currentPlayer == "X") {
      $(this).text("X").addClass("takenByX"); //change clicked square to x & adds class taken
       playerChange();} //runs player change function
    if(currentPlayer == "O" && $(this).hasClass("takenByX" || "takenByO")) { //checks to see if square has been played
       (""); //does nothing
  } else if (currentPlayer == "O") { 
      $(this).text("0").addClass("takenByO"); //change clicked square to o & adds class taken
       playerChange(); //runs player change function
  }});

function playerChange() {
  if (currentPlayer === "X"){ //if current player is x, then switch to o
    currentPlayer = "O";
  } else {
    currentPlayer = "X"; //if current player is not x then switch to x
  }
  winner();
}

$("button").on('click', function() { //click function for restart game button
  $('.cell').text(""); //removes all added text from the cells
  $('.cell').removeClass("takenByX"); //removes the taken class from the cells
  $('.cell').removeClass("takenByO");
  $('h1').text("C R O S S E S & & N O U G H T S").append;
  if (currentPlayer == "O"){
    playerChange(); //changes back to player x so o doesnt play first
  }
});

function winner(){
   if ( 
       $(".cell1" && ".cell2" && ".cell3").hasClass("takenByX") || // -
       $(".cell1" && ".cell5" && ".cell9").hasClass("takenByX") || // \
       $(".cell1" && ".cell4" && ".cell7").hasClass("takenByX") || // |
       $(".cell2" && ".cell5" && ".cell8").hasClass("takenByX") || // |
       $(".cell3" && ".cell6" && ".cell9").hasClass("takenByX") || // |
       $(".cell4" && ".cell5" && ".cell6").hasClass("takenByX") || // -
       $(".cell7" && ".cell8" && ".cell9").hasClass("takenByX")    // -
   ){
         $('h1').text("Congratulations Winner!").append;
      } else {
        (""); //do nothing
      }}
      
   if (
       $(".cell1" && ".cell2" && ".cell3").hasClass("takenByO") || // -
       $(".cell1" && ".cell5" && ".cell9").hasClass("takenByO") || // \
       $(".cell1" && ".cell4" && ".cell7").hasClass("takenByO") || // |
       $(".cell2" && ".cell5" && ".cell8").hasClass("takenByO") || // |
       $(".cell3" && ".cell6" && ".cell9").hasClass("takenByO") || // |
       $(".cell4" && ".cell5" && ".cell6").hasClass("takenByO") || // -
       $(".cell7" && ".cell8" && ".cell9").hasClass("takenByO")    // -
   ){
         $('h1').text("Congratulations Winner!").append;
      } else {
        (""); //do nothing
      }

      
//if a winner is declared stop allowing clicks?

body {
    background-image: url("https://wallpaperboat.com/wp-content/uploads/2019/06/minimalist-desktop-11.jpg");
    font-family: 'Amatic SC', cursive;
}

h1 {
    font-size: 75px;
    align-items: center;
    text-align: center;
    text-shadow: 2px 2px #196775;
}

section {
    text-align: center;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: 600px;
    margin: 50px auto;
}

.cell {
    font-family: 'Major Mono Display', monospace;
    width: 200px;
    height: 200px;
    box-shadow: 0 0 0 1px #196775;
    border: 1px solid #196775;
    font-size: 150px;
    color: rgb(0, 35, 46);
    justify-content: center;
    text-align: center;
    padding-top: 20px;
}

.restart {
    transition-duration: 0.4s;
    background-color: lightsteelblue;
    font-family: 'Amatic SC', cursive;
    color: black;
    text-align: center;
    padding: 5px 5px;
    border: none;
    text-decoration: none;
    font-size: 30px;
    text-shadow: 1px 1px 1px #196775;
    box-shadow: 0 10px 15px 0 #196775;
    outline: none;

}
.restart:hover {
    box-shadow: 0 10px 15px 0 rgb(43, 43, 43);
    background-color: rgb(19, 114, 109);
    color: black;
}

footer {
    font-size: 20px;
    bottom: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-family: 'Amatic SC', cursive;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Major+Mono+Display&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script defer src="app.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <title>crosses & noughts</title>
</head>
<body>

<h1>C R O S S E S && N O U G H T S</h1><br>

<section>
<div class="container">
    <div class="cell , cell1"></div>
    <div class="cell , cell2"></div>
    <div class="cell , cell3"></div>

    <div class="cell , cell4"></div>
    <div class="cell , cell5"></div>
    <div class="cell , cell6"></div>

    <div class="cell , cell7"></div>
    <div class="cell , cell8"></div>
    <div class="cell , cell9"></div>
</div>

<button class="restart">Restart Game</button>

<footer>Made by Falon B. Landers</footer>
</section>

</body>
</html>

标签： javascriptjqueryclick

javascript - 结束点击的功能

问题描述

解决方案

推荐阅读