Skip to main content
Code Review

Return to Question

added 5 characters in body; edited tags; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Tic Tac Toe game made using JQueryjQuery and JavaScript

I have created a simple Tic Tac Toe game using JavaScript and using jQuery. I have used bootstrap for the UI. I am just a beginner, so some feedback on the JavaScript element would be great.

Tic Tac Toe game made using JQuery and JavaScript

I have created a simple Tic Tac Toe game using JavaScript and using jQuery. I have used bootstrap for the UI. I am just a beginner so some feedback on JavaScript element would be great.

Tic Tac Toe game made using jQuery and JavaScript

I have created a simple Tic Tac Toe game using JavaScript and using jQuery. I have used bootstrap for the UI. I am just a beginner, so some feedback on the JavaScript element would be great.

deleted 2 characters in body; edited title
Source Link
SirPython
  • 13.4k
  • 3
  • 38
  • 93

Tick Tack Tic Tac Toe game made using JQuery and JavaScript

I have created a simple Tick TackTic Tac Toe game using JavaScript and using jQuery. I have used bootstrap for the UI. I am just a beginner so some feedback on JavaScript element would be great.

Tick Tack Toe game made using JQuery and JavaScript

I have created a simple Tick Tack Toe game using JavaScript and using jQuery. I have used bootstrap for the UI. I am just a beginner so some feedback on JavaScript element would be great.

Tic Tac Toe game made using JQuery and JavaScript

I have created a simple Tic Tac Toe game using JavaScript and using jQuery. I have used bootstrap for the UI. I am just a beginner so some feedback on JavaScript element would be great.

Tweeted twitter.com/StackCodeReview/status/754458545236639744
added 942 characters in body; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Tick tackTack Toe game made using JQuery and JavaScript

I have created a simple tick tack toeTick Tack Toe game using JavaScript and using JQueryjQuery. I have used bootstrap for the UI,. I am just a beginner so some feedback on JavaScript element would be great.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="stylesheet" href="styling.css" />
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script src="logic.js"></script>
 <title>Tic tack toe</title>
</head>
<body>
 <div class="container-fluid">
 <h1 class="centeredText">Tick Tack Toe</h1>
 <h3 class="centeredText status">Player 1 Turn</h3>
 <div class="board">
 <div class="row">
 <!-- Start of Row 1 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="0">
 <p class="contentOfWell centeredText">A</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="1">
 <p class="contentOfWell centeredText">B</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="2">
 <p class="contentOfWell centeredText">C</p>
 </div>
 </div>
 <!-- End of Row 1 -->
 <!-- Start of Row 2 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="3">
 <p class="contentOfWell centeredText">E</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="4">
 <p class="contentOfWell centeredText">F</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="5">
 <p class="contentOfWell centeredText">G</p>
 </div>
 </div>
 <!-- End of Row 2 -->
 <!-- Start of Row 3 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="6">
 <p class="contentOfWell centeredText">H</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="7">
 <p class="contentOfWell centeredText">I</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="8">
 <p class="contentOfWell centeredText">J</p>
 </div>
 </div>
 <!-- End of Row 3 -->
 </div>
 </div>
 </div>
</body>

JavaScript

$(document).ready(function(){
 // true = player 1
 // false = player 2
 var pressedIndex;
 var pressedElement;
 var status = $('.centeredText').filter('.status');
 $('.well').on('click',function(){
 pressedElement = $(this);
 pressedIndex = pressedElement.data('index');
 //Check if the game is in progress
 if(isWinner() === false){
 //Check if the move is legal
 if(isMoveValid(pressedIndex)){
 // Add the marker (O/X) to UL and array
 var marker = addMarkerToBoard(pressedIndex);
 pressedElement.find('.contentOfWell').text(marker);
 // Next player turn
 nextPlayerTurn();
 if(turn){
 status.text("Player 1 - X Turn")
 } else {
 status.text("Player 2 - O Turn");
 }
 } else {
 status.text("Invalid Move!");
 }
 } else {
 status.text("Game over");
 }
 });
 });
var turn = true;
var board = [];
var messageToUser;
function nextPlayerTurn(){
 if(turn){
 turn = false;
 } else {
 turn = true;
 }
 return turn;
}
function addMarkerToBoard(index){
 // true - player 1 is a X
 // false - player 2 is a O
 if(turn){
 board[index] = "X";
 return "X";
 } else {
 board[index] = "O";
 return "O";
 }
}
function isWinner(){
 // X | X | X
 // X | X | X
 // x | X | X
 var top = board[0];
 var middle = board[3];
 var bottom = board[6];
 var winner = false;
 //Not good code since at the start the array indexes are all undefined so it will return true.
 // Fixed by not allowing some spaces to be undefined
 //1. Horizontal Rows
 if(board[1] === top && board[2] === top && top != undefined){
 winner = true;
 } else if (board[4] === middle && board[5] === middle && middle != undefined){
 winner = true;
 } else if(board[7] === bottom && board[8] === bottom && bottom != undefined){
 winnder = true;
 //2. Vertical Rows
 } else if(board[3] === top && board[6] === top && top != undefined){
 winner = true;
 } else if(board[4] === board[1] && board[7] === board[1] && board[1] != undefined){
 winner = true;
 } else if(board[5] === board[2] && board[8] === board[2] && board[2]){
 winner = true;
 //3. Across
} else if(board[4] === top && board[8] === top && top != undefined){
 winner = true;
 } else if(board[4] === board[2] && board[6] === board[2] && board[2] != undefined){
 winner = true;
 } else {
 winner = false;
 }
 return winner;
}
function isGameOver(){
}
function isMoveValid(index){
 // So space is not take
 if(board[index] === undefined){
 return true;
 } else {
 return false;
 }
}

CSS

.centeredText{
 text-align:center;
 padding:0;
 margin:0;
}
.board{
 padding:1%;
}
.takeFullSize{
 display: block;
 width:100%;
 height:10%;
}


$(document).ready(function(){
 // true = player 1
 // false = player 2
 var pressedIndex;
 var pressedElement;
 var status = $('.centeredText').filter('.status');
 $('.well').on('click',function(){
 pressedElement = $(this);
 pressedIndex = pressedElement.data('index');
 //Check if the game is in progress
 if(isWinner() === false){
 //Check if the move is legal
 if(isMoveValid(pressedIndex)){
 // Add the marker (O/X) to UL and array
 var marker = addMarkerToBoard(pressedIndex);
 pressedElement.find('.contentOfWell').text(marker);
 // Next player turn
 nextPlayerTurn();
 if(turn){
 status.text("Player 1 - X Turn")
 } else {
 status.text("Player 2 - O Turn");
 }
 } else {
 status.text("Invalid Move!");
 }
 } else {
 status.text("Game over");
 }
 });
 });
var turn = true;
var board = [];
var messageToUser;
function nextPlayerTurn(){
 if(turn){
 turn = false;
 } else {
 turn = true;
 }
 return turn;
}
function addMarkerToBoard(index){
 // true - player 1 is a X
 // false - player 2 is a O
 if(turn){
 board[index] = "X";
 return "X";
 } else {
 board[index] = "O";
 return "O";
 }
}
function isWinner(){
 // X | X | X
 // X | X | X
 // x | X | X
 var top = board[0];
 var middle = board[3];
 var bottom = board[6];
 var winner = false;
 //Not good code since at the start the array indexes are all undefined so it will return true.
 // Fixed by not allowing some spaces to be undefined
 //1. Horizontal Rows
 if(board[1] === top && board[2] === top && top != undefined){
 winner = true;
 } else if (board[4] === middle && board[5] === middle && middle != undefined){
 winner = true;
 } else if(board[7] === bottom && board[8] === bottom && bottom != undefined){
 winnder = true;
 //2. Vertical Rows
 } else if(board[3] === top && board[6] === top && top != undefined){
 winner = true;
 } else if(board[4] === board[1] && board[7] === board[1] && board[1] != undefined){
 winner = true;
 } else if(board[5] === board[2] && board[8] === board[2] && board[2]){
 winner = true;
 //3. Across
} else if(board[4] === top && board[8] === top && top != undefined){
 winner = true;
 } else if(board[4] === board[2] && board[6] === board[2] && board[2] != undefined){
 winner = true;
 } else {
 winner = false;
 }
 return winner;
}
function isGameOver(){
}
function isMoveValid(index){
 // So space is not take
 if(board[index] === undefined){
 return true;
 } else {
 return false;
 }
}
.centeredText{
 text-align:center;
 padding:0;
 margin:0;
}
.board{
 padding:1%;
}
.takeFullSize{
 display: block;
 width:100%;
 height:10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="stylesheet" href="styling.css" />
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script src="logic.js"></script>
 <title>Tic tack toe</title>
</head>
<body>
 <div class="container-fluid">
 <h1 class="centeredText">Tick Tack Toe</h1>
 <h3 class="centeredText status">Player 1 Turn</h3>
 <div class="board">
 <div class="row">
 <!-- Start of Row 1 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="0">
 <p class="contentOfWell centeredText">A</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="1">
 <p class="contentOfWell centeredText">B</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="2">
 <p class="contentOfWell centeredText">C</p>
 </div>
 </div>
 <!-- End of Row 1 -->
 <!-- Start of Row 2 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="3">
 <p class="contentOfWell centeredText">E</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="4">
 <p class="contentOfWell centeredText">F</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="5">
 <p class="contentOfWell centeredText">G</p>
 </div>
 </div>
 <!-- End of Row 2 -->
 <!-- Start of Row 3 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="6">
 <p class="contentOfWell centeredText">H</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="7">
 <p class="contentOfWell centeredText">I</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="8">
 <p class="contentOfWell centeredText">J</p>
 </div>
 </div>
 <!-- End of Row 3 -->
 </div>
 </div>
 </div>
</body>

Tick tack Toe game made using JQuery and JavaScript

I have created a simple tick tack toe game using JavaScript and using JQuery. I have used bootstrap for the UI, I am just a beginner so some feedback on JavaScript element would be great.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="stylesheet" href="styling.css" />
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script src="logic.js"></script>
 <title>Tic tack toe</title>
</head>
<body>
 <div class="container-fluid">
 <h1 class="centeredText">Tick Tack Toe</h1>
 <h3 class="centeredText status">Player 1 Turn</h3>
 <div class="board">
 <div class="row">
 <!-- Start of Row 1 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="0">
 <p class="contentOfWell centeredText">A</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="1">
 <p class="contentOfWell centeredText">B</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="2">
 <p class="contentOfWell centeredText">C</p>
 </div>
 </div>
 <!-- End of Row 1 -->
 <!-- Start of Row 2 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="3">
 <p class="contentOfWell centeredText">E</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="4">
 <p class="contentOfWell centeredText">F</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="5">
 <p class="contentOfWell centeredText">G</p>
 </div>
 </div>
 <!-- End of Row 2 -->
 <!-- Start of Row 3 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="6">
 <p class="contentOfWell centeredText">H</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="7">
 <p class="contentOfWell centeredText">I</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="8">
 <p class="contentOfWell centeredText">J</p>
 </div>
 </div>
 <!-- End of Row 3 -->
 </div>
 </div>
 </div>
</body>

JavaScript

$(document).ready(function(){
 // true = player 1
 // false = player 2
 var pressedIndex;
 var pressedElement;
 var status = $('.centeredText').filter('.status');
 $('.well').on('click',function(){
 pressedElement = $(this);
 pressedIndex = pressedElement.data('index');
 //Check if the game is in progress
 if(isWinner() === false){
 //Check if the move is legal
 if(isMoveValid(pressedIndex)){
 // Add the marker (O/X) to UL and array
 var marker = addMarkerToBoard(pressedIndex);
 pressedElement.find('.contentOfWell').text(marker);
 // Next player turn
 nextPlayerTurn();
 if(turn){
 status.text("Player 1 - X Turn")
 } else {
 status.text("Player 2 - O Turn");
 }
 } else {
 status.text("Invalid Move!");
 }
 } else {
 status.text("Game over");
 }
 });
 });
var turn = true;
var board = [];
var messageToUser;
function nextPlayerTurn(){
 if(turn){
 turn = false;
 } else {
 turn = true;
 }
 return turn;
}
function addMarkerToBoard(index){
 // true - player 1 is a X
 // false - player 2 is a O
 if(turn){
 board[index] = "X";
 return "X";
 } else {
 board[index] = "O";
 return "O";
 }
}
function isWinner(){
 // X | X | X
 // X | X | X
 // x | X | X
 var top = board[0];
 var middle = board[3];
 var bottom = board[6];
 var winner = false;
 //Not good code since at the start the array indexes are all undefined so it will return true.
 // Fixed by not allowing some spaces to be undefined
 //1. Horizontal Rows
 if(board[1] === top && board[2] === top && top != undefined){
 winner = true;
 } else if (board[4] === middle && board[5] === middle && middle != undefined){
 winner = true;
 } else if(board[7] === bottom && board[8] === bottom && bottom != undefined){
 winnder = true;
 //2. Vertical Rows
 } else if(board[3] === top && board[6] === top && top != undefined){
 winner = true;
 } else if(board[4] === board[1] && board[7] === board[1] && board[1] != undefined){
 winner = true;
 } else if(board[5] === board[2] && board[8] === board[2] && board[2]){
 winner = true;
 //3. Across
} else if(board[4] === top && board[8] === top && top != undefined){
 winner = true;
 } else if(board[4] === board[2] && board[6] === board[2] && board[2] != undefined){
 winner = true;
 } else {
 winner = false;
 }
 return winner;
}
function isGameOver(){
}
function isMoveValid(index){
 // So space is not take
 if(board[index] === undefined){
 return true;
 } else {
 return false;
 }
}

CSS

.centeredText{
 text-align:center;
 padding:0;
 margin:0;
}
.board{
 padding:1%;
}
.takeFullSize{
 display: block;
 width:100%;
 height:10%;
}

Tick Tack Toe game made using JQuery and JavaScript

I have created a simple Tick Tack Toe game using JavaScript and using jQuery. I have used bootstrap for the UI. I am just a beginner so some feedback on JavaScript element would be great.

$(document).ready(function(){
 // true = player 1
 // false = player 2
 var pressedIndex;
 var pressedElement;
 var status = $('.centeredText').filter('.status');
 $('.well').on('click',function(){
 pressedElement = $(this);
 pressedIndex = pressedElement.data('index');
 //Check if the game is in progress
 if(isWinner() === false){
 //Check if the move is legal
 if(isMoveValid(pressedIndex)){
 // Add the marker (O/X) to UL and array
 var marker = addMarkerToBoard(pressedIndex);
 pressedElement.find('.contentOfWell').text(marker);
 // Next player turn
 nextPlayerTurn();
 if(turn){
 status.text("Player 1 - X Turn")
 } else {
 status.text("Player 2 - O Turn");
 }
 } else {
 status.text("Invalid Move!");
 }
 } else {
 status.text("Game over");
 }
 });
 });
var turn = true;
var board = [];
var messageToUser;
function nextPlayerTurn(){
 if(turn){
 turn = false;
 } else {
 turn = true;
 }
 return turn;
}
function addMarkerToBoard(index){
 // true - player 1 is a X
 // false - player 2 is a O
 if(turn){
 board[index] = "X";
 return "X";
 } else {
 board[index] = "O";
 return "O";
 }
}
function isWinner(){
 // X | X | X
 // X | X | X
 // x | X | X
 var top = board[0];
 var middle = board[3];
 var bottom = board[6];
 var winner = false;
 //Not good code since at the start the array indexes are all undefined so it will return true.
 // Fixed by not allowing some spaces to be undefined
 //1. Horizontal Rows
 if(board[1] === top && board[2] === top && top != undefined){
 winner = true;
 } else if (board[4] === middle && board[5] === middle && middle != undefined){
 winner = true;
 } else if(board[7] === bottom && board[8] === bottom && bottom != undefined){
 winnder = true;
 //2. Vertical Rows
 } else if(board[3] === top && board[6] === top && top != undefined){
 winner = true;
 } else if(board[4] === board[1] && board[7] === board[1] && board[1] != undefined){
 winner = true;
 } else if(board[5] === board[2] && board[8] === board[2] && board[2]){
 winner = true;
 //3. Across
} else if(board[4] === top && board[8] === top && top != undefined){
 winner = true;
 } else if(board[4] === board[2] && board[6] === board[2] && board[2] != undefined){
 winner = true;
 } else {
 winner = false;
 }
 return winner;
}
function isGameOver(){
}
function isMoveValid(index){
 // So space is not take
 if(board[index] === undefined){
 return true;
 } else {
 return false;
 }
}
.centeredText{
 text-align:center;
 padding:0;
 margin:0;
}
.board{
 padding:1%;
}
.takeFullSize{
 display: block;
 width:100%;
 height:10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="stylesheet" href="styling.css" />
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script src="logic.js"></script>
 <title>Tic tack toe</title>
</head>
<body>
 <div class="container-fluid">
 <h1 class="centeredText">Tick Tack Toe</h1>
 <h3 class="centeredText status">Player 1 Turn</h3>
 <div class="board">
 <div class="row">
 <!-- Start of Row 1 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="0">
 <p class="contentOfWell centeredText">A</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="1">
 <p class="contentOfWell centeredText">B</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="2">
 <p class="contentOfWell centeredText">C</p>
 </div>
 </div>
 <!-- End of Row 1 -->
 <!-- Start of Row 2 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="3">
 <p class="contentOfWell centeredText">E</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="4">
 <p class="contentOfWell centeredText">F</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="5">
 <p class="contentOfWell centeredText">G</p>
 </div>
 </div>
 <!-- End of Row 2 -->
 <!-- Start of Row 3 -->
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="6">
 <p class="contentOfWell centeredText">H</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="7">
 <p class="contentOfWell centeredText">I</p>
 </div>
 </div>
 <div class="col-xs-4 col-lg-4">
 <div class="well" data-index="8">
 <p class="contentOfWell centeredText">J</p>
 </div>
 </div>
 <!-- End of Row 3 -->
 </div>
 </div>
 </div>
</body>

edited tags
Link
Mast ♦
  • 13.8k
  • 12
  • 56
  • 127
Loading
Post Reopened by forsvarir, Community Bot, Mast ♦, Phrancis, Quill
Added code removed link
Source Link
dijam
  • 311
  • 1
  • 10
Loading
Post Closed as "Not suitable for this site" by Mathieu Guindon
Source Link
dijam
  • 311
  • 1
  • 10
Loading
default

AltStyle によって変換されたページ (->オリジナル) /