Tic Tac Toe Game

In this example below you will see how to do a Tic Tac Toe Game with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by imcvampire, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright imcvampire ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/sweetalert2/2.2.7/sweetalert2.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
	<div class="row">
			<button class="game btn btn-default col-xs-2 col-xs-offset-3" id="1"></button>
			<button class="game btn btn-default col-xs-2" id="2"></button>	
			<button class="game btn btn-default col-xs-2" id="3"></button>	
			<button class="game btn btn-default col-xs-2 col-xs-offset-3" id="4"></button> 
			<button class="game btn btn-default col-xs-2" id="5"></button>
			<button class="game btn btn-default col-xs-2" id="6"></button>
			<button class="game btn btn-default col-xs-2 col-xs-offset-3" id="7"></button>
			<button class="game btn btn-default col-xs-2" id="8"></button>
			<button class="game btn btn-default col-xs-2" id="9"></button>
	</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/sweetalert2/2.2.7/sweetalert2.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/imcvampire/tic-tac-toe-game-BKMjBr */
.game {
	height: 130px;
	font-size: 5em;
}

.clickable{
  pointer-events : auto;
  cursor:pointer;
}

.unclickable{
  pointer-events:none;
}

/*Downloaded from https://www.codeseek.co/imcvampire/tic-tac-toe-game-BKMjBr */
var slide = 1; // slide == 1: nguoi X di truoc

swal({
	title: '<i>Choose silde</i>',
	type: 'info',
	html: 'Choose your silde:',
	showCloseButton: true,
	showCancelButton: true,
	confirmButtonText: 'X',
	cancelButtonText: 'O'
}).then(function(val) {
	if (val)
		slide = 1;
	else {
		slide = 0;
		$('#' + Math.floor(Math.random() * 9 + 1)).html('X');
	}
})

$('.game').click(function() {
	if ($(this).html() != '')
		return false;

	$(this).html(slide ? 'X' : 'O');

	if (check()) {
		var pos;
		do {
			pos = Math.floor(Math.random() * 9 + 1);
		} while ($('#' + pos).html() != '');

		$('#' + pos).html(!slide ? 'X' : 'O');
	}

	check();

})

function check() {
	if ($('#1').html() == $('#2').html() && $('#2').html() == $('#3').html() && $('#1').html() != '') {
		winGame($('#1').html())
	} else if ($('#4').html() == $('#5').html() && $('#5').html() == $('#6').html() && $('#4').html() != '') {
		winGame($('#4').html())
	} else if ($('#7').html() == $('#8').html() & $('#8').html() == $('#9').html() && $('#7').html() != '') {
		winGame($('#7').html())
	} else if ($('#1').html() == $('#4').html() && $('#4').html() == $('#7').html() && $('#1').html() != '') {
		winGame($('#1').html())
	} else if ($('#2').html() == $('#5').html() && $('#5').html() == $('#8').html() && $('#2').html() != '') {
		winGame($('#2').html())
	} else if ($('#3').html() == $('#6').html() && $('#6').html() == $('#9').html() && $('#3').html() != '') {
		winGame($('#3').html())
	} else if ($('#1').html() == $('#5').html() && $('#5').html() == $('#9').html() && $('#1').html() != '') {
		winGame($('#1').html())
	} else if ($('#3').html() == $('#5').html() && $('#5').html() == $('#7').html() && $('#3').html() != '') {
		winGame($('#3').html())
	} else {
		var count = 9;
		for (var i = 1; i <= 9; ++i) {
			if ($('#' + i).html() != '')
				--count;
		}

		if (count < 1) {
			tieGame();
			return false;
		}

		return true;
	}

	return false;
}

function tieGame() {
	swal({
		title: '<i>TIE</i>',
		type: 'info',
		showCloseButton: false,
		showCancelButton: true,
		confirmButtonText: 'Play again',
		cancelButtonText: 'Quit'
	}).then(function(val) {
		if (val)
			location.reload();
		else {
			window.top.close();
		}
	})
}

function winGame(winner) {
	swal({
		title: '<i>We have winner</i>',
		type: 'info',
		html: winner + ' has win!!!',
		showCloseButton: false,
		showCancelButton: true,
		confirmButtonText: 'Play again',
		cancelButtonText: 'Quit'
	}).then(function(val) {
		if (val)
			$('.game').html('')
		else {
			window.top.close();
		}
	})
}

Comments