나는 자바 스크립트를 배우고 있으며 TicTacToe 게임을 만드는 것이 가장 좋은 방법이라고 생각했습니다 (이전에 다른 매우 기본적인 JavaScript를 만들었습니다).
나는 그들이 지금 내가하려는 것보다 더 쉬운 해결책인지 궁금합니다.
사용자가 "x"또는 "o"가되고 싶은 경우 옵션을 제공합니다. "x"또는 "o"를 선택하면 실행되는 두 개의 별도 함수가 있습니다.
"x"또는 "o"가 선택되었는지 여부를 감지하고 그 선택 직후에 다른 기능을 시작할 수있는 하나의 기능 만 가질 수있는 방법이 있습니까? (틱택 토 보드를 꺼내는 기능이 될 것 같은데요)
당신은 내가 the var userChoiceO=document.GetElementById("O");와 w를 가지고 노는 것을 볼 수 .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;
} <p>Click on the shape you would like to play as</p>
<div class="XO">
<span id="X" class="X" onclick="userChoiceX()">X</span><span id="O" class="O" onclick="userChoiceO()">O</span>
</div>이벤트 핸들러를 두 범위의 부모와 바인딩 할 수 있습니다 <div class="XO" onclick="userChoice(event);">.
그러면 event.target클릭 된 범위 요소가 제공됩니다.
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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다