All geek questions in one place

Best way to update my tic tac toe game with pure JavaScript?

I have a 95% completed game with player and player tic tac. In the future I will add a good AI and set the conditions when someone wins.

Now I'm just looking for the best way to update my game without reloading the page in pure JavaScript. I have a button at the bottom of my page, and basically, when she clicks, I want everything on my board to be completely cleared and the game starts.

They will click on it at the bottom of my HTML

<center><div id="refresh" class="fa fa-refresh faa-spin animated-hover fa-5x"></div></center>

Here is my tic tac toe game in case someone wants to watch it :)

Trying really hard to become really good in HTML / CSS / JavaScript> <So hard!

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tic-Tac-Toe</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-awesome-animation.min.css">
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>

<header>
    <h1>Tic-Tac-Toe </h1>
</header>

<body>
<!--Table for Tic Tac Toe-->
<table id="mytable" class="grid">
    <tr>
        <td id="field1" class="square"></td>
        <td id="field2" class="square v"></td>
        <td id="field3" class="square"></td>
    </tr>
    <tr>
        <td id="field3" class="square h"></td>
        <td id="field4" class="square v h"></td>
        <td id="field5" class="square h"></td>
    </tr>
    <tr>
        <td id="field4" class="square"></td>
        <td id="field5" class="square v"></td>
        <td id="field6" class="square"></td>
    </tr>
</table>
<!--Refresh Icon/Start Game Over-->
<div id="refreshIcon">
    <center><div id="refresh" class="fa fa-refresh faa-spin animated-hover fa-5x"></div></center>
</div>

</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Javascript

var xTick = "../images/x-tick.png";
var oTick = "../images/o-tick.png";
var bg = null;
var counter = 0;
var memoryMove = [];
var refreshButton = document.getElementById('refresh');

var listRows = document.getElementById("mytable").rows;
/** detecting rows */
for(var i = 0; i < listRows.length;i++){
    /** detecting cells */
    for(var x = 0; x < listRows[i].cells.length; x++){
        listRows[i].cells[x].setAttribute("data-cell",i.toString()+x.toString());
        listRows[i].cells[x].addEventListener("click",function(){
            var move = this.getAttribute("data-cell");
            console.log(move);
            if (memoryMove.indexOf(move) === -1){
                memoryMove.push(move);
                if (counter === 0){
                    bg = xTick;
                } else {
                    if(counter % 2 === 0){
                        bg = xTick;
                    } else {
                        bg = oTick;
                    }
                }
                counter++;
                this.style.background="url('./images/"+bg+"') center center no-repeat";
            } else {
                alert('Stop trying to cheat!');
            }
            /** Start a new game */
            refreshButton.addEventListener('click', function() {

                // alert("Refresh Results");
            })
        });
    }
}
+4
source share
2

td. reset counter memoryMove.

refreshButton.addEventListener('click', function() {

    for (var i = 1;i <= 9;i++) {
        document.getElementById("field"+i).style.background="none";
        counter = 0;
        memoryMove = [];
    }

 });
+2

javascript:

for (var i = 1;i <= 9;i++) {
    var fieldId = "field" + i; //ex 'field1'
    document.getElementById(fieldId).value = "";
}
+2

Source: https://habr.com/ru/post/1616010/

More articles:


All Articles