omurbek
Reputation: 772
javascript Tic tac toe Game waiting user input
I was trying to implement tic tac toe game without AI. Somehow my click function triggers automatically. Can you help me to understand why click function triggers automatically. Here's the HTML code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tic Tac Toe Game</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container text-center bg-grey">
<div class="container-fluid text-center">
<h3 id="winner"></h3>
<div class="row">
<div class="col-md-4" id="a1"></div>
<div class="col-md-4" id="a2"></div>
<div class="col-md-4" id="a3"></div>
</div>
<div class="row">
<div class="col-md-4" id="a4"></div>
<div class="col-md-4" id="a5"></div>
<div class="col-md-4" id="a6"></div>
</div>
<div class="row">
<div class="col-md-4" id="a7"></div>
<div class="col-md-4" id="a8"></div>
<div class="col-md-4" id="a9"></div>
</div>
</div>
<div class="container-fluid">
<div class="row foot">
<div class="col-md-6">
<img onclick="users(1)" src="computer.png" alt="Computer Image">
</div>
<div class="col-md-6">
<img onclick="users(2)"
src="human.png" alt="Human Image">
</div>
</div>
</div>
</div>
<script>
var player = "human";
var game = false;
var used = new Array(10);
var mat = new Array(10);
var humansTurn = false;
var GameAvailable = false;
var totalMoves = 0;
$('#a1').click(mark("1", 5));
$('#a2').click(mark("2", 5));
$('#a3').click(mark("3", 5));
$('#a4').click(mark("4", 5));
$('#a5').click(mark("5", 5));
$('#a6').click(mark("6", 5));
$('#a7').click(mark("7", 5));
$('#a8').click(mark("8", 5));
$('#a9').click(mark("9", 5));
function users(who) // initialize everything
{
for (var i = 1; i <= 9; i++) {
used[i] = false;
mat[i] = 0;
}
GameAvailable = true;
humansTurn=false;
player = "human";
if (who == 1) {
player = "computer";
// compChoice();
}
else {
humansTurn = true;
}
playGame(player);
}
function resetAll() {
var bb = "#a";
game = false;
totalMoves = 0;
humansTurn = false;
for (var i = 1; i <= 9; i++) {
used[i] = false;
mat[i] = 0;
$(bb + i).empty();
}
$("#winner").empty();
}
// MARK USERS CHOICE
function mark(ind, abc) {
console.log(" you clicked: " + ind + " " + abc);
if (used[ind] === false && humansTurn === true) // users choice
{
totalMoves++; // increase moves
mat[ind] = abc; // mark players choice
used[ind] = true;
var id = "#a" + ind;
var imgtag;
imgtag = "<img src='ob.png'>";
$(id).prepend(imgtag);
humansTurn = false;
}
else {
alert(" It is not your turn !!!");
console.log(ind + " occuppied or not your turn " + ind);
}
}
function markComputer(ind, abc) {
console.log(" computer moved: " + ind + " " + abc);
if (used[ind] === false && humansTurn === false) // comp choice
{
totalMoves++; // increase moves
mat[ind] = abc; // mark comp choice
used[ind] = true;
var id = "#a" + ind;
var imgtag;
imgtag = "<img src='xb.png'>";
$(id).prepend(imgtag);
}
else {
alert(" It is not computers turn !!!");
}
}
function compChoice() {
if (humansTurn == false) {
var index;
while (true) {
index = Math.floor((Math.random() * 9) + 1);
if (used[index] === false) // random choice for computer
{
console.log(" computers index: " + index);
break;
}
}
markComputer(index, 1);
humansTurn = true;
}
else{
alert("Computer get crazy , extra move applied");
}
}
function playGame(player)
{
if(player=="computer")
{
compChoice(); // comp moves first
}
}
function et() {
var win = checkWinner();
// 0 for human
// 1 for computer
// 2 for draw
// 3 no winners yet
if (win === 0) // checks winner
{
$("#winner").html("You Win!");
}
else if (win === 1) {
$("#winner").html("You Lose!");
}
else if (win === 1) {
$("#winner").html("Draw!");
// resetAll();
}
}
function checkWinner() {
var lt = 15;
if (mat[1] + mat[2] + mat[3] === 15 ||
mat[1] + mat[5] + mat[9] === 15 ||
mat[1] + mat[4] + mat[7] === 15 ||
mat[7] + mat[8] + mat[9] === 15 ||
mat[3] + mat[5] + mat[7] === 15 ||
mat[3] + mat[6] + mat[9] === 15 ||
mat[4] + mat[5] + mat[6] === 15 ||
mat[2] + mat[5] + mat[8] === 15) {
return 0; // human
}
else if (mat[1] + mat[2] + mat[3] === 3 ||
mat[1] + mat[5] + mat[9] === 3 ||
mat[1] + mat[4] + mat[7] === 3 ||
mat[7] + mat[8] + mat[9] === 3 ||
mat[3] + mat[5] + mat[7] === 3 ||
mat[3] + mat[6] + mat[9] === 3 ||
mat[4] + mat[5] + mat[6] === 3 ||
mat[2] + mat[5] + mat[8] === 3) {
return 1; // for computer
}
else if (counter !== 9) { // not finished
return 3;
}
else {
return 2; // it is a draw
}
}
</script>
</body>
</html>
And the css stylesheet
.container{
margin: 50px;
border: 3px solid #398439;
}
.row>.col-md-4{
text-align: center;
margin: 20px;
padding: 10px;
border: 2px solid #761c19;
height: 80px;
width: 80px;
}
.foot{
border: 3px solid #398439;
}
img{
width: 48px;
height: 48px;
}
.row{
width: 400px;
border: 3px solid #398439;
margin: 10px 30% 20px 30%;
}
Upvotes: 0
Views: 402
Answers (1)
Martin Ackermann
Reputation: 924
you calling this function explicit:
$('#a1').click(mark("1", 5));
since your function "mark" does return nothing you
- Calling the $('...').click();
- executing the method "mark"
You may want to change your function mark to return a function, which then will be used as click handler:
function mark(ind, abc) {
return function(clickEvent) {
console.log(" you clicked: " + ind + " " + abc);
if (used[ind] === false && humansTurn === true) // users choice
{
totalMoves++; // increase moves
mat[ind] = abc; // mark players choice
used[ind] = true;
var id = "#a" + ind;
var imgtag;
imgtag = "<img src='ob.png'>";
$(id).prepend(imgtag);
humansTurn = false;
}
else {
alert(" It is not your turn !!!");
console.log(ind + " occuppied or not your turn " + ind);
}
}
}
To be more precise: the "click" function expects a function as parameter, but you hand over the result of a function call as parameter.
Reference: https://api.jquery.com/click/
Upvotes: 2