/    Sign up×
Community /Pin to ProfileBookmark

a simple game

i have been trying to make a simple game.i have managed to code the way i want the game to be played.i think every one know what this game is asap you see the codes.but problem is i cant find how to declare winner .the way i want to do it is not working.please help

[code=html]<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style>
#shape{
border:1px solid black;
width:200px;
height:200px;
}
td{
border:1px solid black;
}
</style>

</head>

<body>
<table id=”shape”>
<tr >
<td onClick=”add(this.id,0,0);” id=”td1″></td>
<td onClick=”add(this.id,0,1);” id=”td2″></td>
<td onClick=”add(this.id,0,2);” id=”td3″ 3</td>
</tr>
<tr >
<td onClick=”add(this.id,1,0);” id=”td4″ ></td>
<td onClick=”add(this.id,1,1);” id=”td5″></td>
<td onClick=”add(this.id,1,2);” id=”td6″></td>
</tr>
<tr >
<td onClick=”add(this.id,2,0);” id=”td7″ ></td>
<td onClick=”add(this.id,2,1);” id=”td8″></td>
<td onClick=”add(this.id,2,2);” id=”td9″></td>
</tr>
</table>
<script>

var arr =new Array(3)
for (i=0; i <3; i++){
arr[i]=new Array(3)
}
</script>
<script>
var i=0;
function add(el,r,c){
var m=document.getElementById(el);
i++;
if(i%2==1){
m.innerHTML=”o”;
arr[r][c]=m.innerHTML;

}
if((arr[0][0]==arr[0][1]==arr[0][2]==”o”) || (arr[0][0]==arr[1][0]==arr[2][0]==”o”)){
alert(“player 1 wins”);
}
if(i%2==0){
m.innerHTML=”x”;
arr[r][c]=m.innerHTML;
}

}

</script>
</body>
</html>
[/code]

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERDec 06.2013 — A simple google search with 'javascript tic tac toe code'

will render this solution: http://www.javascriptkit.com/script/script2/tactoe.shtml

There are many other ways to skin this cat.

Here is a modification to your code using only a single array.

You can add the 'draw' logic easy enough.
<i>
</i>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Tic-Tac-Toe Game&lt;/title&gt;

&lt;style&gt;
th { border:1px solid black; height:75px; width:75px; font-size:2.5em; }
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;table id="shape" border="1"&gt;
&lt;tr&gt;
&lt;th onClick="setXO(0,0);" id="t0"&gt;&lt;/th&gt;
&lt;th onClick="setXO(0,1);" id="t1"&gt;&lt;/th&gt;
&lt;th onClick="setXO(0,2);" id="t2"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th onClick="setXO(1,0);" id="t3"&gt;&lt;/th&gt;
&lt;th onClick="setXO(1,1);" id="t4"&gt;&lt;/th&gt;
&lt;th onClick="setXO(1,2);" id="t5"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th onClick="setXO(2,0);" id="t6"&gt;&lt;/th&gt;
&lt;th onClick="setXO(2,1);" id="t7"&gt;&lt;/th&gt;
&lt;th onClick="setXO(2,2);" id="t8"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;script&gt;

var arr = ['','','', '','','', '','',''];
var player=0;

function setXO(r,c){
var el;
player++;
var p = r*3+c;
if (player % 2 == 1) { arr[p] = 'O'; } else { arr[p] = 'X'; }
for (var p=0; p&lt;9; p++) {
el = 't'+p; document.getElementById(el).innerHTML = arr[p];
}
if (checkWinner('O')) { alert('O wins'); };
if (checkWinner('X')) { alert('X wins'); };
}
function checkWinner(XO) {
var flag = false;
// across
if ( (arr[0] == XO) &amp;&amp; (arr[0] == arr[1]) &amp;&amp; (arr[1] == arr[2]) ) { flag = true; }
if ( (arr[3] == XO) &amp;&amp; (arr[3] == arr[4]) &amp;&amp; (arr[4] == arr[5]) ) { flag = true; }
if ( (arr[6] == XO) &amp;&amp; (arr[6] == arr[7]) &amp;&amp; (arr[7] == arr[8]) ) { flag = true; }
// down
if ( (arr[0] == XO) &amp;&amp; (arr[0] == arr[3]) &amp;&amp; (arr[3] == arr[6]) ) { flag = true; }
if ( (arr[1] == XO) &amp;&amp; (arr[1] == arr[4]) &amp;&amp; (arr[4] == arr[7]) ) { flag = true; }
if ( (arr[2] == XO) &amp;&amp; (arr[2] == arr[5]) &amp;&amp; (arr[5] == arr[8]) ) { flag = true; }
// diagonal <br/>
if ( (arr[0] == XO) &amp;&amp; (arr[0] == arr[4]) &amp;&amp; (arr[4] == arr[8]) ) { flag = true; }
if ( (arr[2] == XO) &amp;&amp; (arr[2] == arr[4]) &amp;&amp; (arr[4] == arr[6]) ) { flag = true; }
return flag;
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@JMRKERDec 06.2013 — Some additional considerations for your game:

  • 1. Stop user from clicking on already selected cell.


  • 2. Tell user when game is over is they continue to click cells.


  • 3. Stop game when a winner has been found.


  • 4. Restart game without browser 'refresh'.
  • ×

    Success!

    Help @alzami spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...