For our midterm project, we were tasked with creating a game using what we learned, including a shape, image, sound, text, and OOP. Sticking to my cultural theme that I’ve been using for my assignments, I decided to create an Emarati twist on the classic XO game, calling it Dallah & Fenyan.
I started off by getting the images for the players from google, as well as the background audio. I ended up resizing the images to a square in Paint.NET to make it easier to incorporate in my game. The audio I downloaded from YouTube: https://www.youtube.com/watch?v=PN1nUDx5znA
The game contains multiple components, such as:
- Board class to handle slots on the grid and check contents during gameplay.
- drawBoard(), displayStartScreen(), and displayGameOver() functions to manage the visible parts of the game.
- mousePressed(), checkWinner(), getWinner(), and restartGame() containing game logic to manage gameplay.
I’m proud of the getWinner() function because it took me the longest to write properly 🙁
function getWinner() { // Check rows, columns, and diagonals for a win for (let i = 0; i < 3; i++) { // Rows if (board.cells[i][0] === board.cells[i][1] && board.cells[i][1] === board.cells[i][2] && board.cells[i][0] !== '') { return board.cells[i][0]; } // Columns if (board.cells[0][i] === board.cells[1][i] && board.cells[1][i] === board.cells[2][i] && board.cells[0][i] !== '') { return board.cells[0][i]; } } // Diagonals if (board.cells[0][0] === board.cells[1][1] && board.cells[1][1] === board.cells[2][2] && board.cells[0][0] !== '') { return board.cells[0][0]; } if (board.cells[0][2] === board.cells[1][1] && board.cells[1][1] === board.cells[2][0] && board.cells[0][2] !== '') { return board.cells[0][2]; } return null; // No winner yet }
Overall, this is the final outcome:
Looking to the future, I could definitely make it look more appealing, have some better design and animations, as well as audio during gameplay. I could also add a score counter to see how many times each player won the game.