Javascript井字游戏中的重置按钮
我正在做一个Javascript的Tic-Tac-Toe游戏，重置按钮有问题。我相信在clickHandler函数中，我应该调用blankPattern函数。但它不起作用Javascript井字游戏中的重置按钮,javascript,Javascript,我正在做一个Javascript的Tic-Tac-Toe游戏，重置按钮有问题。我相信在clickHandler函数中，我应该调用blankPattern函数。但它不起作用 <!doctype html> <html> <head> <title>Tic Tac Toe</title> <style> #stage { positi
<!doctype html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
#stage {
position:relative;
}
.cell {
position:absolute;
border:3px solid black;
background-color:white;
font-size: 300px;
text-align: center;
color: red;
}
#reset {
font-family: "Lucida Console", Monaco, monospace;
color: white;
height: 100px;
width: 150px;
background-color:black;
top: 45%;
left: 50%;
position: absolute;
font-size: 30px;
}
</style>
</head>
<body>
<div id="stage"></div>
<button id = "reset">Reset</button>
<script>
var reset = document.querySelector("#reset");
reset.style.cursor = "pointer";
reset.addEventListener("click", clickHandler, false);
// GRAB A REFERENCE TO THE STAGE
var stage = document.querySelector("#stage");
// THE SIZE AND SPACE OF EACH CELL
var SIZE = 290;
var SPACE = 0;
// THE ARRAY DIMENSIONS - TRY CHANGING THESE TO GET LARGER OR SMALLER GRAPHS
var MAXROWS = 3;
var MAXCOLS = 3;
// THE 2D ARRAY THAT DEFINES THE PATTERN
var pattern = blankPattern();
// CREATE THE DIVS and POSITION THEM IN THE STAGE... BUT DON'T WORRY ABOUT COLORING THEM HERE!!!!
for (var row = 0; row < MAXROWS; row++) {
for (var col = 0; col < MAXCOLS; col++) {
// CREATE A DIV HTML ELEMENT CALLED CELL
var cell = document.createElement("div");
// SET ITS CSS CLASS TO CELL
cell.setAttribute("class", "cell");
// GIVE EACH OF THE CREATED DIVS A UNIQUE ID
// BASED ON THE ROW# AND COL#
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
cell.setAttribute("id", "c-" + row + "-" + col);
// !!!!! ADD A CLICK HANDLER TO EACH OF THE INDIVIDUAL DIVS
cell.addEventListener("click", cellClick, false);
// ADD THE DIV HTML ELEMENT TO THE STAGE
stage.appendChild(cell);
// POSITION THE CELL IN THE CORRECT PLACE
// WITH 10 PIXELS OF SPACE AROUND IT
cell.style.width = SIZE + "px";
cell.style.height = SIZE + "px";
cell.style.top = row * (SIZE + SPACE) + "px";
cell.style.left = col * (SIZE + SPACE) + "px";
}
}
colorPattern();
// ***********************************************************************************************
// ***********************************************************************************************
// ***********************************************************************************************
// FUNCTION DECLARATIONS
// ***********************************************************************************************
// ***********************************************************************************************
// ***********************************************************************************************
// ***********************************************************************************************
function blankPattern() {
// ***********************************************************************
// This function creates a new 2D array based on the size of the MAXROWS and MAXCOLS
// All cells of the array are initialized to 0
// The function RETURNS this new 2D array back to the calling function
// ***********************************************************************
// CREATE A LOCAL VARIABLE TO HOLD THE 2D ARRAY
var newPattern = [];
// LOOP THROUGH ALL THE ROWS
for (var row = 0; row < MAXROWS; row++) {
// EACH ROW OF THE ARRAY.. .IS ALSO AN ARRAY... SO INITIALIZE IT TO BE ONE
newPattern[row] = [];
// LOOP THROUGH ALL THE COLUMNS OF THE ARRAY
for (var col = 0; col < MAXCOLS; col++) {
// INITIALIZE ALL THE CELL VALUES TO BE 0
newPattern[row][col] = 0;
}
}
// RETURN THIS NEW ARRAY BACK TO THE CALLING FUNCTION
return newPattern;
}
function colorPattern() {
// ***********************************************************************
// This function uses the GLOBAL VARIABLE "pattern" to color the divs
// ***********************************************************************
for (var row = 0; row < MAXROWS; row++) {
for (var col = 0; col < MAXCOLS; col++) {
var cell = document.querySelector("#c-" + row + "-" + col);
// COLOR THE CELL IF IT'S ARRAY VALUE IS "1"
if (pattern[row][col] === 0) {
cell.innerHTML = "";
} else if (pattern[row][col] === 1) {
cell.innerHTML = "X";
} else if (pattern[row][col] === 2) {
cell.innerHTML= "O";
}
}
}
}
function cellClick() {
// RIP APART THE DIV ID THAT WAS CLICKED ON
// WERE HIDING THE ROW AND COLUMN IN THE ID
// THE FORMAT OF THE ID IS "C-ROW#-COL#"
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
var zpos;
thisid = "0-1"
// THE "this" KEYWORD RETURNS THE HTML ELEMENT THAT WAS CLICKED ON
var thisid = this.id;
zpos = thisid.indexOf("-");
thisid = thisid.substr(zpos+1);
zpos = thisid.indexOf("-");
var thisRow = thisid.substr(0,zpos);
var thisCol = thisid.substr(zpos+1);
// now that we have the row and column for this div... change the array
if (pattern[thisRow][thisCol] === 0) {
pattern[thisRow][thisCol] = 1;
}
else if (pattern[thisRow][thisCol] === 1) {
pattern[thisRow][thisCol] = 2;
}
else {
pattern[thisRow][thisCol] = 0;
}
colorPattern();
}
function clickHandler ()
{
pattern = blankPattern();
}
</script>
</body>
</html>
井字过三关
#舞台{
位置：相对位置；
}
.细胞{
位置：绝对位置；
边框：3倍纯黑；
背景色：白色；
字体大小：300px；
文本对齐：居中；
颜色：红色；
}
#重置{
字体系列：“Lucida控制台”，摩纳哥，monospace；
颜色：白色；
高度：100px；
宽度：150px；
背景色：黑色；
最高：45%；
左：50%；
位置：绝对位置；
字体大小：30px；
}
重置
var reset=document.querySelector（“重置”）；
reset.style.cursor=“指针”；
reset.addEventListener（“单击”，clickHandler，false）；
//抓住舞台的参照物
var stage=document.querySelector（“阶段”）；
//每个单元的大小和空间
变量大小=290；
var空间=0；
//数组维度-尝试更改这些维度以获得更大或更小的图形
var MAXROWS=3；
var-MAXCOLS=3；
//定义阵列的二维阵列
var模式=blankPattern（）；
//创建div并将其放置在舞台上。。。但是不要担心在这里给它们上色！！！！
对于（变量行=0；行