How to create a tic tac toe game with web standards (Part 5-Final)
5.00/5 (1 vote)
How to create a tic tac toe game with web standards.
As the post of the first part, we will do seven steps and we have read through the first three steps already. Now this is the last part of the tutorial. The last four steps may not be completed all. All are changed to two more steps. They are:
- Add the respond to the player
- check the winner
It is so sorry that the time limitation addition is removed because it is not the most important for the tutorial. You may not be explained clearly but you can read the code for your understanding.
This is the code of computer_play functioned mention in previous part.
function compute_play(){
if(game_over == true){
return;
}
//var x= Math.floor(Math.random()*20);
//var y= Math.floor(Math.random()*20);
var x = cur_x;
var y = cur_y;
var rnd ;
while(set_position(x,y)==false){
if(x >=20){
x = cur_x;
}
if(y >=20){
y = cur_y;
}
rnd= Math.floor(Math.random()*4);
if(rnd==0){
x = x+1;
}else if(rnd==1){
x = x-1;
}else if(rnd =2){
y = y+1;
}else if(rnd ==3){
y = y-1;
}
//x= Math.floor(Math.random()*20);
//y= Math.floor(Math.random()*20);
}
check_winner();
turn =1;
}
This is the code of check_winner function. It is a lot of code. But you must know that the main check for winner consists of
four parts.
The first one is horizontal . The second one is vertical. The third one is from top left part to the bottom right. And the last one is from the right top
to the left bottom part of the grid board.
function check_winner(){
if(game_over == true){
return;
}
//check left to right
var tmp = 0;
var tmp_player ="";
var player =""; // value 1= player 0= computer
for(i=0;i<20;i++){
for(j=0;j<20;j++){
var value = states[i][j];
if(value==1){
player = 1;
}else if(value==2){
player = 0;
}else{
tmp=0;
continue;
}
if(tmp_player ==""){
tmp_player = player;
}
if(player==tmp_player){
tmp+=1;
}else{
tmp=1;
}
if(tmp==5){
if(player==1){
alert("You win the game!");
}else if(player==0){
alert("You lose the game!");
}
game_over = true;
break;
}
}
}
//check top to bottm
tmp = 0;
tmp_player ="";
player =""; // value 1= player 0= computer
for(i=0;i<20;i++){
for(j=0;j<20;j++){
var value = states[j][i];
if(value==1){
player = 1;
}else if(value==2){
player = 0;
}else{
tmp=0;
continue;
}
if(tmp_player ==""){
tmp_player = player;
}
if(player==tmp_player){
tmp+=1;
}else{
tmp=1;
}
if(tmp==5){
if(player==1){
alert("You win the game!");
}else if(player==0){
alert("You lose the game!");
}
game_over = true;
break;
}
}
}
//check cross left to right above
tmp = 0;
tmp_player ="";
player =""; // value 1= player 0= computer
var n;
for(i=0;i<20;i++){
n = i;
for(j=0;j<20;j++){
var m = j;
var value = states[m][++n];
if(i==0){
//alert(m+","+n);
}
if(value==1){
player = 1;
}else if(value==2){
player = 0;
}else{
tmp=0;
continue;
}
if(tmp_player ==""){
tmp_player = player;
}
if(player==tmp_player){
tmp+=1;
}else{
tmp=1;
}
if(tmp==5){
if(player==1){
alert("You win the game!");
}else if(player==0){
alert("You lose the game!");
}
game_over = true;
break;
}
}
}
//check cross left to right below
tmp = 0;
tmp_player ="";
player =""; // value 1= player 0= computer
for(i=19;i>=0;i--){
n = i;
for(j=19;j>=0;j--){
var m = j;
var value = states[m][--n];
if(i==19){
//alert(m+","+n);
}
if(value==1){
player = 1;
}else if(value==2){
player = 0;
}else{
tmp=0;
continue;
}
if(tmp_player ==""){
tmp_player = player;
}
if(player==tmp_player){
tmp+=1;
}else{
tmp=1;
}
if(tmp==5){
if(player==1){
alert("You win the game!");
}else if(player==0){
alert("You lose the game!");
}
game_over = true;
break;
}
}
}
//check cross right to left above
tmp = 0;
tmp_player ="";
player =""; // value 1= player 0= computer
var n;
for(i=19;i>=0;i--){
n = i;
for(j=0;j<20;j++){
var m = j;
var value = states[m][--n];
if(i==0){
//alert(m+","+n);
}
if(value==1){
player = 1;
}else if(value==2){
player = 0;
}else{
tmp=0;
continue;
}
if(tmp_player ==""){
tmp_player = player;
}
if(player==tmp_player){
tmp+=1;
}else{
tmp=1;
}
if(tmp==5){
if(player==1){
alert("You win the game!");
}else if(player==0){
alert("You lose the game!");
}
game_over = true;
break;
}
}
}
//check cross right to left below
tmp = 0;
tmp_player ="";
player =""; // value 1= player 0= computer
var n;
for(i=0;i<20;i++){
n = i;
for(j=19;j>=0;j--){
var m = j;
var value = states[m][++n];
if(i==0){
//alert(m+","+n);
}
if(value==1){
player = 1;
}else if(value==2){
player = 0;
}else{
tmp=0;
continue;
}
if(tmp_player ==""){
tmp_player = player;
}
if(player==tmp_player){
tmp+=1;
}else{
tmp=1;
}
if(tmp==5){
if(player==1){
alert("You win the game!");
}else if(player==0){
alert("You lose the game!");
}
game_over = true;
break;
}
}
}
}
You may visit the gihub repository for source code download.