Affichage des articles dont le libellé est game programming. Afficher tous les articles
Affichage des articles dont le libellé est game programming. Afficher tous les articles

VB.NET Tic Tac Toe Game Source Code

How To Make A TIC TAC TOE Game In VBNET 

VB.NET Tic-Tac-Toe Game


In This VB.NET Tutorial we will See How To Build A Tic-Tac-Toe Game With Replay And Get The Winner And Change Winning Boxes Color Using Visual Basic.Net And Visual Studio Editor .

Part 1

                                                                          Part 2

Part 3

                                                                          Part 4


Project Source Code:

    
Public Class VB_TIC_TAC_TOE

    Private Sub VB_TIC_TAC_TOE_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        ' add event to all buttons inside the panel2 
        For Each c As Control In Panel2.Controls

            If c.GetType() = GetType(Button) Then

                AddHandler c.Click, AddressOf btn_Click

            End If

        Next

    End Sub

    Dim XorO As Integer = 0
    ' create button event 
    Private Sub btn_Click(sender As Object, e As EventArgs)

        Dim btn As Button = sender

        ' we will clear buttons text later 
        If btn.Text.Equals("") Then

            If XorO Mod 2 = 0 Then

                btn.Text = "X"
                btn.ForeColor = Color.Red
                Label1.Text = "[O] Turn"
                getTheWinner()

            Else
                btn.Text = "O"
                btn.ForeColor = Color.Blue
                Label1.Text = "[X] Turn"
                getTheWinner()
            End If

            XorO += 1

        End If

    End Sub

    Dim win As Boolean = False

    ' create a function to get the winner 
    Private Sub getTheWinner()

        If Not Button1.Text.Equals("") AndAlso Button1.Text.Equals(Button2.Text) AndAlso Button1.Text.Equals(Button3.Text) Then
            win = True
            winEffect(Button1, Button2, Button3)
        End If

        If Not Button4.Text.Equals("") AndAlso Button4.Text.Equals(Button5.Text) AndAlso Button4.Text.Equals(Button6.Text) Then
            win = True
            winEffect(Button4, Button5, Button6)
        End If

        If Not Button7.Text.Equals("") AndAlso Button7.Text.Equals(Button8.Text) AndAlso Button7.Text.Equals(Button9.Text) Then
            win = True
            winEffect(Button7, Button8, Button9)
        End If

        If Not Button1.Text.Equals("") AndAlso Button1.Text.Equals(Button4.Text) AndAlso Button1.Text.Equals(Button7.Text) Then
            win = True
            winEffect(Button1, Button4, Button7)
        End If

        If Not Button2.Text.Equals("") AndAlso Button2.Text.Equals(Button5.Text) AndAlso Button2.Text.Equals(Button8.Text) Then
            win = True
            winEffect(Button2, Button5, Button8)
        End If

        If Not Button3.Text.Equals("") AndAlso Button3.Text.Equals(Button6.Text) AndAlso Button3.Text.Equals(Button9.Text) Then
            win = True
            winEffect(Button3, Button6, Button9)
        End If

        If Not Button1.Text.Equals("") AndAlso Button1.Text.Equals(Button5.Text) AndAlso Button1.Text.Equals(Button9.Text) Then
            win = True
            winEffect(Button1, Button5, Button9)
        End If

        If Not Button3.Text.Equals("") AndAlso Button3.Text.Equals(Button5.Text) AndAlso Button3.Text.Equals(Button7.Text) Then
            win = True
            winEffect(Button3, Button5, Button7)
        End If

        ' if no one win later 
        ' 9 buttons with X or O mean 9 char = no button is empty 
        If allbuttonsTextLength() = 9 AndAlso win = False Then

            Label1.Text = "NO Winner"

        End If

    End Sub

   ' get all buttons text length 
    Function allbuttonsTextLength() As Integer

        Dim btnsTxtLength As Integer = 0

        For Each c As Control In Panel2.Controls

            If c.GetType() = GetType(Button) Then

                btnsTxtLength += c.Text.Length

            End If

        Next

        Return btnsTxtLength

    End Function

    ' win effect function to change buttons 
    ' background color + foreColor when one player win 
    Private Sub winEffect(ByVal b1 As Button, ByVal b2 As Button, ByVal b3 As Button)

        b1.BackColor = Color.Red
        b2.BackColor = Color.Red
        b3.BackColor = Color.Red

        b1.ForeColor = Color.White
        b2.ForeColor = Color.White
        b3.ForeColor = Color.White

        Label1.Text = b1.Text + " Win"

    End Sub

     ' new partie button 
    Private Sub ButtonNewPartie_Click(sender As Object, e As EventArgs) Handles ButtonNewPartie.Click

        XorO = 0
        win = False
        Label1.Text = "Play"
        For Each c As Control In Panel2.Controls

            If c.GetType() = GetType(Button) Then

                c.BackColor = Color.White
                c.Text = ""

            End If

        Next

    End Sub
End Class


download the source code


OUTPUT:





C# Tic Tac Toe Game Source Code

How To Make A TIC TAC TOE Game In C#  

c# tic tac toe game


In This C# Tutorial we will See How To Build A Tic-Tac-Toe Game With Replay And Get The Winner And Change Winning Boxes Color Using C# And Visual Studio Editor .

Part 1

                                                                          Part 2

Part 3

                                                                          Part 4


Project Source Code:

    
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Csharp_TIC_TAC_TOE : Form
    {
        public Csharp_TIC_TAC_TOE()
        {
            InitializeComponent();
        }

        private void Csharp_TIC_TAC_TOE_Load(object sender, EventArgs e)
        {
            // add action to all buttons inside panel2
            foreach(Control c in panel2.Controls)
            {
                if(c is Button)
                {
                    c.Click += new System.EventHandler(btn_click);
                }
            }
        }

        int XorO = 0;
        // create button action
        public void btn_click(object sender, EventArgs e)
        {
            Button btn = (Button)sender;
            if (btn.Text.Equals(""))// we will clear text from buttons later
            {
                if(XorO % 2 == 0)
                {
                    btn.Text = "X";
                    btn.ForeColor = Color.Blue;
                    label1.Text = "O turn now";
                    getTheWinner();
                }else
                {
                    btn.Text = "O";
                    btn.ForeColor = Color.Red;
                    label1.Text = "X turn now";
                    getTheWinner();
                }

                XorO++;
            }
        }

        bool win = false;
        // get the winner function
        public void getTheWinner()
        {
            if(!button1.Text.Equals("") && button1.Text.Equals(button2.Text) && button1.Text.Equals(button3.Text))
            {
                winEffect(button1, button2, button3);
                win = true;
            }
            if (!button4.Text.Equals("") && button4.Text.Equals(button5.Text) && button4.Text.Equals(button6.Text))
            {
                winEffect(button4, button5, button6);
                win = true;
            }
            if (!button7.Text.Equals("") && button7.Text.Equals(button8.Text) && button7.Text.Equals(button9.Text))
            {
                winEffect(button7, button8, button9);
                win = true;
            }
            if (!button1.Text.Equals("") && button1.Text.Equals(button4.Text) && button1.Text.Equals(button7.Text))
            {
                winEffect(button1, button4, button7);
                win = true;
            }
            if (!button2.Text.Equals("") && button2.Text.Equals(button5.Text) && button2.Text.Equals(button8.Text))
            {
                winEffect(button2, button5, button8);
                win = true;
            }
            if (!button3.Text.Equals("") && button3.Text.Equals(button6.Text) && button3.Text.Equals(button9.Text))
            {
                winEffect(button3, button6, button9);
                win = true;
            }
            if (!button1.Text.Equals("") && button1.Text.Equals(button5.Text) && button1.Text.Equals(button9.Text))
            {
                winEffect(button1, button5, button9);
                win = true;
            }
            if (!button3.Text.Equals("") && button3.Text.Equals(button5.Text) && button3.Text.Equals(button7.Text))
            {
                winEffect(button3, button5, button7);
                win = true;
            }

            // if no one win
            // if all buttons are not empty 
            // we can but 1 char in a button "X or O"
            // we have 9 buttons 
            // mean 9 char in length
            if(AllBtnLength() == 9 && win == false)
            {
                label1.Text = "No Winner";
            }

        }

// get all button text length function -> return int
        public int AllBtnLength()
        {
            int allTextButtonsLength = 0;
            foreach (Control c in panel2.Controls)
            {
                if (c is Button)
                {
                    allTextButtonsLength += c.Text.Length;
                }
            }
            return allTextButtonsLength;
        }

// win effect function to change buttons 
// background color + foreColor when one player win
        public void winEffect(Button b1, Button b2, Button b3)
        {
            b1.BackColor = Color.Green;
            b2.BackColor = Color.Green;
            b3.BackColor = Color.Green;

            b1.ForeColor = Color.White;
            b2.ForeColor = Color.White;
            b3.ForeColor = Color.White;

            label1.Text = b1.Text + " Win";
        }

// new partie button
        private void buttonPartie_Click(object sender, EventArgs e)
        {
            XorO = 0;
            win = false;
            label1.Text = "Play";
            foreach (Control c in panel2.Controls)
            {
                if (c is Button)
                {
                    c.Text = "";
                    c.BackColor = Color.White;
                }
            }
        }

    }
}


download the source code


OUTPUT:





Javascript Tic Tac Toe Game

How To Make A TIC TAC TOE Game In Javascript  

javascript tic-tac-toe game


In This Javascript Tutorial we will See How To Build A Tic-Tac-Toe Game With Replay And Get The Winner And Change Winning Boxes Color Using JS And Netbeans Editor + HTML5 + CSS3 .

Part 1

                                                                          Part 2



Project Source Code:

    
<!DOCTYPE html>
<html>
    <head>
        <title>Javascript TIC TAC TOE</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            *{box-sizing: border-box}
            
            .container{width: 300px;
                       overflow: hidden;
                       margin: 50px auto 0 auto;
                     }
            
            .container span{width: 100%;
                            display: block;
                            text-align: center;
                            font-family: sans-serif;
                            color: #fff;
                            font-size: 25px;
                            background: #446CB3;
                           }
            
            .container .box{float: left;
                            width: 100px;
                            height: 100px;
                            border: 1px solid #000;
                            transition: all .25s ease-in-out;
                            font-family: sans-serif; 
                            font-size: 85px;
                            text-align: center;
                            line-height: 100px; 
                            cursor: pointer;
                          }
            
            .container .box:hover{background: rgba(10,10,10,0.5);
                                  color: #fff
                                 }
            
            button{background: #26C281;
                   color: #fff;
                   font-weight: bold;
                   border: 1px solid yellow;
                    cursor: pointer; 
                    width: 200px;
                    height: 40px; 
                    font-size: 22px;
                    display: block;
                    margin: 10px auto}
            
            .win{background: #F9690E; color: #fff}
            
        </style>
        
    </head>
    <body>
       
        <div class="container" id="main">
            <span id="turn">Play</span>
            <!-- show X or O on div click -->
            <div class="box" id="box1"></div>
            <div class="box" id="box2"></div>
            <div class="box" id="box3"></div>
            <div class="box" id="box4"></div>
            <div class="box" id="box5"></div>
            <div class="box" id="box6"></div>
            <div class="box" id="box7"></div>
            <div class="box" id="box8"></div>
            <div class="box" id="box9"></div>
        </div>
        <!-- Play Again And Reset All Info -->
        <button onclick="replay()">Play Again</button>
        
        <script>
            
            var turn = document.getElementById("turn"),
             // boxes => all boxes
            // X_or_O => to set X or O into the box
                boxes = document.querySelectorAll("#main div"), X_or_O = 0;
            
            function selectWinnerBoxes(b1,b2,b3){
                b1.classList.add("win");
                b2.classList.add("win");
                b3.classList.add("win");
                turn.innerHTML = b1.innerHTML + " Won Congrat";
                turn.style.fontSize = "40px";
            }
            
            function getWinner(){
                
                var box1 = document.getElementById("box1"),
                    box2 = document.getElementById("box2"),
                    box3 = document.getElementById("box3"),
                    box4 = document.getElementById("box4"),
                    box5 = document.getElementById("box5"),
                    box6 = document.getElementById("box6"),
                    box7 = document.getElementById("box7"),
                    box8 = document.getElementById("box8"),
                    box9 = document.getElementById("box9");
            
            // get all posibilites
              if(box1.innerHTML !== "" && box1.innerHTML === box2.innerHTML && box1.innerHTML === box3.innerHTML)
                 selectWinnerBoxes(box1,box2,box3);
         
              if(box4.innerHTML !== "" && box4.innerHTML === box5.innerHTML && box4.innerHTML === box6.innerHTML)
                 selectWinnerBoxes(box4,box5,box6);
             
              if(box7.innerHTML !== "" && box7.innerHTML === box8.innerHTML && box7.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box7,box8,box9);
             
              if(box1.innerHTML !== "" && box1.innerHTML === box4.innerHTML && box1.innerHTML === box7.innerHTML)
                 selectWinnerBoxes(box1,box4,box7);
             
              if(box2.innerHTML !== "" && box2.innerHTML === box5.innerHTML && box2.innerHTML === box8.innerHTML)
                 selectWinnerBoxes(box2,box5,box8);
             
              if(box3.innerHTML !== "" && box3.innerHTML === box6.innerHTML && box3.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box3,box6,box9);
             
              if(box1.innerHTML !== "" && box1.innerHTML === box5.innerHTML && box1.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box1,box5,box9);
             
              if(box3.innerHTML !== "" && box3.innerHTML === box5.innerHTML && box3.innerHTML === box7.innerHTML)
                 selectWinnerBoxes(box3,box5,box7);
             
            }
            
            
            // set event onclick
            for(var i = 0; i < boxes.length; i++){
                boxes[i].onclick = function(){
                    // not allow to change the value of the box
                    if(this.innerHTML !== "X" && this.innerHTML !== "O"){
                    if(X_or_O%2 === 0){
                       console.log(X_or_O);
                       this.innerHTML = "X"; 
                       turn.innerHTML = "O Turn Now";
                       getWinner();
                       X_or_O += 1;
                       
                    }else{
                        console.log(X_or_O);
                       this.innerHTML = "O";
                       turn.innerHTML = "X Turn Now";
                       getWinner();
                       X_or_O += 1;  
                    }
                }
                    
                };
            }
            
            function replay(){
                
                for(var i = 0; i < boxes.length; i++){
                    boxes[i].classList.remove("win");
                    boxes[i].innerHTML = "";
                    turn.innerHTML = "Play";
                    turn.style.fontSize = "25px";
                    
                }
                
            }
            
        </script>
        
    </body>
</html>


download the source code




OUTPUT:


javascript tic tac toe game start
Start


tic-tac-toe div hover
Mouse Hover

js tic-tac-toe O turn
O turn


js tic tac toe X turn
X Turn

js tic tac toe O win
O Win



js tic tac toe X win
X Win



javascript tic-tac-toe win
Super Goku Win