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.