Question

我正在学习javascript，我认为最好的学习方法是制作一个TicTacToe游戏（我之前制作了其他非常基本的JavaScripts）。

我想知道他们是否比我现在正在尝试做的更容易解决。

如果他们想成为“x”或“o”，我会给用户一个选项。如果他们选择“x”或“o”，我有两个独立的功能。

有没有办法可以只使用一个函数来检测是否选择了“x”或“o”然后在该选择之后才开始另一个函数？（我认为这将是绘制tictactoe板的功能）。

你可以看到我正在玩public static void main(String[] args) { Vertx vertx = Vertx.vertx(); vertx.fileSystem() .openObservable("PATH-TO-FILE", new OpenOptions()) .flatMap(asyncFile -> asyncFile.toObservable()) .subscribe(buffer -> System.out.println(buffer.length() + "\n\n"), e-> e.printStackTrace(), () -> vertx.close()); }和w var userChoiceO=document.GetElementById("O");，但我还在学习，其中一些已经过了我的脑海。

如果我朝着正确的方向前进，那么任何建议都会受到赞赏。

以下是我到目前为止所得到的一般概念：

.addEventListener("click", userChoice);

var userShape = 'X';


var playerX=document.getElementById("X");
var playerO=document.getElementById("O");

function userChoiceX () {
	userShape = 'X';
}

function userChoiceO() {
	userShape = '0';
}

.XO {
	font-size:70px;
	text-align: center;
	
}

#X {
	color:#ff574f;
	cursor: pointer;
	text-align: center;
	margin-right: 6vw;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}

#X:hover {
	font-size:100px;
}

#O {
	color:#8cabec;
	cursor: pointer;
	text-align: center;
	margin-left: 6vw;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}

#O:hover {
	font-size:100px;
}

Answer 1

您可以将事件处理程序与两个跨度<div class="XO" onclick="userChoice(event);">的父级绑定，

然后，event.target为您提供单击的span元素：

   function userChoice(event) {
      if (event.target.id == 'X')
        return userChoiceX();
      else if (event.target.id == 'O')
       return userChoiceO();
   }

var userShape = 'X';


var players=document.querySelector(".XO");

   function userChoice(event) {
  if (event.target.id == 'X')
    return userChoiceX();
  else if (event.target.id == 'O')
   return userChoiceO();
   }
function userChoiceX () {
	userShape = 'X';
}

function userChoiceO() {
	userShape = '0';
}

.XO {
	font-size:70px;
	text-align: center;
	
}

#X {
	color:#ff574f;
	cursor: pointer;
	text-align: center;
	margin-right: 6vw;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}

#X:hover {
	font-size:100px;
}

#O {
	color:#8cabec;
	cursor: pointer;
	text-align: center;
	margin-left: 6vw;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}

#O:hover {
	font-size:100px;
}

			<p>Click on the shape you would like to play as</p>
			<div class="XO" onclick="userChoice(event);">
				<span id="X" class="X" >X</span><span id="O" class="O" >O</span>
			</div>

Answer 2

将event delegation与document.addEventListener()和event.target一起使用。这样，HTML标记没有混合使用JavaScript（a.k.a。Unobtrusive Javascript），并且内存泄漏的问题可能会更少（例如，如果删除了带有事件处理程序的元素）。下面的示例还使用Element.className和String.indexOf()来检查所点击元素的类名。

//wait until the DOM is ready
document.addEventListener('DOMContentLoaded', function(domReadyEvent) {
   //observe clicks on the document
  document.addEventListener('click', function(clickEvent) {
    if (clickEvent.target.className.indexOf('X') > -1) {
      console.log('clicked on X');
      //handle click on X
    } else if (clickEvent.target.className.indexOf('O') > -1) {
      console.log('clicked on O');
      //handle click on O
    }
  });
});

.XO {
  font-size: 70px;
  text-align: center;
}
#X {
  color: #ff574f;
  cursor: pointer;
  text-align: center;
  margin-right: 6vw;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}
#X:hover {
  font-size: 100px;
}
#O {
  color: #8cabec;
  cursor: pointer;
  text-align: center;
  margin-left: 6vw;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}
#O:hover {
  font-size: 100px;
}

<p>Click on the shape you would like to play as</p>
<div class="XO">
  <span id="X" class="X">X</span><span id="O" class="O">O</span>
</div>

Answer 3

您可以将该值用作参数..

创建一个名为userChoice()的函数，并使用变量turn

进行转换

所以你的功能变成了

turn = 'X'
function userChoice(){
   userShape = turn
   if(turn == 'X'){
     turn = 'Y'
   }
   else{
     turn = 'X'
   }
}

学习Javascript - 为两种选择轻松听取onclick事件的方法？

3 个答案: