Tom And Jerry TicTacToe With Swift
Tom And Jerry TicTacToe
Back with one of the most famous wars in the history of cats vs mice .. THE LEGENDS .. the long-life enemies TOM & JERRY are here to win the ULTIMATE TIC TAC TOE Game!
” TO WIN OR NOT TO WIN “
All what it takes is a good strategy to win .. but the real question is ” WHOSE SIDE ARE U ON ? “
output.compress-video-online.com.mp4
Step 1: Pick a side !
Using alert dialog , The game starts by asking the players who will start first , u might as well consider tossing a coin to decide .. or simply enjoy the fight ?
upon choice you’ll notice that the (Turns Label) above the game board has changed text & color to indicate who the current player is !
func choosePlayerDialog(){
// allow the user to decide who will start the game
let alert = UIAlertController(title: "Choose Player", message: "Choose who will start the game ?" , preferredStyle: UIAlertController.Style.alert)
// if the user chooses TOM, update the layout
alert.addAction(UIAlertAction(title: "Tom", style: UIAlertAction.Style.cancel, handler: { [self] action in
self.currentPlayer = "tom"
self.turnLabel.text = "Tom's Turn"
self.turnLabel.textColor = .systemIndigo
}))
// if the user choose JERRY, update the layout
alert.addAction(UIAlertAction(title: "Jerry", style: UIAlertAction.Style.default, handler: { [self] action in
self.currentPlayer = "jerry"
self.turnLabel.text = "Jerry's Turn"
self.turnLabel.textColor = .orange
}))
// show the alert
self.present(alert, animated: true, completion: nil)
}
output2.mp4
Step 2 : Mark your territory !
Once you decide you move click on the spot to be marked as yours ? and this is how its happening:
- Checking that the spot isn’t already taken (NO CHEATING)
- Check who the current player is (Tom || Jerry) using the variable [CurrentPlayer]
- Set the spot to display the current player’s logo/image
- Set the [Turn label] text to display the player’s name that should play next and set its’ color too (orange = Jerry , Indigo = Tom)
@IBAction func buttonPressed(_ sender: UIButton) {
// chack that the button is not taken alredy by eaither tom or jerry
if !tom.contains(sender.tag) && !jerry.contains(sender.tag) {
switch currentPlayer {
case "tom":
// if the current player who pressed the button is tom , set the button to tom's image
sender.setImage(UIImage(named: "tom.png"), for: .normal)
// add the button tag/position to tom's buttons array
tom.append(sender.tag)
// check if tom made a strike or not
checkWinner(checkArray: tom,winnerName: "Tom")
// if tom didn't score a win yet , move the turn to the next player JERRY
currentPlayer = "jerry"
turnLabel.text = "Jerry's Turn"
turnLabel.textColor = .orange
//
if tom.count+jerry.count == 9 && !win{
tieDialog()
}else{
// other wise go on with the game and set the wins to none
win = false
}
case "jerry":
// same situation going here so no need to repeat :)
sender.setImage(UIImage(named: "jerry.png"), for: .normal)
jerry.append(sender.tag)
checkWinner(checkArray: jerry,winnerName: "Jerry")
currentPlayer = "tom"
turnLabel.text = "Tom's Turn"
turnLabel.textColor = .systemIndigo
else{
win = false
}
default:
// if something went wrong just restart the game and let the players choose who will start
self.loadView()
choosePlayerDialog()
}
}
}
Step 3 : Strategy is Key !
Whether it’s horizontal , vertical or even diagonal .. once you get 3 in a row YOU WILL BE THE WINNER ! so make sure to plan it well cuz you might end in a tie .. or worse .. YOU LOSE X_X
But no worries we will check for every strike possibility to make sure its’ fare and square ?
func checkWinner(checkArray : [Int], winnerName:String){
// check if tom's/jerry's buttons array contains any of these winning sets , if so , declare the one who has it as a winner
if [1,2,3].allSatisfy(checkArray.contains) ||
[4,5,6].allSatisfy(checkArray.contains) ||
[3,5,7].allSatisfy(checkArray.contains) ||
[7,8,9].allSatisfy(checkArray.contains) ||
[1,4,7].allSatisfy(checkArray.contains) ||
[2,5,8].allSatisfy(checkArray.contains) ||
[3,6,9].allSatisfy(checkArray.contains) ||
[1,5,9].allSatisfy(checkArray.contains){
winDialog(winner: winnerName)
}
}
1) Win
once a strike is found , an alert dialog will appear declaring who the winner is ! and by clicking on “Play Again” the game will restart for the war to be continued ?
func winDialog(winner: String){
resetGame()
// a win is found
win = true
let alert = UIAlertController(title: "Congrats !", message: "\(winner) Won The Game !" , preferredStyle: UIAlertController.Style.alert)
// add an action (button)
alert.addAction(UIAlertAction(title: "Play Again", style: UIAlertAction.Style.default, handler: { action in self.newGame()}))
// show the alert
self.present(alert, animated: true, completion: nil)
}
winDialog.mp4
2) Tie
And if you ran out of spots and yet with no wins .. this means the game has ended in a tie :O and a small alert wil pop up !
if tom.count+jerry.count == 9 && !win{
tieDialog()
}
func tieDialog(){
resetGame()
let alert = UIAlertController(title: "Tie !", message: "This is a tie, no one won this round :)" , preferredStyle: UIAlertController.Style.alert)
// add an action (button)
alert.addAction(UIAlertAction(title: "Play Again", style: UIAlertAction.Style.default, handler: { action in self.newGame()}))
// show the alert
self.present(alert, animated: true, completion: nil)
}
tieDialog.mp4
3) Restart The game
You chose a wrong move ? someone cheated ? no worries just click restart and the game will start all over ?
func myResetDialog(){
// clear the game progress to start a new one
resetGame()
let alert = UIAlertController(title: "Reset Game", message: "Are You Sure You Want To Reset The Game ? You'll Lose Your Progress !" , preferredStyle: UIAlertController.Style.alert)
// add an action (button)
alert.addAction(UIAlertAction(title: "Reset", style: UIAlertAction.Style.destructive, handler: { action in
self.newGame()
self.choosePlayerDialog()
}))
alert.addAction(UIAlertAction(title: "Cancel", style: UIAlertAction.Style.cancel, handler: nil))
// show the alert
self.present(alert, animated: true, completion: nil)
}
reset.mp4