Lab 17 Reflection

     Lab 17 was about creating an online rock, paper, scissors game. The first thing I did after setting up my HTML document was create 3 divs: one to display all 3 moves the user could make, one to display the computer, and one that sat above the 2 other divs explaining the rules and displaying the outcome of a match. Using CSS float properties, I set the divs displaying the player's moveset and the computer side by side by first giving both a width of 50% and then giving each a float in an opposite direction to the other. Once I had the divs in a layout I wanted, I set up 3 <img> tags in the player move div with images displaying the moves the user could make against the computer: rock, paper, or scissor. I set up an <img> tag in the computer's div displaying a simple image of a computer to make the user feel like they were actually competing against something, even making the divs a different color to portray contrast and conflict.
     Now it was time to make the JS functions that would make the game work. I created one large function, play(move), which took in a parameter describing what move the player made. Within this function, the computer would randomly make a move via RNG, assigning a particular move to a particular number from 1 - 3. The move the computer made was stored in a variable, var cpuMov, and was compared to the user's move through a series of if statements, with 3 statements in total checking for 9 total conditions. The results of the match, including the move the player made, the computer's move, and who won were displayed using DOM to change the contents of an <h2> tag placed in the instructions and results div earlier.
     These skills are useful for a web designer that is going into game-making. Knowing how to create a layout that displays the player's actions and abilities make the experience intuitive and using elements such as color to create contrast help convey what the user should be doing, in this case playing against the computer. Knowing how to use functions within the JS library, such as Math.random(), to create game logic is also vital in making the game work.