文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Tac Tac脚趾2名球员

问Tac Tac脚趾2名球员
EN

Stack Overflow用户
提问于 2021-05-24 13:30:22
回答 3查看 201关注 0票数 0

嘿我有个关于javascript的问题。现在我要设计一个抽搐脚趾游戏。我已经做到了，第一个球员可以把他的传中放在左上角。现在，我问我的问题，我如何使它之后，第一个玩家的符号X，第二个玩家的符号O是打开和播放。

目前的守则：

代码语言：javascript
复制
function erstes() {
  var x = document.getElementById("erstesfeld");
  if (x.innerHTML === "Blank")
   {
    x.innerHTML = "X";
    document.getElementById("erstesfeld").style.fontSize = "100px";
    document.getElementById("erstesfeld").style.fontFamily = "cursive";
  }
}
代码语言：javascript
复制
.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}

.Feld div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: black;
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.drei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.vier{
    width: 200px;
    height: 200px;
    border-color: black;
}

.fünf{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sechs{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: black;
}

.acht{
    width: 200px;
    height: 200px;
    border-color: black;
}

.neun{
    width: 200px;
    height: 200px;
    border-color: black;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title>TTT</title>
</head>
<body>

    <div class="Feld">
        <div><button class="eins" id="erstesfeld" onclick="erstes()">Blank</button> </div>
        <div><button class="zwei" id="zweitesfeld" onclick="zweites()">Blank</button></div>
        <div><button class="drei" id="drittesfeld" onclick="drittes()">Blank</button></div>
        <div><button class="vier">Blank</button></div>
        <div><button class="fünf">Blank</button></div>
        <div><button class="sechs">Blank</button></div>
        <div><button class="sieben">Blank</button></div>
        <div><button class="acht">Blank</button></div>
        <div><button class="neun">Blank</button></div>
    </div>
</body>
</html>

​

javascript
html
tic-tac-toe
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-05-24 13:53:52

总结！

  1. 创建一个变量来跟踪当前播放器。
  2. 为0创建另一个函数。
  3. 创建一个函数来处理单击事件。该函数中的
  4. 检查当前播放器并根据该播放器调用erstes或零函数。

​

代码语言：javascript
复制
let currentPlayer = "player1";
function handleClick(box) {
  if(currentPlayer === "player1"){
    erstes(box);
    currentPlayer = "player2";
  }else{
    zero(box);
    currentPlayer = "player1";
  }
}
function erstes(box) {
  var x = box;
  if (x.innerHTML === "Blank")
   {
    x.innerHTML = "X";
    x.style.fontSize = "100px";
    x.style.fontFamily = "cursive";
  }
}
function zero(box) {
  var o = box;
  if (o.innerHTML === "Blank")
   {
    o.innerHTML = "O";
    o.style.fontSize = "100px";
    o.style.fontFamily = "cursive";
  }
}
代码语言：javascript
复制
.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}

.Feld div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: black;
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.drei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.vier{
    width: 200px;
    height: 200px;
    border-color: black;
}

.fünf{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sechs{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: black;
}

.acht{
    width: 200px;
    height: 200px;
    border-color: black;
}

.neun{
    width: 200px;
    height: 200px;
    border-color: black;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title>TTT</title>
</head>
<body>

    <div class="Feld">
        <div><button class="eins" id="erstesfeld" onclick="handleClick(this)">Blank</button> </div>
        <div><button class="zwei" id="zweitesfeld" onclick="handleClick(this)">Blank</button></div>
        <div><button class="drei" id="drittesfeld" onclick="handleClick(this)">Blank</button></div>
        <div><button class="vier" onclick="handleClick(this)">Blank</button></div>
        <div><button class="fünf" onclick="handleClick(this)">Blank</button></div>
        <div><button class="sechs" onclick="handleClick(this)">Blank</button></div>
        <div><button class="sieben" onclick="handleClick(this)">Blank</button></div>
        <div><button class="acht" onclick="handleClick(this)">Blank</button></div>
        <div><button class="neun" onclick="handleClick(this)">Blank</button></div>
    </div>
</body>
</html>

​

票数 0
EN

Stack Overflow用户

发布于 2021-05-24 13:54:46

最简单的是，只需存储一个布尔标志，以指示您是处于X模式还是O模式。

但是请不要把这个函数写9遍。为所有字段重用一个函数(您可能也不应该重复css 9次！)

​

代码语言：javascript
复制
let isX = true;

document.querySelectorAll("button").forEach(b => b.addEventListener("click",(e) => {
 let target = e.target
  if (target.innerHTML === "Blank")
   {
    target.innerHTML = isX ? "X" : "O";
    target.style.fontSize = "100px";
    target.style.fontFamily = "cursive";
    isX = !isX;
  }
}))
代码语言：javascript
复制
.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}

.Feld div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: black;
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.drei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.vier{
    width: 200px;
    height: 200px;
    border-color: black;
}

.fünf{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sechs{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: black;
}

.acht{
    width: 200px;
    height: 200px;
    border-color: black;
}

.neun{
    width: 200px;
    height: 200px;
    border-color: black;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title>TTT</title>
</head>
<body>

    <div class="Feld">
        <div><button class="eins" id="erstesfeld">Blank</button> </div>
        <div><button class="zwei" id="zweitesfeld">Blank</button></div>
        <div><button class="drei" id="drittesfeld">Blank</button></div>
        <div><button class="vier">Blank</button></div>
        <div><button class="fünf">Blank</button></div>
        <div><button class="sechs">Blank</button></div>
        <div><button class="sieben">Blank</button></div>
        <div><button class="acht">Blank</button></div>
        <div><button class="neun">Blank</button></div>
    </div>
</body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2021-05-24 13:50:50

您有所谓的标志-一些布尔变量-保存当前用户的状态，在移动结束时，您切换此标志指向另一个用户。

​

代码语言：javascript
复制
// Define _flag_ to hold state
let isCurrentX = true;

$(document).ready(function () {
  $(document).on('click', 'button:not(.owned)', function () {
    // Act depending on current _flag_ state
    if (isCurrentX) {
      $(this).addClass('owned x');
    } else {
      $(this).addClass('owned o');
    }
    
    $(this).prop('disabled', true);
    
    // Switch _flag_ state
    isCurrentX = !isCurrentX;
  });
});
代码语言：javascript
复制
button:before  {
  content: 'Click';
  display: inline;
  font-style: italic;
}

button.x:before {
  content: 'X';
  display: inline;
  font-style: inherit;
}

button.o:before {
  content: 'O';
  display: inline;
  font-style: inherit;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="tic-tac">
  <div class="row">
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </div>
  <div class="row">
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </div>
  <div class="row">
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67672940

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档