ساخت بازی دوز (tic tac toe) با جاوا اسکریپت

tic tac toe جاوا اسکریپت – بازی دوز یکی از سرگرم کننده ترین بازی های فکری می باشد که یکی از تمرینات خوب برای برنامه نویسان است که بتوانند این بازی را با زبان برنامه نویسی خود پیاده سازی کنند .

در این پروژه بدون هیچ کتابخانه یا فریمورکی این بازی را پیاده سازی می کنیم همچنین از صدا هم در پروژه بهره می بریم .

دموی بازی

صفحه index.html

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>

<body>
    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
        <h1 class="score">
            <span class="score-playerCircle">0</span>
            <span class="score-seperator"> - </span>
            <span class="score-playerX">0</span>
        </h1>
        <div class="tictoc-wrapper">
            <div id="bg"></div>
            <div class="row row-1">
                <div class="col-4 c1"></div>
                <div class="col-4 c2"></div>
                <div class="col-4 c3"></div>
            </div>
            <div class="row row-2">
                <div class="col-4 c4"></div>
                <div class="col-4 c5"></div>
                <div class="col-4 c6"></div>
            </div>
            <div class="row row-3">
                <div class="col-4 c7"></div>
                <div class="col-4 c8"></div>
                <div class="col-4 c9"></div>
            </div>
            <div class="turn">
                <img src="static/img/circle.png" id="playerCircle" class="player">
                <img src="static/img/x.png" id="playerX" class="player">
            </div>
        </div>
    </div>
    <script src="static/js/app.js"></script>
</body>

</html>

اسکریپت app.js

// DOM
const boardDOM = document.getElementsByClassName('tictoc-wrapper')[0];
const columnDOM = document.getElementsByClassName('col-4');
let playersDOM = document.querySelector(".player");
let activePlayerDOM = null;

// property
const winStates = [
    ["c1", "c2", "c3"],
    ["c4", "c5", "c6"],
    ["c7", "c8", "c9"],
    ["c1", "c4", "c7"],
    ["c2", "c5", "c8"],
    ["c3", "c6", "c9"],
    ["c1", "c5", "c9"],
    ["c3", "c5", "c7"]
];

const playerSprites = {
    playerCircle: 'static/img/circle.png',
    playerX: 'static/img/x.png',
}

const audioState = {
    warning: "static/voice/warning.aac",
    winner: "static/voice/win.aac"
}

const turnList = ["playerCircle", "playerX"]

const audio = new Audio();

let playerCounter = 0;
let turn = null;
let lockBoard = false;

changeTheTurn();

// set handlers
loopThrowDOMS(columnDOM, (element) => element.addEventListener('click', columnDOMClickHandler))

// handlers
function columnDOMClickHandler(event) {
    const thisElement = this;

    if (lockBoard) return false;

    if (thisElement.dataset['player'] != undefined) {
        loadAudio(getLink(audioState['warning']));
        return false;
    }
    thisElement.innerHTML = `<img src="${playerSprites[turn]}">`;
    thisElement.setAttribute("data-player", turn);
    activePlayerDOM.classList.remove("active");

    checkTheWinner();
    checkTheBoard();

    playerCounter++;
    if (turnList[playerCounter] == undefined)
        playerCounter = 0;

    changeTheTurn();
}

// helpers
function loopThrowDOMS(doms, funcHandler) {
    const tmpDOMS = Array.from(doms);
    tmpDOMS.forEach(funcHandler);
}

function activeTheBoard(element) {
    element.innerHTML = "";

    if (element.hasAttribute('data-player'))
        element.removeAttribute("data-player");

    changeTheTurn();
    boardDOM.classList.remove("disabled");
    lockBoard = false;
}

function cleanTheBoard() {
    loopThrowDOMS(columnDOM, (element) => {
        boardDOM.classList.add("disabled");
        lockBoard = true;
        setTimeout(activeTheBoard, 2000, element);
    })
}

function checkTheBoard() {
    let filledColumn = 0;
    loopThrowDOMS(columnDOM, (element) => {
        if (element.hasAttribute("data-player"))
            filledColumn++;
    });

    if (filledColumn == 9)
        cleanTheBoard();
}

function checkTheWinner() {

    for (var i = 0; i < winStates.length; i++) {
        const currentState = winStates[i];
        if (document.getElementsByClassName(currentState[0])[0].dataset['player'] != undefined && document.getElementsByClassName(currentState[1])[0].dataset['player'] != undefined && document.getElementsByClassName(currentState[2])[0].dataset['player'] != undefined) {

            if (document.getElementsByClassName(currentState[0])[0].dataset['player'] == document.getElementsByClassName(currentState[1])[0].dataset['player'] && document.getElementsByClassName(currentState[0])[0].dataset['player'] == document.getElementsByClassName(currentState[2])[0].dataset['player']) {
                const score = document.getElementsByClassName("score-" + document.getElementsByClassName(currentState[0])[0].dataset['player'])[0];
                score.textContent = parseInt(score.textContent) + 1;
                loadAudio(getLink(audioState['winner']));
                cleanTheBoard();
            }
        }

    }

}

function changeTheTurn() {
    turn = turnList[playerCounter]
    activePlayerDOM = document.getElementById(turn);
    activePlayerDOM.classList.add('active');
}

function getLink(link) {
    const tmpLink = location.href.replace("index.html", "") + link;
    return tmpLink;
}

function loadAudio(link) {
    audio.src = link;
    audio.onloadeddata = () => audio.play();
}

استایل بازی با main.css

h1{
    margin: 0;
    direction: ltr;
}

.tictoc-wrapper{
    width: 600px;
    height: 600px;
    margin: 0 auto;
    position: relative;
}

.tictoc-wrapper.disabled{
    opacity: 0.5;
}

#bg{
    width: 600px;
    height: 600px;
    background-color: gray;
}

.row{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.row-2{
    top: 210px;
}

.row-3{
    top: 420px;
}

.col-4{
    background-color: #3f51b5;
    width: 180px;
    height: 180px;
    float: left;
    margin-right: 30px; 
    cursor: pointer;
}

.col-4 img{
    width: 80%;
    height: 80%;
    margin-top: 10%;
}

.col-4.c3,.col-4.c6,.col-4.c9{
    margin-right: 0; 
}

.turn{
    position: absolute;
    top: -110px;
    right: 310px;
}

.player{
    position: absolute;
    width: 100px;
}

.player.active{
    animation: blink 1s infinite;
}

#playerCircle{
    top: 320px;
    right: 330px;
}

#playerX{
    top: 320px;
    left: 330px;
    
}

@keyframes blink{
    0%{
        opacity: 1;
    }

    50%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

دانلود سورس بازی دوز

ساخت بازی دوز (tic tac toe) با جاوا اسکریپت

دموی بازی

صفحه index.html

اسکریپت app.js

استایل بازی با main.css

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ