Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

How to create a tic tac toe game with web standards (Part 5-Final)

5.00/5 (1 vote)
27 Nov 2012CPOL 5.8K  
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:

  1. Add the respond to the player
  2. 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.

JavaScript
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.

JavaScript
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)