小贝子编程

Tic Tac Toe 2 players



嘿，我有一个关于javascript的问题。现在我得编一个井字游戏的程序。我已经到了第一个球员可以在左上角传中的地步。现在我问我的问题，我如何确保在第一个带有符号X的玩家之后，第二个带有符号O的玩家打开并玩游戏。

目前的代码：

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";
}
}
.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;
}
<!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>

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

但是请不要把这个函数写9次。对所有字段重复使用一个函数(你可能也不应该重复你的css 9次！(

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;
}
}))
.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;
}
<!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. 创建一个变量来跟踪当前玩家
  2. 为零创建另一个函数
  3. 创建一个函数来处理单击事件
  4. 在该函数中，检查当前玩家，并在此玩家的基础上调用erstes或zero函数

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";
}
}
.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;
}
<!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>

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

// 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;
});
});
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;
}
<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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium