Responsive Hangman Game App

Community feedback

• 

  Sara Dunlop•450

  @Risclover

  Posted 6 months ago

  Hey Victor! Some things you might want to consider figuring out when you refactor in the future that I noticed while testing your solution:

  • You're lacking spaces in between words. As you have it now, there are no spaces, which smooshes the words together, making it look like one word. For example, Orange is the new black looks like orangeis thenew black or orangeisthe newblack, depending on the screen size.
  • As we discussed over in my solution, you're not supposed to reveal the letters like you're doing in a traditional game of Hangman. I think you're making it way too easy on the player by doing that, and you're taking away half of their game lol 😊
  • When the player tries to guess an incorrect letter, although the 'lives' meter goes down like it should, the letter doesn't get disabled to indicate that the user has already guessed that letter. The only time the letters get disabled are when the player guesses a letter correctly, so the player is able to guess a letter incorrectly multiple times, which shouldn't be the case.
  • It looks like your lives meter might contain an extra life, I think? The meter goes down to 0 and then on the NEXT guess, the game ends. It should end right when the meter hits 0, not the turn after.

  Overall, nothing too big. Good job.

  02

  Marked as helpful
• 

  Tsotne Meladze•1,120

  @tsotneforester

  Posted 2 months ago

  You are smart guy! at first I also intended to export how to play, pick a category and etc... as ** .svg** files, but then I could somehow (AI helped a lot) manage to create componenet that renders that texts correctly. here is css code:

  h1 {
  line-height: 120%;
    text-align: center;
    background: linear-gradient(180deg, #67b6ff 16.42%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    position: relative;
  
    &:before,
    &:after {
      content: 'Pause';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      line-height: 120%;
      text-align: center;
      background: linear-gradient(180deg, #67b6ff 16.42%, #ffffff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  
    &:before {
      z-index: 1;
      -webkit-text-stroke: 10px #2c3342;
    }
  
    &:after {
      z-index: 2;
    }
  }
  

  01