Game TicTacToe adalah sebuah konsep game tradisional yang memiliki pola permainan memainkan simbol X dan O. Ketika salah satunya terpenuhi syarat berjejer secara diagonal, horisontal maupun diagonal maka simbol yang terlebih dahulu mencapai sejajar akan dinyatakan menang dan game selesai.
Pada program yang akan dibuat kali ini adalah membuat program game tictactoe sederhana yang berbasis C#, pada program kali ini saya menggunakan visual basic sebagai compiler nya.
Hal pertama yang mesti dilakukan adalah membuat atau mendisain form/tampilan game yang nantinya akan menjadi papan permainan, dengan memberi image pada background form dan menyusun 9 picturebox yang nantinya berfungsi sebagai tampilan dari gambar X atau O, juga menambahkan panel yang berisikan level permainan , seperti gambar dibawah ini:
Hal pertama yang mesti dilakukan adalah membuat atau mendisain form/tampilan game yang nantinya akan menjadi papan permainan, dengan memberi image pada background form dan menyusun 9 picturebox yang nantinya berfungsi sebagai tampilan dari gambar X atau O, juga menambahkan panel yang berisikan level permainan , seperti gambar dibawah ini:
dari gambar di atas, picture box dapat kita ubah warnanya menjadi transparant. Setelah itu, kita memulai membuat program nya. Program yang pertama yang perlu dibuat adalah membuat variabel-variabel yang akan digunakan nantinya dan membuat fungsi-fungsi untuk menjalankan program, seperti dibawah ini:
Image imgX = Properties.Resources.X;
Image imgO = Properties.Resources.c;
int img1 = 0, img2 = 0, img3 = 0, img4 = 0, img5 = 0, img6 = 0, img7 = 0, img8 = 0, img9 = 0;
int hsl_img1=0, hsl_img2=0, hsl_img3=0, hsl_img4=0, hsl_img5=0, hsl_img6=0, hsl_img7=0, hsl_img8=0, hsl_img9=0;
void random()
{
if (img1 == 0)
{
pictureBox1.BackgroundImage = imgO;
img1 = img1 + 2;
}
else if (img2 == 0)
{
pictureBox2.BackgroundImage = imgO;
img2 = img2 + 2;
}
else if (img3 == 0)
{
pictureBox3.BackgroundImage = imgO;
img3 = img3 + 2;
}
else if (img4 == 0)
{
pictureBox4.BackgroundImage = imgO;
img4 = img4 + 2;
}
else if (img5 == 0)
{
pictureBox5.BackgroundImage = imgO;
img5 = img5 + 2;
}
else if (img6 == 0)
{
pictureBox6.BackgroundImage = imgO;
img6 = img6 + 2;
}
else if (img7 == 0)
{
pictureBox7.BackgroundImage = imgO;
img7 = img7 + 2;
}
else if (img8 == 0)
{
pictureBox8.BackgroundImage = imgO;
img8 = img8 + 2;
}
else if (img9 == 0)
{
pictureBox2.BackgroundImage = imgO;
img9 = img9 + 2;
}
}
void proses_random()
{
if (img1 == 1)
{
random();
img1++;
}
else if (img2 == 1)
{
random();
img2++;
}
else if (img3 == 1)
{
random();
img3++;
}
else if (img4 == 1)
{
random();
img4++;
}
else if (img5 == 1)
{
random();
img5++;
}
else if (img6 == 1)
{
random();
img6++;
}
else if (img7 == 1)
{
random();
img7++;
}
else if (img8 == 1)
{
random();
img8++;
}
else if (img9 == 1)
{
random();
img9++;
}
}
Pada tipe data image diatas, pada variabel img berfungsiX memanggil gambar X, pada variabel imgO berfungsi memanggil gambar Y. Isi pada fungsi random diatas menjelaskan jika img1 bernilai 0 maka pada picturebox1 akan menampilkan gambar O, begitu seterusnya sampai picturebox9. Pada fungsi proses_random, artinya jika img1 bernilain 1 maka jalankan fungsi random, kemudian nilai img1 ditambah 1.
Berikutnya membuat fungsi hasil seperti dibawah ini:
void hasil()
{
if (hsl_img1 == 1 && hsl_img2 == 1 && hsl_img3 == 1)
{
pictureBox1.BackColor = Color.Lime;
pictureBox2.BackColor = Color.Lime;
pictureBox3.BackColor = Color.Lime;
MessageBox.Show("Player X Win!");
reset();
}
else if (hsl_img4 == 1 && hsl_img5 == 1 && hsl_img6 == 1)
{
pictureBox4.BackColor = Color.Lime;
pictureBox5.BackColor = Color.Lime;
pictureBox6.BackColor = Color.Lime;
MessageBox.Show("Player X Win!");
reset();
}
else if (hsl_img7 == 1 && hsl_img8 == 1 && hsl_img9 == 1)
{
pictureBox7.BackColor = Color.Lime;
pictureBox8.BackColor = Color.Lime;
pictureBox9.BackColor = Color.Lime;
MessageBox.Show("Player X Win!");
reset();
}
else if (hsl_img1 == 1 && hsl_img4 == 1 && hsl_img7 == 1)
{
pictureBox1.BackColor = Color.Lime;
pictureBox4.BackColor = Color.Lime;
pictureBox7.BackColor = Color.Lime;
MessageBox.Show("Player X Win!");
reset();
}
else if (hsl_img2 == 1 && hsl_img5 == 1 && hsl_img8 == 1)
{
pictureBox2.BackColor = Color.Lime;
pictureBox5.BackColor = Color.Lime;
pictureBox8.BackColor = Color.Lime;
MessageBox.Show("Player X Win!");
reset();
}
else if (hsl_img3 == 1 && hsl_img6 == 1 && hsl_img9 == 1)
{
pictureBox3.BackColor = Color.Lime;
pictureBox6.BackColor = Color.Lime;
pictureBox9.BackColor = Color.Lime;
MessageBox.Show("Player X Win!");
reset();
}
else if (hsl_img1 == 1 && hsl_img5 == 1 && hsl_img9 == 1)
{
pictureBox1.BackColor = Color.Lime;
pictureBox5.BackColor = Color.Lime;
pictureBox9.BackColor = Color.Lime;
MessageBox.Show("Player X Win!");
reset();
}
else if (hsl_img3 == 1 && hsl_img5 == 1 && hsl_img7 == 1)
{
pictureBox3.BackColor = Color.Lime;
pictureBox5.BackColor = Color.Lime;
pictureBox7.BackColor = Color.Lime;
MessageBox.Show("Player X Win!");
reset();
}
}
Pada fungsi hasil diatas menjelaskan bahwa jika di antara 9 kotak pada picturebox telah ada gambar X yang bersusun 3 sejajar (vertikal, horizontal maupun diagonal) maka akan muncul messagebox, yang menyatakan player X menang, dan pada fungsi tersebut saya tambahkan fariasi warna terhadap background image yang tersusun 3 sejajar tersebut, dan kemudian masuk kepada fungsi reset. Fungsi reset akan diberikan dan dijelaskan dibawah ini:
void reset()
{
pictureBox1.BackgroundImage = null;
pictureBox1.BackColor = Color.Transparent;
pictureBox2.BackgroundImage = null;
pictureBox2.BackColor = Color.Transparent;
pictureBox3.BackgroundImage = null;
pictureBox3.BackColor = Color.Transparent;
pictureBox4.BackgroundImage = null;
pictureBox4.BackColor = Color.Transparent;
pictureBox5.BackgroundImage = null;
pictureBox5.BackColor = Color.Transparent;
pictureBox6.BackgroundImage = null;
pictureBox6.BackColor = Color.Transparent;
pictureBox7.BackgroundImage = null;
pictureBox7.BackColor = Color.Transparent;
pictureBox8.BackgroundImage = null;
pictureBox8.BackColor = Color.Transparent;
pictureBox9.BackgroundImage = null;
pictureBox9.BackColor = Color.Transparent;
img1 = img2 = img3 = img4 = img5 = img6 = img7 = img8 = img9 = 0;
hsl_img1 = hsl_img2 = hsl_img3 = hsl_img4 = hsl_img5 = hsl_img6 = hsl_img7 = hsl_img8 = hsl_img9 = 0;
}
private void button1_Click(object sender, EventArgs e)
{
reset();
}
private void button2_Click(object sender, EventArgs e)
{
panel1.Visible = false;
}
Pada fungsi reset di atas ya itu mengembalikan semua keposisi awal lagi, termasuk back color pada picturebox, dan mengembalikan semua variabel tipe inetger pada nol lagi, reset dilakukan pada button1 diatas. Didesain kita juga memasang panel yang berisikan 2 radiobutton dan 1 button, jadi ketika radio button1(easy) dipilih maka game akan menjalankan program easy, begitu juga pada radiobutton2 untuk difficult, pada button 2(play), jika tombol ditekan, maka visible panel akan false.
Pada rogram yang akan di buat akan tampak seperti dibawah ini:
private void pictureBox1_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img1 == 0)
{
hsl_img1++;
img1++;
pictureBox1.BackgroundImage = imgX;
}
else if (img1 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
private void pictureBox2_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img2 == 0)
{
hsl_img2++;
img2++;
pictureBox2.BackgroundImage = imgX;
}
else if (img1 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
private void pictureBox3_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img3 == 0)
{
hsl_img3++;
img3++;
pictureBox3.BackgroundImage = imgX;
}
else if (img3 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
private void pictureBox4_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img4 == 0)
{
hsl_img4++;
img4++;
pictureBox4.BackgroundImage = imgX;
}
else if (img4 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
private void pictureBox5_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img5 == 0)
{
hsl_img5++;
img5++;
pictureBox5.BackgroundImage = imgX;
}
else if (img5 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
private void pictureBox6_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img6 == 0)
{
hsl_img6++;
img6++;
pictureBox6.BackgroundImage = imgX;
}
else if (img6 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
private void pictureBox7_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img7 == 0)
{
hsl_img7++;
img7++;
pictureBox7.BackgroundImage = imgX;
}
else if (img7 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
private void pictureBox8_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img8 == 0)
{
hsl_img8++;
img8++;
pictureBox8.BackgroundImage = imgX;
}
else if (img8 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
private void pictureBox9_Click(object sender, EventArgs e)
{
if (radioButton1.Checked == true)
{
if (img9 == 0)
{
hsl_img9++;
img9++;
pictureBox9.BackgroundImage = imgX;
}
else if (img9 == 2)
{
MessageBox.Show("Sudah Terpilih");
}
proses_random();
hasil();
}
else if (radioButton2.Checked == true)
{
}
}
Dari program diatas, jadi masing-masing picturebox berisikan, jika radiobutton1 terpilih maka program akan menjalankan program easy. Misalkan yang dipilih adalah picturebox1, adalah jika variabel img1 bernilai 0 maka nilai pada variabel hsl_img1 ditambah 1, dan nilai pada variabel img1 juga ditambah 1, dan kemudian program menampilkan gambar X pada picturebox1, begitu seterusnya sampai picturebox9.
Untuk program yang difficult belum dapat dibuat, tetapi jika telah dibuat, kita tinggal memasukkan programnya kedalam "else if (radioButton2.checked == true", maka program difficult akan berjalan.
Untuk program yang difficult belum dapat dibuat, tetapi jika telah dibuat, kita tinggal memasukkan programnya kedalam "else if (radioButton2.checked == true", maka program difficult akan berjalan.
Jika dijalankan, program tersebut akan tampak seperti gambar dibawah ini:
