I am trying to make a Tic-Tac-Toe with Javascript.
I used a method to compare the current input with the winning combination.
1)How to determine player 1 and player 2 input ?
2)i can compare 3 , but i can't figure out the 4th click for each player.
Kindly Advise.
var check = [[0,0,0],[0,0,0]]; //check[0] for player 1 , check[1] for player 2 , but i can't figure out how to increase the counter for each player on each click.
function playercol(ideal) //main
{
var idname = "box"+idval;
var currentcount = (playercount%2);
if( currentcount == 0 )
{
document.getElementById(idname).innerHTML="O";
}
else
{
document.getElementById(idname).innerHTML="X";
}
document.getElementById("player").innerHTML="Player "+((playercount%2)+1);
checkwin(check,0);//to check //0 is the current player index
playercount++;
}
My Fiddle
http://jsfiddle.net/1br5LLrj/3/
I tried to modify your code as little as possible http://jsfiddle.net/rrj24ze9/1
The essential part is the win check:
You don't need to remember what the player has clicked and compare that to a winning combo. Instead, iterate through the winning combinations and check if one of them contains only fields that are taken by the player.
var winning = [
[1, 2, 3], [4, 5, 6], [7, 8, 9],
[1, 4, 7], [2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
];
function checkwin(player) {
for (var i = 0; i < winning.length; i++) {
var combo = true;
for (var j = 0; j < 3; j++) {
if (document.getElementById('box' + winning[i][j]).innerHTML != markers[player]) {
combo = false;
}
}
if (combo) return true;
}
return false;
}
There is a lot of potential for improvement, like not using innerHTML (separation of data from view), or even preventing two clicks on the same field, but again, I tried to leave your code intact where possible.
Just made a tic tac toe in about 20 minutes from scratch for you.
JS Bin Here
Just alternating players right now... modify it to your own needs.
all win conditions will alert who winner is:
$(document).ready( function(){
function checkwin() {
if (
$('#a1').html() == "X" && $('#b1').html() == "X" && $('#c1').html() == "X" || $('#a2').html() == "X" && $('#b2').html() == "X" && $('#c2').html() == "X" || $('#a3').html() == "X" && $('#b3').html() == "X" && $('#c3').html() == "X" || $('#a1').html() == "X" && $('#a2').html() == "X" && $('#a3').html() == "X" || $('#b1').html() == "X" && $('#b2').html() == "X" && $('#b3').html() == "X" ||
$('#c1').html() == "X" && $('#c2').html() == "X" && $('#c3').html() == "X" ||
$('#a1').html() == "X" && $('#b2').html() == "X" && $('#c3').html() == "X" ||
$('#a3').html() == "X" && $('#b2').html() == "X" && $('#c1').html() == "X"
)
{
alert("winner is: X");
}
if (
$('#a1').html() == "O" && $('#b1').html() == "O" && $('#c1').html() == "O" || $('#a2').html() == "O" && $('#b2').html() == "O" && $('#c2').html() == "O" || $('#a3').html() == "O" && $('#b3').html() == "O" && $('#c3').html() == "O" || $('#a1').html() == "O" && $('#a2').html() == "O" && $('#a3').html() == "O" || $('#b1').html() == "O" && $('#b2').html() == "O" && $('#b3').html() == "O" ||
$('#c1').html() == "O" && $('#c2').html() == "O" && $('#c3').html() == "O" ||
$('#a1').html() == "O" && $('#b2').html() == "O" && $('#c3').html() == "O" ||
$('#a3').html() == "O" && $('#b2').html() == "O" && $('#c1').html() == "O"
)
{
alert("winner is: O");
}
}
var player = 1;
$('td').click(function(){
if(player == 1){
$(this).html("X").removeClass('o').addClass('x');
checkwin();
player++;
}
else if (player == 2){
$(this).html("O").removeClass('x').addClass('o');
checkwin();
player--;
}
});
});
Dont forget to use Jquery Library!
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
Related
I'm making tic tac toe game and I'm facing issue. If user's input is not equals to X or O then it should print the message Enter correct signs but I have no idea what's wrong in my code. Only else if's block is not working properly.
here is code of that function :
let p1, p2, s1, s2;
function startGame() {
playAgain();
p1 = document.getElementById("p1").value;
p2 = document.getElementById("p2").value;
s1 = document.getElementById("s1").value;
s2 = document.getElementById("s2").value;
if (p1 == "" || p2 == "" || s1 == "" || s2 == "") {
alert("Enter the details.");
playAgain();
} else if (
s1 != "X" ||
s1 != "x" ||
s1 != "O" ||
s1 != "o" ||
s2 != "X" ||
s2 != "x" ||
s2 != "O" ||
s2 != "o"
) {
alert("Enter correct signs.");
playAgain();
} else {
alert("You can start the game." + p1 + s1 + p2 + s2);
isStarted = true;
}
}
Thank you :D
Try to "and" your conditions instead of "oring" them.
else if (
(s1 != "X" &&
s1 != "x" &&
s1 != "O" &&
s1 != "o") ||
(s2 != "X" &&
s2 != "x" &&
s2 != "O" &&
s2 != "o")
)
I personally would make use of every function to make it even shorter and less repetitive:
const validInputs = ["X", "x", "O", "o"]
else if (validInputs.every((item) => s1 !== item)
|| validInputs.every((item) => s2 !== item)) {
...
It seems line a logic error on the if statement, i tried this and it works properly
if (
s1 != "X" &&
s1 != "x" &&
s1 != "O" &&
s1 != "o" ||
s2 != "X" &&
s2 != "x" &&
s2 != "O" &&
s2 != "o"
) {
But you also need to validate that s1 isn't equal to s2 because the users can type something like s1='X', s2='x' and it would be valid
This is my first approach to programming and I'm trying to create a TicTacToe game.At the moment, I'm doing a function that checks if a winning play is happening, but I'm sure that there are better ways to do this that my actual code. Any suggestions?
This is what I have:
let boardGame = new Array(9)
let turn = 'x';
let winner;
let squares = document.getElementsByClassName('board') // this variable it is used in other functions that I'm not transcribing it.
let whoWins = (boardGame) =>{
if(boardGame[0] == 'x' && boardGame[1] == 'x' && boardGame[2]== 'x' || boardGame[3] == 'x' && boardGame[4] == 'x' && boardGame[5]== 'x' || boardGame[6] == 'x' && boardGame[7] == 'x' && boardGame[8]== 'x' || boardGame[0] == 'x' && boardGame[4] == 'x' && boardGame[8]== 'x' || boardGame[2] == 'x' && boardGame[4] == 'x' && boardGame[6]== 'x' || boardGame[0] == 'x' && boardGame[3] == 'x' && boardGame[6]== 'x' || boardGame[1] == 'x' && boardGame[4] == 'x' && boardGame[7]== 'x' || boardGame[2] == 'x' && boardGame[5] == 'x' && boardGame[8]== 'x'){
winner = 'x'
}
else if(boardGame[0] == 'o' && boardGame[1] == 'o' && boardGame[2]== 'o' || boardGame[3] == 'o' && boardGame[4] == 'o' && boardGame[5]== 'o' || boardGame[6] == 'o' && boardGame[7] == 'o' && boardGame[8]== 'o' || boardGame[0] == 'o' && boardGame[4] == 'o' && boardGame[8]== 'o' || boardGame[2] == 'o' && boardGame[4] == 'o' && boardGame[6]== 'o' || boardGame[0] == 'o' && boardGame[3] == 'o' && boardGame[6]== 'o' || boardGame[1] == 'o' && boardGame[4] == 'o' && boardGame[7]== 'o' || boardGame[2] == 'o' && boardGame[5] == 'o' && boardGame[8]== 'o'){
winner = 'o'
}
else{}
}
I came up with this function hoping it's not too difficult to approach with.
In case I can simplify it just let me know:)
let whoWins = (boardGame) => {
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8]
[2, 4, 6],
];
const winner = winningConditions.find(
(condition) =>
boardGame[condition[0]] === boardGame[condition[1]] &&
boardGame[condition[1]] === boardGame[condition[2]]
);
// if the game is not finished exit
if (winner === undefined) return;
winner = boardGame[winner[0]];
};
Grazie
I am trying to make tic tac toe on a website using javascript. That worked and now I'm trying to make a bot that, then you have 2 area's in a row. It needs to block you. But everytime it does block me, it won't do anything else afterwards, because it keeps looping into the error.
The t-numbers are the tile names, 0 means unoccupied,1 means for player 1, and 2 for player 2.
The t-numbers with a 1 behind it are just the tiles but they mustn't interfere with the functions (they are t-numbers too).
How do I fix this?
function tbot(){
while (turn == "player 2") {
if (t41 == 0 &&
(t01 == 1 && t81 == 1) ||
(t11 == 1 && t71 == 1) ||
(t21 == 1 && t61 == 1) ||
(t31 == 1 && t51 == 1)
) {t4()}
else {
var tiles = ['0', '1', '2', '3', '4', '5', '6', '7', '8'];
var tile = tiles[Math.floor(Math.random()*tiles.length)];
if (tile == '0' && t01 == 0) {t0()}
else if (tile == '1' && t11 == 0) {t1()}
else if (tile == '2' && t21 == 0) {t2()}
else if (tile == '3' && t31 == 0) {t3()}
else if (tile == '4' && t41 == 0) {t4()}
else if (tile == '5' && t51 == 0) {t5()}
else if (tile == '6' && t61 == 0) {t6()}
else if (tile == '7' && t71 == 0) {t7()}
else if (tile == '8' && t81 == 0) {t8()}
}
}
}
function update() {
if (t01 == 1 &&
((t11 == 1 && t21 == 1)||(t31 == 1 && t61 == 1))
||t41 == 1 &&
((t31 == 1 && t51 == 1)||(t11 == 1 && t71 == 1)||
(t01 == 1 && t81 == 1)||(t21 == 1 && t61 == 1))
||t81 == 1 &&
((t61 == 1 && t71 == 1)||(t21 == 1 && t51 == 1))
) {
twin = 1;
document.getElementById('turnshow').innerHTML = "Player 1 is the winner!";
document.getElementById('treset').style.backgroundColor = '#888';
} else if (t01 == 2 &&
((t11 == 2 && t21 == 2)||(t31 == 2 && t61 == 2))
||t41 == 2 &&
((t31 == 2 && t51 == 2)||(t11 == 2 && t71 == 2)||
(t01 == 2 && t81 == 2)||(t21 == 2 && t61 == 2))
||t81 == 2 &&
((t61 == 2 && t71 == 2)||(t21 == 2 && t51 == 2))
) {
twin = 1;
document.getElementById('turnshow').innerHTML = "Player 2 is the winner!";
document.getElementById('treset').style.backgroundColor = '#888';
} else {
if (bot == 1) {tbot();}
document.getElementById('turnshow').innerHTML = "It is " + turn + "'s turn!";
}
}
function t4() {
if (t41 == 0 && twin == 0) {
if (turn == "player 1") {
document.getElementById('t4').style.backgroundColor = p1;
turn = "player 2";
t41 = 1;
} else {
document.getElementById('t4').style.backgroundColor = p2;
turn = "player 1";
t41 = 2;
}
}
update();
}
The program never exit the while loop because condition (turn == "player 2") is always true.
If you're expecting t4() to change turn then I guess it doesn't do the job right. Check for (t41 == 0 && twin == 0), turn will never change if this condition is never been true.
I found what i did wrong. When I was checking if there are two area's selected in a row my code was:
if (t41 == 0 &&
(t01 == 1 && t81 == 1) ||
(t11 == 1 && t71 == 1) ||
(t21 == 1 && t61 == 1) ||
(t31 == 1 && t51 == 1)
)
But what that did: t41 and t01 and t81 or t11 and t71 or etc.
I just needed to add "()" around the options :/
if (t41 == 0 &&
((t01 == 1 && t81 == 1) ||
(t11 == 1 && t71 == 1) ||
(t21 == 1 && t61 == 1) ||
(t31 == 1 && t51 == 1))
)
I've just started to code in JS, so I'm trying some classical exercises.
Now I'm doing a simple tris game, but I have some problem with the victory check function that I posted here. Any ideas?
function controllo() {
var con = 0;
if (tab['usx'] == tab['uc'] == tab['udx'] == 'X' ||
tab['usx'] == tab['uc'] == tab['udx'] == 'O' ) //Orizzontali
con = 1;
else if (tab['csx'] == tab['cc'] == tab['cdx'] == 'X' ||
tab['csx'] == tab['cc'] == tab['cdx'] == 'O')
con = 1;
else if (tab['dsx'] == tab['dc'] == tab['ddx'] == 'X' ||
tab['dsx'] == tab['dc'] == tab['ddx'] == 'O')
con = 1;
else if (tab['usx'] == tab['cc'] == tab['ddx'] == "X" ||
tab['usx'] == tab['cc'] == tab['ddx'] == "O") //Diagonali
con = 1;
else if (tab['udx'] == tab['cc'] == tab['dsx'] == 'X' ||
tab['udx'] == tab['cc'] == tab['dsx'] == 'O')
con = 1;
else if (tab['udx'] == tab['cdx'] == tab['ddx'] == 'X' ||
tab['udx'] == tab['cdx'] == tab['ddx'] == 'O') //Verticali
con = 1;
else if (tab['uc'] == tab['cc'] == tab['dc'] == 'X' ||
tab['uc'] == tab['cc'] == tab['dc'] == 'O')
con = 1;
else if (tab['udx'] == tab['cdx'] == tab['ddx'] == 'X' ||
tab['udx'] == tab['cdx'] == tab['ddx'] == 'O')
con = 1;
return (con);
}
tab is a global array and con is a local flag. "X" and "O" mean the 2 different players. The problem is that all the conditions are always false.
See this implementation
In the first place you create a constant with the possible victories
var LINES = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
That you can use as in the implementation to count the X or O and if there are three it has won. The rest of the implementation I leave it to you. Is like this
Help me please, I'm trying to make a rule for the little game and there is the problem.
I'm creating winning combination and say if the cell && cell+1 && cell+2 == to 'X' then you win, but when between two "X"s presents "o" it also says that "X" wins. Why? Please see my code and the game example on link a the bottom.
this.rezult = function(){
this.arr2.forEach(function(arr, i, innerArr){
arr.forEach(function(val, j){
var wincomb = innerArr[i][j] && innerArr[i][j+1] && innerArr[i][j+2];
var wincomb2 = innerArr[i][j] && innerArr[i+1][j] && innerArr[i+2][j];
var wincomb3 = innerArr[i][j] && innerArr[i+1][j+1] && innerArr[i+2][j+2];
console.log(wincomb == "X" && innerArr[i][j] !== "o");
// console.log(innerArr);
// THE RULE
if(wincomb == "X"){
alert(' X wins!');
}
});
});
};
Link to JSFiddle
In JavaScript, the && operator has interesting behavior with non-boolean values.
If the left-side of && is "truthy", the result is the right-side.
If the left-side of && is "falsey", the result is the left-side.
All non-empty strings are "truthy".
So, consider these examples:
("A" && "B" && "C") === "C"
("" && "B" && "C") === ""
(0 && "B" && "C") === 0
("X" && "X" && "O") === "O"
("O" && "O" && "X") === "X"
By the looks of it, you're trying to check if all 3 values are equal. You shouldn't use && for that, you should use === for that.
At the risk of doing your homework for you ;) here's a good way to do this:
function areTheSame(a,b,c) {
return a === b && b === c;
}
var down = areTheSame(innerArr[i][j], innerArr[i][j+1], innerArr[i][j+2]);
var across = areTheSame(innerArr[i][j], innerArr[i+1][j], innerArr[i+2][j]);
var diagonal = areTheSame(innerArr[i][j], innerArr[i+1][j+1], innerArr[i+2][j+2]);
if (down || across || diagonal) {
var winner = innerArr[i][j];
alert( winner + " wins!");
}