Feedback

Project Feedback + Evaluation

Score	Expectations
0	Incomplete
1	Progressing
2	Performing
3	Excelling

Deployment: 2

Did you successfully deploy your project to github pages? Is the app's functionality the same deployed as it is locally?

👍 Be sure to also add your gh_pages link to the URL section of this repo's description. Check the Project 1 Deliverables section for details.

Technical Requirements: 2

Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?

Your project's published functionality works quite well and you succeeded in achieving all of your base user stories.

Code Quality: 2

Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code?

👍 Very good use of comments.

Code is mostly well formatted, however, there is a spacing/indentation problem on your pattern generating functions on line 30 - 45 where the ending curly brace } is indented too far.

Also lines 73 - 107 in your buttonClicks function need to be indented one more level to the right.

👍 Almost all variable and functions are named semantically, with one notable exception: The boolean check is too generic. What are we checking? The variable name doesn't make it clear and the code doesn't explain it. This should be renamed to something more descriptive or at least provide a comment at the declaration that describes it's purpose. I'm guessing this is a boolean that store whether the game is running or not. Perhaps running or gameIsRunning could be a more semantic choice.

Creativity/Interface: 3

Is your user interface easy to use and understand? Does it make sense for the problem you're solving? Does your interface demonstrate creative design?

Very well done. The interface is very simple from a technical standpoint, but achieves all of your goals and the basic needs of a Simon game such as the main buttons a "start game" button and level counter. It also make good use of css transformations like border-radius and box-shadow to create a nice effect. You even included sound effects.

Things you'd like specific feedback on:

Want overall feedback on this project, also want specific feedback on javascript part. Want feedback on flashSquare function, want to know more simple way to set up animation for square buttons.

Generally, I think you did a very good job on your JS code here. Places for improvement could include abstracting out parts of the buttonClicks function into other smaller functions. Your newGame function is a very good example of this. It contains a list of semantic function invocations. Its very easy to read and understand that newGame resets any current running game, creates a new random pattern, and then plays the pattern. It does this without any explicit comments because the code itself is semantic enough.

function newGame() {
      resetGame();
      randomPattern();
      playPattern();
    }

Try to think about how large blocks of code could be broken into smaller sections that still have meaning. Here's one way you could condense buttonClicks by extracting parts of it into new funtions:

function processCorrectClick(matchedColor){
  pattern.push(matchedColor);
  //back to pattern array
  if (0 >= usedPattern.length) {
    stage++; //stages are increasing
    $("#stage").html("Stages: " + stage);
    $(".button").unbind();
    randomPattern();
    setTimeout(playPattern, 800);
  }
    document.getElementById("secondSound").play();
    //play sound when user clicked right square
}

function processBadClick(){
  //when game over, restart the game.
  running = false;
  document.getElementById("wrongSound").play();
  //play sound when user clicked wrong square.
  $("h1").html("Game Over").css({
    fontSize: 20,
    marginBottom: 15,
    paddingTop: 40
  });
  $("p").html("Click here to Restart").css({
    fontSize: 10,
    paddingTop: 35
  });
  // clear pattern arrays
  pattern = [];
  usedPattern = [];
}

function buttonClicks() {
  $(".button").click(function() {
    // check if clicked square is right one
    let item = usedPattern.shift(); //remove first step from usedPattern array
    let buttonId = $(this).attr("id"); //return the value of an attribute.
    $(this).animate({
      opacity: ".5"
    }, 300).animate({
      opacity: 1.5
    }, 400)
    if (item == buttonId) { //when colors matched
      processCorrectClick(item);
    } else {
      processBadClick();
    }
  });
}

Start by reviewing simon.js lines 30-45 and 73-107, then read the pattern-generating functions, buttonClicks, and the check variable. Compare the suggested processCorrectClick and processBadClick structure with the existing code. Done means the indentation and naming are clearer and buttonClicks is broken into smaller semantic functions without changing the game's behavior.