Question

我正在制作一个Javascript Tic Tac Toe游戏，我遇到了重置按钮的问题。我相信在我的clickHandler函数中，我应该调用blankPattern函数。但是它不起作用。

<!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>

Answer 1

这对我有用。

＆＃13;

function clickHandler() {
    pattern = blankPattern();
    colorPattern();
}

＆＃13;

在Javascript Tic Tac Toe游戏中重置按钮

1 个答案: