Skip to content

Commit

Permalink
crying internally
Browse files Browse the repository at this point in the history
  • Loading branch information
@angelatolim
angelatolim committed Apr 24, 2024
1 parent 5e9d19d commit 5ed6ebf
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 45 deletions.
17 changes: 9 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,41 @@
# TIC TAC TOE
The briefest description of my cool project and why you should all use it.
A simple game of tic tac toe.

## :computer: [Click here](#) to see my live project!

## :page_facing_up: About
- How to use my awesome project.
- You can play two player tic tac toe by clicking on the grid. The counter will keep score and you can reset the game with the play again button.
- Download instructions (if relevant):
```zsh
$ git clone my-awesome-app
$ cd my-awesome-app
$ node app.js
```
- Add in-app screenshots.


## :pencil2: Planning & Problem Solving
- Inspiration taken from existing websites
- Design of initial wireframe created in Figma
![Wireframing](images/TicTacToe_wireframe.png)
- Flow charts of logic
![Logic](images/tictactoe-logic.png)


## :rocket: Cool tech
- HTML
- CSS
- Javascript
- Libraries
- Animations
- Anything else you'd be proud to show your parents

## :scream: Bugs to fix :poop:
- Game continues to play after winner is determined
- Align score for "tie" with the other players
- Game unable to reset
- Background image tiles


## :sob: Lessons learnt
What I would do differently if I could wind back the clock...
- Start off with doing the images rather than replacing X and O with images
- Maybe add images rather than show/hide images

## :white_check_mark: Future features
Cool things I would add if I can keep working on this
- Would like to try animations or work in more game logic
64 changes: 50 additions & 14 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,22 @@ tttBoxElems.forEach(box => {
box.addEventListener('click', handleClick)
})



playAgainBtn.addEventListener('click', resetGame)

// functions
// add player function
function handleClick(event) {
const box = event.target
console.log(box);
const index = Array.from(box.parentNode.children).indexOf(box);

// add symbol of current player
// add image of current player
if (board[index] === '') {
box.classList.add(currentPlayer === 'X' ? 'wolverine' : 'deadpool');
const currentImage = currentPlayer === 'X' ? box.querySelector('.wolverine') : box.querySelector('.deadpool');
currentImage.classList.remove('hidden');
board[index] = currentPlayer;
box.querySelector('img').src = currentPlayer === 'X' ? 'images/wolverine-removebg-preview.png' : 'images/deadpool-removebg-preview.png';

// check if there is a winner
if (checkWins(currentPlayer)) {
// show play again button
Expand Down Expand Up @@ -58,39 +62,71 @@ function handleClick(event) {



// determine wins
function checkWins(boardElem) {
// determine wins function
function checkWins() {
const winRows = [
// rows
[0, 1, 2], [3, 4, 5], [6, 7, 8],
// columns
[0, 3, 6], [1, 4, 7], [2, 5, 8],
// diagonals
[0, 4, 8], [2, 4, 6]
]

];
for (let row of winRows) {
const [a, b, c] = row
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
return board[a];
}
const [a, b, c] = row;
const boxA = tttBoxElems[a];
const boxB = tttBoxElems[b];
const boxC = tttBoxElems[c];

if (boxA.classList.contains(currentPlayer === 'X' ? 'wolverine' : 'deadpool') &&
boxB.classList.contains(currentPlayer === 'X' ? 'wolverine' : 'deadpool') &&
boxC.classList.contains(currentPlayer === 'X' ? 'wolverine' : 'deadpool')) {
return true;
}
}
return null;

return false;
}

// tie function
function isTie() {
return board.every(square => square !== '');
}

// switch between players function
function switchPlayer() {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
console.log(currentPlayer);
}

// reset game
function resetGame() {
// clear the board
tttBoxElems.forEach(box => {
box.textContent = ''
box.classList.remove('wolverine', 'deadpool');

const wolverineImage = document.createElement('img');
wolverineImage.src = 'images/wolverine-removebg-preview.png';
wolverineImage.alt = 'wolverine';
wolverineImage.classList.add('hidden');
box.appendChild(wolverineImage);

const deadpoolImage = document.createElement('img');
deadpoolImage.src = 'images/deadpool-removebg-preview.png';
deadpoolImage.alt = 'deadpool';
deadpoolImage.classList.add('hidden');
box.appendChild(deadpoolImage);

const images = box.querySelectorAll('img');
images.forEach(image => {
image.classList.add('hidden');
if (image.src.includes('images/wolverine-removebg-preview.png')) {
image.classList.add('wolverine')
} else {
image.classList.add('deadpool')
}
})
})
// hide the play again button
playAgainBtn.classList.add('hidden')
Expand All @@ -100,4 +136,4 @@ function resetGame() {
currentPlayer = 'X'
// reset the board array
board = ['', '', '', '', '', '', '', '', '']
}
}
Binary file added images/doctor-van-nostrand-deadpool-wolverine.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 18 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,40 +26,40 @@ <h2 class="message"></h2>
</aside>
<main class="board">
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
<div class="box">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="hidden">
<img src="images/wolverine-removebg-preview.png" alt="wolverine" class="wolverine hidden">
<img src="images/deadpool-removebg-preview.png" alt="deadpool" class="deadpool hidden">
</div>
</main>
</div>
Expand Down
11 changes: 6 additions & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
body {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
background-color: #2e2e2e;
background-image: url(images/doctor-van-nostrand-deadpool-wolverine.jpg);
color: white;
}

nav {
border-bottom: 1px solid grey;
border-bottom: 1px solid lightgray;
height: 52px;
background-color: white;
background-color: rgba(255, 255, 255, 0.4);
color: #2e2e2e;
}

Expand All @@ -24,7 +24,8 @@ h1 {
}

.score {
background-color: #3e3e3e;
background-color: rgba(255, 255, 255, 0.4);
color: #2e2e2e;
padding: 20px;

}
Expand All @@ -50,7 +51,7 @@ main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-color: #3e3e3e;
background-color: rgba(255, 255, 255, 0.4);
}

.box {
Expand Down

0 comments on commit 5ed6ebf

Please sign in to comment.