TicTacToe

Developer
Joost Jansen
Size
4,809 Kb
Views
22,264
  1. TicTacToe Previews
  2. TicTacToe HTML Codes
  3. TicTacToe CSS Codes
  4. TicTacToe JS Codes

How do I make an tictactoe?

What is a tictactoe? How do you make a tictactoe? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

TicTacToe Previews
IQ Test

TicTacToe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TicTacToe</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"> <h1>HTML/CSS/JS Tic Tac Toe</h1> <hr/><a id="btn-reset">Reset</a> <div class="gameboard"> <ul class="column"> <li class="tile"></li> <li class="tile"></li> <li class="tile"></li> </ul> <ul class="column"> <li class="tile"></li> <li class="tile"></li> <li class="tile"></li> </ul> <ul class="column"> <li class="tile"></li> <li class="tile"></li> <li class="tile"></li> </ul> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

TicTacToe - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
:root { font-size: 16px;
}
html, body { height: 100%; width: 100%;
}
body { background: -webkit-linear-gradient(right, #E55D87, #5FC3E4); background: linear-gradient(to left, #E55D87, #5FC3E4); color: white;
}
a { color: black;
}
hr { width: 20rem;
}
.wrapper { height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.wrapper h1, .wrapper #btn-reset { font-family: "Open Sans", sans-serif; font-weight: 300;
}
.wrapper #btn-reset { margin-top: 1rem; padding: 0.75rem; background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.4); border: 0; cursor: pointer; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
}
.wrapper #btn-reset:hover { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 27px 20px -15px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-10%); transform: translateY(-10%);
}
.wrapper .gameboard { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 1rem;
}
.wrapper .column { list-style: none; padding: 0; margin: 0;
}
.wrapper .column .tile { height: 1rem; width: 1rem; padding: 2rem; margin: 1.5rem 0.75rem; color: black; background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.4); text-transform: uppercase; text-align: center; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
}
.wrapper .column .tile:hover { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 27px 20px -15px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-10%); transform: translateY(-10%);
}

TicTacToe - Script Codes JS Codes

"use strict";
document.addEventListener("DOMContentLoaded", function () {	// set up elements	var columns = document.getElementsByClassName("columns"), tiles = document.getElementsByClassName("tile"), resetBtn = document.getElementById("btn-reset"), tilesArray = [].slice.call(tiles);	// counters	var playerTurn = undefined, moves = undefined, xTiles = undefined, oTiles = undefined;	// (re)initialize counters	function Init() {	// clickable tiles	playerTurn = 'X';	moves = 0;	xTiles = [];	oTiles = [];	for (var i = 0; i < tiles.length; i++) {	tiles[i].addEventListener("click", clickTile);	tiles[i].innerText = "";	}	// reset tiles	resetBtn.addEventListener("click", Init);	}	Init();	// click tile event handler	function clickTile() {	this.innerText = playerTurn;	moves++;	console.log(moves);	switch (playerTurn) {	// this == tiles[i]	case 'X':	xTiles.push(tilesArray.indexOf(this));	playerTurn = "O";	break;	case 'O':	oTiles.push(tilesArray.indexOf(this));	playerTurn = "X";	break;	}	// unclickable tile	this.removeEventListener("click", clickTile);	// phydos is a jerk <3	if (checkWin(xTiles)) {	alert("X wins!");	} else if (checkWin(oTiles)) {	alert("O wins!");	} else if (moves == 9 && !checkWin(xTiles) && !checkWin(oTiles)) {	alert("Tie!");	}	}	// check winning positions	function checkWin(checkTiles) {	// winning positions	var winCondition = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];	if (checkTiles.length >= 3) {	for (var i = 0; i < winCondition.length; i++) {	var match = 0;	for (var j = 0; j < winCondition[i].length; j++) {	if (checkTiles.indexOf(winCondition[i][j]) !== -1) {	match++;	}	if (match == 3) {	return true;	}	}	}	}	return false;	}
});
TicTacToe - Script Codes
TicTacToe - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 4,809 Kb
Views 22,264
Do you need developer help for TicTacToe?

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!

Joost Jansen (DevItWithDavid) Script Codes
Name
DevWars Objectives Template
React CSSTransitionGroup
Flexbox Layout - One page website
Perspective Flipbook
Star Wars Battlefront I 2016 Interface
Flexbox Mixin
Flexbox is AWESOME
Overwatch cards, three styles
React Close Dialog with Animation
Portfolio Joost Jansen 2016
Create amazing love letters 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!