Jump to content

a simple game

alzami

By alzami
in JavaScript

 Share

Recommended Posts

alzami Newbie

alzami

Posted
Posted

trying to make a game here.everyon know what this game is.filling couple of boxes .if can manage to put similar object in a row that player will win.i can manage to make the structure.but cant figure out how to declare winner i mean how can i decide that three table in a row is filled by same object?and if i click on a table a certain object appears for player one.but if player 2 click on the same table it changes.how to prevent that?you will understand what i am trying to say if you see my codes....

<!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);" id="td1"></td><td onClick="add(this.id);" id="td2"></td><td onClick="add(this.id);" id="td3" ></td></tr><tr ><td onClick="add(this.id);" id="td4" ></td><td onClick="add(this.id);" id="td5"></td><td onClick="add(this.id);" id="td6"></td></tr><tr ><td onClick="add(this.id);" id="td7" ></td><td onClick="add(this.id);" id="td8"></td><td onClick="add(this.id);" id="td9"></td></tr></table><script>var i=0;function add(el){	var m=document.getElementById(el);	i++;	if(i%2==1){		m.innerHTML="o";	}	if(i%2==0){		m.innerHTML="x";	}}</script></body></html>
Link to comment
Share on other sites
Guest Set

Guest Set

Posted
Posted

Ok for declaring a winner you would need to add values to the blocks, and set a certain cap for them to reach: exampl have the winning blocks all be 3 so the total addition would be 9 and have the other two blocks 1 and 2, that way they can't equal nine anyway but with 3 3s, using if..else you can tell it that if It = 9 send message "You win" and else that any number less than 9 is "you lose".I'm pretty sure you can figure how to add the values to it relatively easily, and as for your multiplayer option the best I can think of is ghost the 1st players table while it's 2nd players turn and vice versa for player 1Hope this helped

Link to comment
Share on other sites
alzami Newbie

alzami

Posted
  • Author
Posted (edited)

send number according to the number boxes

<td onClick="add(this.id,0,0);" id="td1"></td><td onClick="add(this.id,0,1);" id="td2"></td>

i managed to add values to array according to serial of boxes out there.but still cant declare winner .i have made a script which will look for three same value in a row.seems not working

<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"){		alert("player 1 wins");		}	if(i%2==0){		m.innerHTML="x";		arr[r][c]=m.innerHTML;	}	}</script>

and for searching winner i made this .but its not working,can't imagine why??i made it only to examine if it works or not .so i made for two types of serial containing same object.not working though

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");		}
Edited by alzami
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Try it like this:

 

 

if((arr[0][0]==arr[0][1]==arr[0][2]=="o") || (arr[0][0]==arr[1][0]==arr[2][0]=="o")){

 

You can also use your browser's debugger to see what the array is at any time. You can add console.log(arr) to your code and check your debugger's Console tab to see what the array looks like.

Link to comment
Share on other sites
alzami Newbie

alzami

Posted
  • Author
Posted (edited)

created this and works finally.but its a mess.any other way to make it nice and simple

<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]=="o" && arr[0][1]=="o" && arr[0][2]=="o") ||(arr[1][0]=="o" && arr[1][1]=="o" && arr[1][2]=="o")||(arr[2][0]=="o" && arr[2][1]=="o" && arr[2][2]=="o")||(arr[0][0]=="o" && arr[1][1]=="o" && arr[2][2]=="o")||(arr[0][0]=="o" && arr[1][0]=="o" && arr[2][0]=="o")|| (arr[0][1]=="o" && arr[1][1]=="o" && arr[2][1]=="o")||(arr[0][2]=="o" && arr[1][2]=="o" && arr[2][2]=="o")||(arr[0][2]=="o" && arr[1][1]=="o" && arr[2][0]=="o")){		alert("congratulations!!!!player 1 wins");		}		}		else if(i%2==0){		m.innerHTML="x";		arr[r][c]=m.innerHTML;		 if((arr[0][0]=="x" && arr[0][1]=="x" && arr[0][2]=="x") ||(arr[1][0]=="x" && arr[1][1]=="x" && arr[1][2]=="x")||(arr[2][0]=="x" && arr[2][1]=="x" && arr[2][2]=="x")||(arr[0][0]=="x" && arr[1][1]=="x" && arr[2][2]=="x")||(arr[0][0]=="x" && arr[1][0]=="x" && arr[2][0]=="x")|| (arr[0][1]=="x" && arr[1][1]=="x" && arr[2][1]=="x")||(arr[0][2]=="x" && arr[1][2]=="x" && arr[2][2]=="x")||(arr[0][2]=="x" && arr[1][1]=="x" && arr[2][0]=="x")){		alert("congratulations!!!!player2 wins");		}	}	}</script>
Edited by alzami
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted (edited) 
for (var i=0, i<3, i++){  if(arr[i][0]==arr[i][1]==arr[i][2]){alert(arr[i][0]+' wins');}  if(arr[0][i]==arr[1][i]==arr[2][i]){alert(arr[0][i]+' wins');}}if(arr[0][0]==arr[1][1]==arr[2][2])||(arr[0][2]==arr[1][1]==arr[2][0]){  alert(arr[1][1]+' wins');}
Edited by davej
Link to comment
Share on other sites
Hadien Member

Hadien

Posted
Posted (edited)

well you have the the 2d array thats one thing. with each block tracking 1 of 3 states (" ", "X", and "O"). you then need to track the current player's turn which isn't difficult, and make sure they can only add their symbol in empty blocks. and after the block is change check it's matches in the 4 directions. (I'm just stating the obvious here, but it helps when you try to code something to declare the requirements first)

var Player = ["X","O"];var Board = [  [" "," "," "],  [" "," "," "],  [" "," "," "]];var gameover = false;var turn = 0;function ticTacToe(y,x){    var value = Board[y][x];    //these 3 functions will be run through the Array.every function    // though I don't use the arguments properly, it will perform    // expected behavior and see if all elements in any of the 4 lines     // (horizontal, vertical, or 2 diagonals) match the added symbol    var horz = function (e, i, a) {return (value == a[y][i]);};    var vert = function (e, i, a) {return (value == a[i][x]);};    var diag = function (e, i, a) {return (y+x)%2!=1 && value == a[y==x ?i :2-i][i];};    //check for any matches    // if no matches here then theres no TicTacToe    // again, not using .every() "exactly" as it was intended    // but the code this way is very minimalistic    return Board.every(horz) || Board.every(vert) || Board.every(diag);}function mark(el, y,x){    //if the game is over,    // or if the players haven't had enough turns to possibly win,    // or if the tile selected already has a X/O    //    then do nothing and save on unnecessary checking.    if(gameover    || turn<4    || Board[y][x]!= " ")        return;    //set currentPlayer's symbol into block, and update    Board[y][x] = Player[turn%2];    el.innerHTML = Board[y][x];    //check for ticTacToe    if(ticTacToe(y,x)){        alert(Player[turn%2]+ " wins!");        gameover = true;    }    // otherwise go to next player's turn    turn++;}

and your table should look like this, no ID needed

<table>    <tr >        <td onClick="mark(this,0,0);"></td>        <td onClick="mark(this,0,1);"></td>        <td onClick="mark(this,0,2);"></td>    </tr>    <tr >        <td onClick="mark(this,1,0);"></td>        <td onClick="mark(this,1,1);"></td>        <td onClick="mark(this,1,2);"></td>    </tr>    <tr >        <td onClick="mark(this,2,0);"></td>        <td onClick="mark(this,2,1);"></td>        <td onClick="mark(this,2,2);"></td>    </tr></table>
Edited by Hadien
  • Like 1
Link to comment
Share on other sites
Guest Set

Guest Set

Posted
Posted

"If...else"have it echo once your winning number has been met, you can read about it in php it's simple, arnt all these languages capable if functioning together so give it a try

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

"If...else"have it echo once your winning number has been met, you can read about it in php it's simple, arnt all these languages capable if functioning together so give it a try

I don't see where PHP comes into this...

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

Well you could "tag" a if...else file into js that when his player wins it could display "you win" or if the player loses "you lose"

 

Javascript would do that. Php would provide the communication link between the two clients but it probably wouldn't get involved in the game itself.

Link to comment
Share on other sites
alzami Newbie

alzami

Posted
  • Author
Posted (edited)

thanks for all your kind help guys.

i've not learned php yet.hope i will soon.

i have a question .can i change the title of this post? i want if any new learner like me doing the same might get a lot of help as well as a lot to learn from this post if he/she searched google.so if title change is possible i would like to know the name of the game in english so that i can replace the title with this name

 

and again thanks for all your kind support and help...

 

i have tried my best to make it as dynamic ###### possible.here is my finished product....

<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>*{	margin:0px;	padding:0px;}#shape{	border:1px solid black;	width:200px;	height:200px;	position:absolute;	left:5px;}td{	border:1px solid black;	background-color:orange;}#lol{	border:1px solid green;height:100px;width:300px;	background-color:background: #a9db80;background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f));background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%);background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%);background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%);background: linear-gradient(to bottom, #a9db80 0%,#96c56f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );border-radius:5px;display:none;position:absolute;top:200px;left:400px;z-index:5000;font-size:30px;color:green;	}#whole{	background-image:url('black.png');	opacity:.8;	z-index:1000;	height:800px;;	width:100%;	position:absolute;	top:0px;	display:none;		}#playButton{	position:absolute;	top:250px;	z-index:2400;	width:125px;	height:40px;	border-radius:6px;	background-color:background: #f85032;background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );color:pink;font-size:20px;}.tableShape{	width:33%;	height:33%;	font-size:30px;	text-align:center;	color:red;}#playBtn{	position:absolute;	top:250px;	left:200px;	z-index:2400;	width:215px;	height:40px;	border-radius:6px;	background-color:background: #b8e1fc;background: -moz-linear-gradient(top,  #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd));background: -webkit-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);background: -o-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);background: -ms-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);background: linear-gradient(to bottom,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 );color:blue;font-size:20px;text-align:center;}</style></head><body style="position:relative;background-image:url('colorful.jpg');"><table id="shape"><tr ><td onClick="add(this.id,0,0);" id="td1" class="tableShape"></td><td onClick="add(this.id,0,1);" id="td2" class="tableShape"></td><td onClick="add(this.id,0,2);" id="td3" class="tableShape"></td></tr><tr ><td onClick="add(this.id,1,0);" id="td4" class="tableShape" ></td><td onClick="add(this.id,1,1);" id="td5" class="tableShape"></td><td onClick="add(this.id,1,2);" id="td6" class="tableShape"></td></tr><tr ><td onClick="add(this.id,2,0);" id="td7" class="tableShape"></td><td onClick="add(this.id,2,1);" id="td8" class="tableShape"></td><td onClick="add(this.id,2,2);" id="td9" class="tableShape"></td></tr></table><input type="button" value="  Reset  " onClick="reset();" id="playButton"><input type="button" value="  select players option" onClick="start();" id="playBtn"><div id="lol"></div><div id="whole"></div><script>var x;var y;var s;var t;var g;function start(){	 document.getElementById("playBtn").style.display="none";	 x=prompt("enter first player name","player1"); y=prompt("enter second player","player2"); s=prompt("choose p1 o/x"); t=prompt("choose p2 o/x"); start.lst=true;}</script><script>var d=1;var arr =new Array(3);for (i=0; i <3; i++){arr[i]=new Array(3);}var i=1;function add(el,r,c){	var m=document.getElementById(el);	if (i%2==1){				if(arr[r][c]){					    return false;		}		if(start.lst==true){			i++;		m.innerHTML=s;		arr[r][c]=m.innerHTML;		if((arr[0][0]==s && arr[0][1]==s && arr[0][2]==s) ||(arr[1][0]==s && arr[1][1]==s && arr[1][2]==s)||(arr[2][0]==s && arr[2][1]==s && arr[2][2]==s)||(arr[0][0]==s && arr[1][1]==s && arr[2][2]==s)||(arr[0][0]==s && arr[1][0]==s && arr[2][0]==s)|| (arr[0][1]==s && arr[1][1]==s && arr[2][1]==s)||(arr[0][2]==s && arr[1][2]==s && arr[2][2]==s)||(arr[0][2]==s && arr[1][1]==s && arr[2][0]==s)){							var k=document.getElementById("whole");	k.style.display="block";		var r=document.getElementById("lol");		r.style.display="block";		r.style.textAlign="center";		r.innerHTML="player "+x+ " wins";		}		}	}		else if(i%2==0){		if(arr[r][c]){						return false;		}if(start.lst==true){			i++;		m.innerHTML=t;		arr[r][c]=m.innerHTML;		 if((arr[0][0]==t && arr[0][1]==t && arr[0][2]==t) ||(arr[1][0]==t && arr[1][1]==t && arr[1][2]==t)||(arr[2][0]==t && arr[2][1]==t && arr[2][2]==t)||(arr[0][0]==t && arr[1][1]==t && arr[2][2]==t)||(arr[0][0]==t && arr[1][0]==t && arr[2][0]==t)|| (arr[0][1]==t && arr[1][1]==t && arr[2][1]==t)||(arr[0][2]==t && arr[1][2]==t && arr[2][2]==t)||(arr[0][2]==t && arr[1][1]==t && arr[2][0]==t)){				var k=document.getElementById("whole");	k.style.display="block";		var r=document.getElementById("lol");		r.style.display="block";		r.style.textAlign="center";		r.innerHTML="player "+y+ " wins"  ;		 }		}	}	}</script><script>function reset(){	var p=1;	for(m=0;m<3;m++){		for(n=0;n<3;n++){			arr[m][n]="";			document.getElementById("td"+p).innerHTML="";			p++;		}	}	i=1;	document.getElementById("playBtn").style.display="block";	var k=document.getElementById("whole");	k.style.display="none";	var r=document.getElementById("lol");		r.style.display="none";		r.innerHTML="";	start.lst=false;	s="";	t="";}	</script></body></html>
Edited by alzami
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...