1
私はチックタックトーを作成しています。これはjavascriptを使用しています。しかし、私の唯一の問題は、リセットボタンが動作しないということです。私は、リセットボタンを含む他の投稿を見てきましたが、動作させていません。また、私がリセットボタンのために使った関数は、document.getElementById（ "myForm"）です。チックタックトーゲームのリセットボタン（ボタンがポップアップしますが機能はありません）
私はこれをやっているので、私は明らかに間違いを犯した場合は申し訳ありません。
<!DOCTYPE html>
<html lang="en">
\t
\t <head>
\t <title>Tic Tac Toe Game </title>
\t <meta charset="UTF-8" />
\t </head>
\t
\t <style>
\t \t
\t \t
\t \t
\t \t body{
\t \t \t font-family: san-serif;
\t \t \t background:#333;
\t \t \t color:black;
\t \t \t background-color: yellow;
\t \t }
\t \t td{
\t \t width:80px;
\t \t height:80px;
\t \t border: solid 3px black;
\t \t text-align:center;
\t \t font-size:30pt;
\t \t }
\t \t .tictactoe{
\t \t \t text-align:center;
\t \t \t margin:0 auto;
\t \t \t width:40%;
\t \t \t padding:10px 50px 20px
\t \t }
\t \t .board{
\t \t \t float:left;
\t \t \t margin-left:20px;
\t \t \t width:60%;
\t \t }
\t \t .player{
\t \t \t float:left;
\t \t \t width:15%;
\t \t }
\t \t .player-points{
\t \t \t font-size:50pt;
\t \t }
\t \t h1{
\t \t \t
\t \t \t float: center;
\t \t }
\t \t \t
\t </style>
\t
<h1 align="center"> Tic-Tac-Toe</h1>
\t \t
\t <div class="tictactoe">
\t <div class="player">
\t \t Player 1
\t <div class="player-points" id="player1">
\t \t \t \t \t 0
\t \t \t </div>
\t \t </div>
\t \t <table id="game" class="board">
\t \t </table>
\t <div class="player">
\t \t Player 2
\t <div id="player2" class="player-points">0</div>
\t \t </div>
\t
\t <input type='reset' style='width:100px;margin:0 50%;position:relative;left:-50px;'>
\t
\t
\t <div class="clear"></div>
\t
\t </div>
\t
\t
\t
\t <script>
\t \t var winners = new Array();
//--------------------------------------------------------------- \t
\t // both player selections are used to keep track of the boxes
\t // that the user has clicked on
\t \t var player1pics = new Array();
\t \t var player2pics = new Array();
//----------------------------------------------------------------------------- \t \t
\t \t
\t \t var timer;
\t \t var numberOfPlayers = 2;
\t \t var currentPlayer = 0;
\t \t var move = 0;
\t \t var points1 = 0;
\t \t var points2 = 0;
\t \t var gridsize = 3; // Used for 3x3 Grid
/*
Function drawboard is manily to check if player 1
or player 2 has won the round and if one of those
players wins, then the points will update
*/
function drawBoard() {
var Parent = document.getElementById("game");
var counter = 1;
while (Parent.hasChildNodes()) {
Parent.removeChild(Parent.firstChild);
}
for (s = 0; s < 3; s++) {
var row = document.createElement("tr");
for (r = 0; r < 3; r++) {
var col = document.createElement("td");
col.id = counter;
col.innerHTML = counter;
var handler = function(e) {
if (currentPlayer == 0) {
this.innerHTML = "X";
player1pics.push(parseInt(this.id));
player1pics.sort(function(a, b) { return a - b });
}
else {
this.innerHTML = "O";
player2pics.push(parseInt(this.id));
player2pics.sort(function(a, b) { return a - b });
}
move++;
var isWin = checkWinner();
if (isWin)
{
if(currentPlayer == 0)
points1++;
else
points2++;
document.getElementById("player1").innerHTML = points1;
document.getElementById("player2").innerHTML = points2;
reset();
drawBoard();
}
else
{
if (currentPlayer == 0)
currentPlayer = 1;
else
currentPlayer = 0;
this.removeEventListener('click', arguments.callee);
}
};
col.addEventListener('click', handler);
row.appendChild(col);
counter++;
}
Parent.appendChild(row);
}
loadAnswers();
}
function reset()
{
currentPlayer = 0;
player1pics = new Array();
player2pics = new Array();
}
// Possible ways of Winning
function loadAnswers()
{
winners.push([1, 2, 3]);
winners.push([4, 5, 6]);
winners.push([7, 8, 9]);
winners.push([1, 4, 7]);
winners.push([2, 5, 8]);
winners.push([3, 6, 9]);
winners.push([1, 5, 9]);
winners.push([3, 5, 7]);
}
//Function checkWinner sees if the player has a winning method by looking at the selections
function checkWinner() {
var win = false;
var playerSelections = new Array();
if (currentPlayer == 0)
playerSelections = player1pics;
else
\t playerSelections = player2pics;
if (playerSelections.length >= gridsize) {
for (i = 0; i < winners.length; i++) {
var sets = winners[i];
var setFound = true;
for (r = 0; r < sets.length; r++) {
var found = false;
for (s = 0; s < playerSelections.length; s++) {
if (sets[r] == playerSelections[s]) {
found = true;
break;
}
}
if (found == false) {
setFound = false;
break;
}
}
if (setFound == true) {
win = true;
break;
}
}
}
return win;
}
window.addEventListener('load', function(){
drawBoard();
});
\t \t
\t </script>
\t
\t
\t
\t
\t
\t
\t
</html>
説明をいただきありがとうございます。 –