tictac.png

Simple Tic-Tac-Toe Game using JavaScript.

by
with one comment
GamesJScript

Simple Tic-Tac-Toe Game using JavaScript.

Preview:

Player 1 indicate to : 0

Player 2 indicate to : x

Tic-Tac-Toe

Player 0 is turn
Player-1: 0
Player-2: 0

{tocify} $title={Table of Contents}

How to implement a 2-player tic-tac-toe game using jquery?

It’s easy to develop with some simple assumptions and error checks. Player-1 starts playing the game and both players make their moves in a continuous turn. The player who makes a straight 3-block chain wins the game. The game is built on the front using only simple logic and validation checks.

Prerequisite: Basic knowledge of some front-end technologies like HTML, CSS, JavaScript and JQuery.


Download Code in .zip :- Click here

Step-1:Create Basic Structure.

File Name:tictactoe.html


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic-Tac-Toe</title>
    <link rel="stylesheet" href="css/tictac.css">
    </head>
    <body>
        <div class="container-flued1">
            <div class="container-box">
                <p>Player 1 indicate to 0</p>
                <p>Player 2 indicate to x</p>
                <h1>Tic-Tac-Toe</h1>
                <div id="turns">Player 0 is turn</div>
                <div class="container1">
                    <input type="button" class="buttons" id="1">
                    <input type="button" class="buttons" id="2">
                    <input type="button" class="buttons" id="3">
                    <input type="button" class="buttons" id="4">
                    <input type="button" class="buttons" id="5">
                    <input type="button" class="buttons" id="6">
                    <input type="button" class="buttons" id="7">
                    <input type="button" class="buttons" id="8">
                    <input type="button" class="buttons" id="9">
                </div>
                <div id="result"></div>
                <div id="pay1">Player-1: 0</div>
                <div id="pay2">Player-2: 0</div>
                <button id="restart">Restart</button>
            </div>
        </div>
        <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
        <script src="js/tictak.js"></script>
    </body>
    </html>

Step-2: Add CSS file

File-name: tictac.css

@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Roboto:wght@300&family=Updock&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.5em;
    font-family: 'Roboto', sans-serif;
}

body {
    background: white;
}

.container-flued1{
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container1{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

.buttons {
    border: none;
    outline: none;
    font-size: 36px;
    background: white;
    color: white;
    font-weight: bold;
    font-family: 'Caveat', cursive;
}

.container-box .buttons:nth-child(2),
.container-box .buttons:nth-child(8) {
    border: none;
    border-right: 2px solid gray;
    border-left: 2px solid gray;
}

.container-box .buttons:nth-child(4),
.container-box .buttons:nth-child(6) {
    border: none;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.buttons:nth-child(5) {
    border: 2px solid gray;
}

#restart {
    padding: 5px 10px;
    border: none;
    outline: none;
    color: white;
    background: #46a049;
}

.result {
    border: 1px solid rgb(33, 150, 243);
    background: rgba(33, 150, 243, 0.6);
    color: white;
    border-radius: 4px;
    padding: 4px;
    width: 300px;
}

#pay1,
#pay2 {
    font-weight:bold;
    color: navy;
}

[value='0'] {
    color: black;
}

[value='x'] {
    color: red;
}

.green {
    color: green;
}
#turns{
    background:#46a049;
    color:white;
    padding:5px;
    margin:20px 0;
}

Step-3: Add JavaScript

File-Name : tictac.js
    
var a=0;
var a1,a2,a3,a4,a5,a6,a7,a8,a9;
var wan;
var player1=0;
var player2=0;
var index=[];
ind = 0;
var bntset=1;

// defolt fontions

arrindex=() => {
    index.length = 0;
    index = []    ind = 0;
}
pay1 =() =>{
    player1++;
    $('#pay1').text("Player-1: "+player1);
    wan = "Palyer 1 is wins. ";
}

pay2 =() =>{
    player2++;
    $('#pay2').text("player-2: "+player2);
    wan = "Player 2 is wins. ";
}

result = (win) => {
    bntset = 0;
    index.length=9;
    arrindex();
    if (win == 0) {
        pay1();
        }
    if (win == 'x') {
        pay2();
    }
    $('#result').text(wan+" click Reset button to restart new game");
    $('#result').addClass('result');
}

myfun = () => {
    if(a==0){
        a = 'x';
    }else{
        a = 0;
    }
}
reset=() => {
    $('#result').text(" ")
    $('.buttons').attr('value',' ');
    a=0;
    bntset=1;
    a1=2;a2=2;a3=2;a4=2;a5=2;a6=2;a7=2;a8=2;a9=2;
    arrindex();
    turn();
    $('#result').removeClass('result');
    $('.buttons').removeClass('green');
}

$('#restart').click(()=>{
    reset();
});

btnclick=(btn) => {
    if ($(btn).val() == '0' || $(btn).val() == "x") {
        alert('invalid click');
    } else {
        $(btn).attr('value', a);
        myfun();
        index[ind]=ind;
        ind++;
    }
    if(index.length==9){
        $('#result').text("Match draw click Reset button to restart new game");
        $('#result').addClass('result');
        arrindex();
    }
}
turn =() => {
    if (a == 0) {
        $('#turns').text("Player 0 is turn");
    } else {
        $('#turns').text("Player x is turn");
    }
}

// Buttons click funstions
$('#1').click(() => { if (bntset==1){btnclick("#1"); a1 = $('#1').val(); }else{alert("Press reset buttom for new game.")}});
$('#2').click(() => { if (bntset==1){btnclick("#2"); a2 = $('#2').val(); }else{alert("Press reset buttom for new game.")}});
$('#3').click(() => { if (bntset==1){btnclick("#3"); a3 = $('#3').val(); }else{alert("Press reset buttom for new game.")}});
$('#4').click(() => { if (bntset==1){btnclick("#4"); a4 = $('#4').val(); }else{alert("Press reset buttom for new game.")}});
$('#5').click(() => { if (bntset==1){btnclick("#5"); a5 = $('#5').val(); }else{alert("Press reset buttom for new game.")}});
$('#6').click(() => { if (bntset==1){btnclick("#6"); a6 = $('#6').val(); }else{alert("Press reset buttom for new game.")}});
$('#7').click(() => { if (bntset==1){btnclick("#7"); a7 = $('#7').val(); }else{alert("Press reset buttom for new game.")}});
$('#8').click(() => { if (bntset==1){btnclick("#8"); a8 = $('#8').val(); }else{alert("Press reset buttom for new game.")}});
$('#9').click(() => { if (bntset==1){btnclick("#9"); a9 = $('#9').val(); }else{alert("Press reset buttom for new game.")}});


// posible outcome to win
$('.buttons').on('click',()=>{
    turn();
    if(bntset==1){
        if (a1==0&&a2==0&&a3==0 || a1=='x'&&a2=='x'&&a3=='x'){$("#1,#2,#3").addClass('green');}
        if (a4==0&&a5==0&&a6==0 || a4=='x'&&a5=='x'&&a6=='x'){$("#4,#5,#6").addClass('green');}
        if (a7==0&&a8==0&&a9==0 || a7=='x'&&a8=='x'&&a9=='x'){$("#7,#8,#9").addClass('green');}
        if (a1==0&&a5==0&&a9==0 || a1=='x'&&a5=='x'&&a9=='x'){$("#1,#5,#9").addClass('green');}
        if (a7==0&&a5==0&&a3==0 || a7=='x'&&a5=='x'&&a3=='x'){$("#7,#5,#3").addClass('green');}
        if (a1==0&&a4==0&&a7==0 || a1=='x'&&a4=='x'&&a7=='x'){$("#1,#4,#7").addClass('green');}
        if (a2==0&&a5==0&&a8==0 || a2=='x'&&a5=='x'&&a8=='x'){$("#2,#5,#8").addClass('green');}
        if (a3==0&&a6==0&&a9==0 || a3=='x'&&a6=='x'&&a9=='x'){$("#3,#6,#9").addClass('green');}

        if (a1==0&&a2==0&&a3==0||a4==0&&a5==0&&a6==0||a7==0&&a8==0&&a9==0){result(0);}
        if (a1=='x'&&a2=='x'&&a3=='x'||a4=='x'&&a5=='x'&&a6=='x'||a7=='x'&&a8=='x'&&a9=='x'){result('x');}
        if (a1==0&&a4==0&&a7==0||a2==0&&a5==0&&a8==0||a3==0&&a6==0&&a9==0){result(0);}
        if (a1=='x'&&a4=='x'&&a7=='x'||a2=='x'&&a5=='x'&&a8=='x'||a3=='x'&&a6=='x'&&a9=='x'){result('x');}
        if (a1==0&&a5==0&&a9==0||a3==0&&a5==0&&a7==0){result(0);}
        if (a1=='x'&&a5=='x'&&a9=='x'||a3=='x'&&a5=='x'&&a7=='x'){result('x');}
    }
});

Tags: No tags

One Response

Add a Comment

Your email address will not be published. Required fields are marked *