Tic Tac Toe

Developer
Anton Babkin
Size
4,671 Kb
Views
32,384
  1. Tic Tac Toe Previews
  2. Tic Tac Toe HTML Codes
  3. Tic Tac Toe CSS Codes
  4. Tic Tac Toe JS Codes

How do I make an tic tac toe?

What is a tic tac toe? How do you make a tic tac toe? This script and codes were developed by Anton Babkin on 24 August 2022, Wednesday.

Tic Tac Toe Previews
IQ Test

Tic Tac Toe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic Tac Toe</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Ultimate Tic Tac Toe</h1>
<div id="board"> <div class="field" id="f0" style="color: #f00;">X</div> <div class="v-line"></div> <div class="field" id="f1" style="color: #00f;">O</div> <div class="v-line"></div> <div class="field" id="f2" style="color: #f00;">X</div> <div class="h-line"></div> <div class="field" id="f3" style="color: #00f;">O</div> <div class="v-line"></div> <div class="field" id="f4" style="color: #f00;">X</div> <div class="v-line"></div> <div class="field" id="f5" style="color: #00f;">O</div> <div class="h-line"></div> <div class="field" id="f6" style="color: #f00;">X</div> <div class="v-line"></div> <div class="field" id="f7" style="color: #00f;">O</div> <div class="v-line"></div> <div class="field" id="f8" style="color: #f00;">X</div>
</div>
<div style="font-size: 200%;"> <span class="btn" id="new-game">New game</span> <span class="btn" id="hint">hint</span>
</div>
<div> Difficulty: <span class="btn active" id="easy">easy</span> <span class="btn" id="hard">hard</span>
</div>
<div id="panel-new-game"> <p>Choose your destiny!</p> <div class="btn" id="new-x">X</div> <div class="btn" id="new-o">O</div> <div style="font-size: 50%;"> Difficulty: <span class="btn active" id="new-easy">easy</span> <span class="btn" id="new-hard">hard</span> </div>
</div>
<div id="panel-game-over"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tic Tac Toe - Script Codes CSS Codes

body { font-family: cursive; text-align: center; background-image: url("https://dl.dropboxusercontent.com/s/w4ye9wladx4zkx1/checked_paper.png");
}
#board { width: 50%; min-width: 200px; max-width: 600px; margin: 0px auto;
}
.btn { display: inline-block; border: solid #ff8; border-radius: 20%; padding-left: 2%; padding-right: 2%; margin: 1%; cursor: pointer;
}
.btn:hover, .active { background-color: #c80;
}
.field { width: 32%; height: 32%; text-align: center; cursor: pointer; float: left;
}
.v-line, .h-line { background-color: #333; box-shadow: 0 0 1em #333;
}
.v-line { width: 2%; height: 32%; float: left;
}
.h-line { width: 100%; height: 2%; clear: both;
}
#panel-new-game, #panel-game-over { z-index: 1; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; text-align: center; padding-top: 10%; background-color: rgba(0,0,0,0.8); color: #fff; font-size: 3em;
}
#panel-game-over { display: none;
}

Tic Tac Toe - Script Codes JS Codes

$(document).ready(function () { 'use strict'; var bw, fh, player = 'X', comp = 'O', difEasy = true, i, board = { X: 0, O: 0 }, fieldCode = [ parseInt('000000001', 2), parseInt('000000010', 2), parseInt('000000100', 2), parseInt('000001000', 2), parseInt('000010000', 2), parseInt('000100000', 2), parseInt('001000000', 2), parseInt('010000000', 2), parseInt('100000000', 2) ], winLine = [ parseInt('000000111', 2), parseInt('000111000', 2), parseInt('111000000', 2), parseInt('001001001', 2), parseInt('010010010', 2), parseInt('100100100', 2), parseInt('100010001', 2), parseInt('001010100', 2) ], memo; $(window).resize(resize); $('#new-x').on('click', null, 'X', newGame); $('#new-o').on('click', null, 'O', newGame); $('#new-game').on('click', function () { $('#panel-new-game').show(); }); $('#easy,#new-easy').on('click', null, true, changeDif); $('#hard,#new-hard').on('click', null, false, changeDif); $('#hint').on('click', giveHint); for (i = 0; i < 9; i += 1) { $('#f' + i).on('click', null, i, playerMove); } function newGame(event) { if (event.data === 'X') { player = 'X'; comp = 'O'; $('#new-x').addClass('active'); } else if (event.data === 'O') { player = 'O'; comp = 'X'; $('#new-o').addClass('active'); } $('#panel-new-game').fadeOut(3000, function () { $('#panel-new-game > .btn').removeClass('active'); restart(); }); } function resize() { bw = $('#board').width(); $('#board').css('height', bw + 'px'); fh = $('.field').height(); $('.field').css('line-height', fh + 'px'); $('.field').css('font-size', (0.7 * fh) + 'px'); } resize(); function restart() { $('.field').text(''); $('.field').css('background-color', 'transparent'); board.X = 0; board.O = 0; if (comp === 'X') { compMove(); } } function changeDif(event) { if (event.data === true) { $('#easy,#new-easy').addClass('active'); $('#hard,#new-hard').removeClass('active'); } else { $('#easy,#new-easy').removeClass('active'); $('#hard,#new-hard').addClass('active'); } difEasy = event.data; } function drawMark(fn, cmp) { var mark = cmp ? comp : player; $('#f' + fn).text(mark); $('#f' + fn).css('color', mark === 'X' ? '#f00' : '#00f'); } function playerMove(event) { var fn = event.data, fc = fieldCode[fn], wl; if ((fc & board.X) !== 0 || (fc & board.O) !== 0) { // clicked field occupied return; } board[player] |= fc; // add mark at fc to the board drawMark(fn, false); // console.log('player ' + player + ' to ' + fn); // logBoard(board); wl = checkWin(true, board); if (wl !== false) { // console.log('Player wins: ' + wl.toString(2)); gameOver(1, wl); } else if (countOccupiedFields(board) === 9) { gameOver(0); } else { compMove(); } } function compMove() { var fn, fc, moves, wl; if (difEasy === true) { do { fn = Math.floor(9 * Math.random()); fc = fieldCode[fn]; } while ((fc & board.X) !== 0 || (fc & board.O) !== 0); } else { moves = bestMove(true); fn = Math.floor(moves.length * Math.random()); fn = moves[fn]; fc = fieldCode[fn]; } board[comp] |= fc; // add mark at fc to the board drawMark(fn, true); // console.log('comp ' + comp + ' to ' + fn); // logBoard(board); wl = checkWin(false, board); if (wl !== false) { // console.log('Comp wins: ' + wl.toString(2)); gameOver(-1, wl); } else if (countOccupiedFields(board) === 9) { gameOver(0); } } // memoization of best moves // memo[p1][p2] stores {-1,0,1} outcome of a game which has board positions p1 and p2 after p1's move. memo = new Array(512); // 512 = 2^9, number of possible board positions. for (i = 0; i < 512; i += 1) { memo[i] = []; // up to 512, but will be sparse most of the time } function bestMove(computer) { // whether or not a move will lead to victory: // 1: win, 0: draw, -1: loose function winningMove(cmp, move, brd, iter) { // console.log('winningMove:', iter, cmp, move); var oppWin, i, fc, winning, p1, p2; // make a new instance, to keep original board intact brd = Object.create(brd); // add mark at "move" to the board if (cmp) { brd[comp] |= fieldCode[move]; p1 = brd[comp]; p2 = brd[player]; } else { brd[player] |= fieldCode[move]; p1 = brd[player]; p2 = brd[comp]; } if (typeof memo[p1][p2] !== 'undefined') { winning = memo[p1][p2]; } else { if (checkWin(!cmp, brd) !== false) { winning = 1; } else if (countOccupiedFields(brd) === 9) { winning = 0; } else { oppWin = -1; for (i = 0; oppWin !== 1 && i < 9; i += 1) { fc = fieldCode[i]; if ((fc & brd.X) === 0 && (fc & brd.O) === 0) { oppWin = Math.max(oppWin, winningMove(!cmp, i, brd, iter + 1)); } } winning = -oppWin; } memo[p1][p2] = winning; } // console.log('winningMove:', iter, cmp, move, winning); // logBoard(brd.__proto__); return winning; } var i, fc, win = -10, w, moves; for (i = 0; i < 9; i += 1) { fc = fieldCode[i]; if ((fc & board.X) === 0 && (fc & board.O) === 0) { w = winningMove(computer, i, board, 0); if (w > win) { win = w; moves = [i]; } else if (w === win) { moves.push(i); } } } return moves; } function giveHint() { var hintedMoves, jQList, hintedDOMs, bgFlash = '#f0f', i; function anim(times) { if (times % 2 === 0) { hintedDOMs.css('background-color', 'transparent'); } else { hintedDOMs.css('background-color', bgFlash); } if (times > 0) { setTimeout(anim, 500, times - 1); } } if (countOccupiedFields(board) < 9) { hintedMoves = bestMove(false); jQList = ''; for (i = 0; i < hintedMoves.length - 1; i += 1) { jQList += '#f' + hintedMoves[i] + ','; } jQList += '#f' + hintedMoves[i]; hintedDOMs = $(jQList); anim(5); } } function bitCount(num) { return num.toString(2).split('').reduce(function (p, c) { return p += +c; }, 0); } function countOccupiedFields(brd) { if (typeof brd === 'number') { return bitCount(brd); } else { return bitCount(brd.X) + bitCount(brd.O); } } // returns winning line or false // "pl" = true for player, false for comp function checkWin(pl, brd) { brd = (pl ? brd[player] : brd[comp]); var i, l; for (i = 0; i < winLine.length; i += 1) { l = winLine[i]; if ((brd & l) === l) { return l; } } return false; } function gameOver(pWin, line) { var i; if (pWin === 0) { $('#panel-game-over').text('Draw!'); } else { for (i = 0; i < 9; i += 1) { if ((fieldCode[i] & line) !== 0) { $('#f' + i).css('background-color', '#0f0'); } } $('#panel-game-over').text('You ' + (pWin === 1 ? 'win' : 'lose') + '!'); } $('#panel-game-over').show(); i = 0; $('.field').fadeOut(3000, function () { i += 1; if (i === 9) { restart(); $('.field').show(); $('#panel-game-over').hide(); } }); } function logBoard(brd) { var str = '', fn, fc; for (fn = 0; fn < 9; fn += 1) { if (fn > 0 && fn % 3 === 0) { str += '\n'; } fc = fieldCode[fn]; if ((brd.X & fc) !== 0) { str += 'X'; } else if ((brd.O & fc) !== 0) { str += 'O'; } else { str += '-'; } } console.log(str); }
});
Tic Tac Toe - Script Codes
Tic Tac Toe - Script Codes
Home Page Home
Developer Anton Babkin
Username antonbabkin
Uploaded August 24, 2022
Rating 3
Size 4,671 Kb
Views 32,384
Do you need developer help for Tic Tac Toe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Babkin (antonbabkin) Script Codes
Name
Local Weather
JavaScript Calculator
Random Quote Machine
A Pen by Anton Babkin
Anton Babkin - Personal portfolio
Tribute page - Bob Marley
Pomodoro Timer
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!