Almost done building out the functionality of the “Rock Paper Scissor” project. Using only vanilla JavaScript to update the page based on user input makes me realize how much easier frameworks make things like this. As I was coding I found that I could be making some mistakes in my design. Additionally, there is a lot of opportunity to break things as new features are added. Currently I am not really managing the game’s state in a maintainable way. I’m not about to use libraries like Redux or build my own single source of truth structure (I’ve never done this before). Overall, this is a great experience. Getting those reps in.
TLDR;
Okay, so here are the highlights of what I did:
- Practice -> Continued working on the second half of the “Rock, Paper, Scissors” project. I built out the scoreboard table that shows the wins and loss history for the player. I still need to add the overall scoreboard, info modal, and the changing display mechanics.
Rock Paper Scissor JavaScript So Far
function init(){
let startBtn = document.querySelector("#start-btn");
startBtn.addEventListener("click", game);
}
function game(){
const choices = ["rock", "paper", "scissor"];
const results = ["win", "loss", "tie"];
const rounds = 5;
const table = document.querySelector("#scoreboard")
const btns = document.querySelectorAll(".choice-btn");
let result;
let wins = 0, losses = 0, roundNum = 1;
function computerPlay(){
return choices[Math.floor(Math.random() * 3)];
}
function playerPlay(e){
let value = e.currentTarget.getAttribute("data-choice");
playRound(value, computerPlay())
}
function insertNewRow(){
const row = document.createElement("tr");
const rCol = document.createElement("td");
rCol.appendChild(document.createTextNode(`R ${roundNum}:`))
const wCol = document.createElement("td");
const lCol = document.createElement("td");
if(result == "win"){
wCol.appendChild(document.createTextNode("W"));
lCol.appendChild(document.createTextNode("L"));
}
else if(result == "loss"){
wCol.appendChild(document.createTextNode("L"));
lCol.appendChild(document.createTextNode("W"));
}
else if(result == "tie"){
wCol.appendChild(document.createTextNode("T"));
lCol.appendChild(document.createTextNode("T"));
}
// Update page by appending new rows to table
row.appendChild(rCol)
row.appendChild(wCol)
row.appendChild(lCol)
table.appendChild(row)
}
function playRound(playerSelection, computerSelection) {
switch(playerSelection){
case "rock":
if(computerSelection == "paper") result = results[1];
else if(computerSelection == "rock") result = results[2];
else result = results[0]
break;
case "paper":
if(computerSelection == "scissor") result = results[1];
else if(computerSelection == "paper") result = results[2];
else result = results[0]
break;
case "scissor":
if(computerSelection == "rock") result = results[1];
else if(computerSelection == "scissor") result = results[2];
else result = results[0]
break;
default:
result = "Invalid Player Choice";
}
updateGameMem()
}
function updateGameMem(){
// Update the game memory
// to record the result of the round
if(result == "win"){
console.log("Player won the round!")
++wins
}
else if(result == "loss"){
console.log("Player lost the round!")
++losses;
}
else {
console.log("Player tied with the computer this round!")
}
insertNewRow(table, result);
++roundNum
//Check if Game is over
if(wins >= 5 || losses >= 5) endGame()
}
function endGame(){
btns.forEach(btn =>
btn.removeEventListener("click", playerPlay) );
console.log(`End of the game:\nPlayer won ${wins} rounds\nComputer won ${losses} rounds`)
}
btns.forEach(btn => btn.addEventListener("click", playerPlay) );
}
init()
Goal For Round 7 of the #100DaysofCode Challenge
This is my seventh round of the “#100daysofcode” challenge. I will be continuing my work from round five and round six into round seven. I am currently working through the book “Cracking the Coding Interview” by Gayle Laakmann McDowell. My goal is to become more familiar with algorithms and data structures. This goal was derived from my goal to better understand operating systems and key programs that I use in the terminal regularly e.g. Git. This goal was in turn derived from my desire to better understand the fundamental tools used for coding outside of popular GUIs. This in turn was derived from my desire to be a better back-end developer.
I have no idea if my path is correct but I am walking down this road anyways. Worst case scenario I learn a whole bunch of stuff that will help me out on my own personal projects.