Gim TicTacToe di iOS dengan Swift

Membuat aplikasi gim tictactoe pada perangkat berbasis iOS

Posted by Erwindo SianiparMar 4, 2020 (5 years ago) · 7 min read

Engineering Swift

https://images.unsplash.com/photo-1608308308678-a628ff00bc56

subtitle

Membuat aplikasi gim tictactoe pada perangkat berbasis iOS

comments

title

Gim TicTacToe di iOS dengan Swift

slug

gim-tictactoe-di-ios-dengan-swift

published

Mar 4, 2020

Persiapan proyek

Buka kode editor Xcode selanjutnya buat satu Xcode Project untuk memulai pembuatan permainan. Pilih menu Single View Apps dan tekan tombol Next.

Selanjutnya lakukan Setting Options saat membuat proyek dan pilih tempat penyimpanan proyek.

Lalu akan terbuka folder atau area kerja sebagai berikut.

Di dalam Main.storyboard buatlah sembilan komponen UIButton dengan ukuran 100 x 100 untuk blok papan permainan yang akan digunakan.

Tambahkan komponen UILabel di atas kesembilan blok papan untuk informasi pemain yang sedang aktif dan tambahkan satu komponen UIButton untuk memulai ulang permainan.

Persiapan kode program

Buka Assistant menu pada Xcode maka akan terbuka Jendela kode editor dan akan membuka fail ViewController.swift

Selanjutnya tambahkan IBOutlet untuk kesembilan blok papan dengan cara tekan CTRL lalu geser kursor ke kiri atau ke arah kode editor, dan berikan nama untuk setiap blok komponen UIButton

Selanjutnya buat satu IBAction yang akan menangani aksi dari kesembilan blok papan saat komponen UIButton ditekan. Buat satu fungsi baru dengan nama clickHandle.

Setelah fungsi tersebut dibuat, maka fungsi tersebut akan dipanggil ketika komponen UIButton titik block1 ditekan. Selanjutnya hubungkan semua komponen UIButton yang lainnya ke fungsi clickHandle. Semua blok papan memiliki fungsi yang sama jika sudah semua komponen terhubung dengan benar.

Penulisan kode

Selanjutnya kita masuk ke dalam tahap penulisan kode.

Di atas komponen-komponen IBOutlet kita akan membuat suatu inisialisasi variabel yang akan diperlukan untuk permainan.


var gameIsActive = true
let point = [UIImage(named: "player_x_image"), UIImage(named: "player_o_image")]
var player = "x"
var buttons = [UIButton]()
var board: [String] = ["", "", "", "", "", "", "", "", ""]
let winPosition = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
]

Tabel di bawah untuk penjabaran variabel di atas.

Variabel	Keterangan
`gameIsActive`	`boolean` sebagai penanda status permainan sedang berjalan
`point`	`array` berisi `UIImage` sebagai penanda ikon pemain `O` dan `X`
`player`	`string` sebagai pemain aktif
`buttons`	`array` untuk papan permainan
`winPosition`	`array` untuk logika posisi menang dalam baris papan

Dalam viewDidLoad tambahkan setiap tombol ke dalam variabel buttons yang sudah dideklarasikan sebelumnya.


[block1, block2, block3, block4, block5, block6, block7, block8, block9].forEach { button in
    buttons.append(button)
}

Buat satu komponen IBOutlet untuk label informasi pemain dan tambahkan baris kode berikut di dalam viewDidLoad untuk membuat sesi pemain yang akan pertama kali bermain.


playerName.text = "Player turn: \(player)"

Dalam fungsi clickHandle tambahkan baris kode berikut.


if buttons[sender.tag-1].isEnabled == true {
    let turn = player == "x" ? point[0] : point[1]
    buttons[sender.tag-1].setImage(turn, for: .normal)
    buttons[sender.tag-1].isEnabled = false
    board[sender.tag-1] = player
    changePlayer()
    checkWinner()
}

Fungsi changePlayer berisi kode yang akan mengecek siapa pemain yang sedang aktif dan siapa pemain yang akan bermain selanjutnya.


player = player == "x" ? "o" : "x"
playerName.text = "Player turn: \(player)"

Fungsi checkWinner berisi kode untuk memerika apakah di dalam susunan papan terdapat pemain yang sudah menang.


for position in winPosition {
    if board[position[0]] != "" && board[position[0]] == board[position[1]] && board[position[1]] == board[position[2]] {
        gameIsActive = false
        disabledAllButton()
        playerName.text = "Player \(board[position[0]]) win!"
     }
}

Pada baris kode di atas terdapat pemanggilan fungsi disabledAllButton yang berfungsi untuk mencegah agar tombol tidak dapat ditekan jika permainan sudah berakhir, untuk itu buat satu fungsi disabledAllButton dengan kode seperti berikut.


func disabledAllButton() {
    for i in 0...8 {
        buttons[i].isEnabled = false
    }
}

Dan tambahkan juga baris kode ini ke dalam fungsi checkWinner untuk memeriksa apakah permainan berakhir dengan nilai seri.


var totalPoint = ""
for i in 0...8 {
    totalPoint += board[i]
}

if totalPoint.count == 9 && gameIsActive {
    playerName.text = "Game is draw!"
}

Fungsi terakhir yang kita perlukan adalah untuk memulai ulang permainan. Fungsi ini akan dipanggil jika tombol mulai ulang ditekan.


for i in 0...8 {
    buttons[i].setImage(nil, for: .normal)
    buttons[i].isEnabled = true
    board[i] = ""
}

Fungsi di atas akan membersihkan gambar latar belakang dari tombol dan memulai ulang permainan seperti dari awal.

Waktu untuk bermain

Untuk kode sumber dari proyek permainan tictactoe sederhana di atas ada di halaman repositori Github saya, kamu dapat melihatnya dari tautan di bawah ini.

GitHub - erwindosianipar/tictactoe-swift: Case study and mini project develop simple tic-tac-toe game iOS apps with Swift storyboard

Ini adalah salah satu aplikasi yang saya ciptakan saat mengikuti code challenge membuat aplikasi game sederhana dengan bahasa pemrograman Swift. Swift adalah bahasa pemrograman yang didukung oleh Apple untuk membuat aplikasi pada perangkat-perangkat berbasis iOS seperti: iPhone, iPad, Mac, Apple Watch, Apple TV, dan perangkat Apple lainnya.

https://github.com/erwindosianipar/tictactoe-swift

Membuat Paginasi Web Jekyll

Integrasi dependensi penomoran halaman pada web Jekyll

Feb 09(5 years ago)

Gim TicTacToe di iOS dengan Swift

Membuat aplikasi gim tictactoe pada perangkat berbasis iOS

Mar 04(5 years ago)