使用Javascript的井字遊戲

我一直試圖解決這個問題好幾個小時，但我只是覺得自己像一個白癡。這是編程課，代碼應該做的是在單擊時在一個盒子中顯示「x」，而在奇數上單擊時顯示「o」。現在，單擊這些框時只顯示「x」。我想我正在搞一個涉及全局變量的地方。有人能幫我弄清楚我做錯了什麼嗎？使用Javascript的井字遊戲

這裏是HTML和Javascript代碼：

var markCount 
 

 
window.onload = function() { 
 
    var i; 
 
    var prefix; 
 

 
    i = 0; //initializing i 
 
    prefix = "square"; //defining prefix 
 
    markCount = getMarkCount(); 
 
    while (i !== null) //will keep repeating until i is null 
 
    { 
 
    document.getElementById(prefix + i).onclick = markTheSquare; //finds element Id by prefix and i number and references clicked function 
 
    i = i + 1; //increments i 
 
    } //while 
 
}; 
 

 
function markTheSquare() { 
 
    this.onclick = null; 
 
    this.innerHTML = getXorO; //causes x or o to be displayed in current element 
 
    markCount = markCount + 1; 
 
} 
 

 
function getMarkCount() { 
 
    return setMarkCount(markCount); 
 
} 
 

 
function setMarkCount(markCount) { 
 
    markCount = 0; 
 
} 
 

 
function getXorO() { 
 
    var string; 
 
    var p; 
 

 
    string = "xo" 
 
    p = getMarkCount % 2; 
 
    return string.charAt(p); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<title> Tic-Tac-Toe Part 2 </title> 
 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
 
<script src="ticTacToePart1.js" type="text/javascript"></script> 
 
<style type="text/css"> 
 
body 
 
{ 
 
font-size:12pt; 
 
margin-left:auto; 
 
margin-right:auto; 
 
padding-top:5em; 
 
width:33em; 
 
} 
 

 
.square 
 
{ 
 
float:left; 
 
font-size:8em; 
 
height:1.25em; 
 
text-align:center; 
 
width:1.25em; 
 
} 
 

 
.border1 
 
{ 
 
border-left:solid; 
 
border-right:solid; 
 
} 
 

 
.border2 
 
{ 
 
border-bottom:solid; 
 
border-top:solid; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<div id=page> 
 
<div class="square" id=square0></div> 
 
<div class="square border1" id=square1></div> 
 
<div class="square" id=square2></div> 
 
<div class="square border2" id=square3></div> 
 
<div class="square border1 border2"id=square4></div> 
 
<div class="square border2" id=square5></div> 
 
<div class="square" id=square6></div> 
 
<div class="square border1" id=square7></div> 
 
<div class="square" id=square8></div> 
 
<div id=ticTacToeBoard></div> 
 
</div> 
 
</body> 
 
</html>

來源

2014-10-20 shortbutevil

這是因爲每次你打電話getMarkCount要設置markCount爲0（因爲你是在getMarkCount調用setMarkCount）。只需將getMarkCount替換爲markCount即可。

p = markCount % 2;

來源

2014-10-20 04:37:31 Anuja

恐怕這似乎沒有工作。我將p = ...從getMarkCount更改爲markCount，但我仍然只獲取「x」和「o」。 – shortbutevil 2014-10-20 08:08:51

使用Javascript的井字遊戲

回答

相關問題