Skip to content
/ treasurehunt Public template

The template repo for LEARN Academy's Treasure Hunt project in React

Notifications You must be signed in to change notification settings

LEARNAcademy/treasurehunt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

๐Ÿ’ฐ React Treasure Hunt Game

Overview

Treasure Hunt is the first project that students create at LEARN. During Jumpstart, treasure hunt is done with HTML, CSS, and JavaScript. While this is a perfectly acceptable tech stack, using React allows for more advanced and dynamic code structures.

As a developer, you are tasked with creating a treasure hunt game. The user will see a game board on the page and be able to select various squares on the board. Hidden behind one square is a treasure that will win the game and hidden behind another square is a bomb that will lose the game. All other squares will reveal a neutral image. The user will be given a particular number of clicks to find the treasure that will win the game.

Learning Objectives

  • can create a logic component to handle the game play
  • can pass data and behavior from a container component to a nested component with props
  • can break down a complex problem to create a desired outcome

Additional Resources

Process

  • One person on the team accepts the group assignment from GitHub classroom
  • Create a team name (team name can be whatever you would like as long as it is work-appropriate)
  • Clone the newly created repository
  • cd into the repository
  • Run $ yarn to install the React dependencies
  • Create a new branch following the naming instructions described below
  • Open the repository in a text editor
  • Code!

Useful Commands

  • $ yarn start
  • control + c (stops the server)
  • command + t (opens a new terminal tab)

Troubleshooting Tips

  • Did you run $ yarn in the new repository?
  • Is your server running?
  • Are your components exported?
  • Inspect the page and look for errors in the console tab.
  • Always look at the first error message in the list.

๐Ÿ’ฐ React Treasure Hunt Challenge

As a developer, you are tasked with creating a treasure hunt game. The user will see a game board on the page and be able to select various squares on the board. Hidden behind one square is a treasure that will win the game, and hidden behind another square is a bomb that will lose the game. All other squares will reveal a neutral image. The user will be given a particular number of clicks to find the treasure that will win the game.

๐Ÿ“š User Stories

Story 1: In order to play the treasure hunt game, as the user of the application, I should see a three-by-three board game with a question mark in each square that can be clicked.

Branch: game-structure

Acceptance Criteria

  • Can see a page with a three-by-three grid board game
  • Can see a question mark in each square
  • Can click on any of the question marks and see an alert with the index position of that question mark in the array
  • Can click on any of the question marks and a tree emoji appears instead of the alert

Story 2: In order to play the treasure hunt game, as the user of the application, I should be able to see a winning square and a losing square.

Branch: win-lose

Acceptance Criteria

  • Can select the random winning square and the question mark will become a treasure emoji
  • Can select the random losing square and the question mark will become a bomb emoji

Story 3: In order to play the treasure hunt game, as the user of the application, I should be able to restart the game at any time.

Branch: restart

  • Can see a button called โ€œPlay Againโ€
  • Can click on the โ€œPlay Againโ€ button to reset the board game

Story 4: In order to play the treasure hunt game, as the user of the application, I should see a counter that starts at five and decrements by one every time I click on a square that is neither the treasure nor the bomb.

Branch: counter

Acceptance Criteria

  • Can see a counter that starts at five
  • Can see the counter decrement by one for each guess

Story 5: In order to play the treasure hunt game, as the user of the application, I should be notified when I win the game or when I lose the game and not be able to keep playing.

Branch: end-of-game

  • Can see a message stating that I won the game after selecting the square that contains the treasure
  • Can see a message stating that I won the game after selecting the square that contains the bomb
  • Can see a message stating that I won the game after the counter reaches zero
  • Cannot continue the game play once the game has been won or lost

๐Ÿ” Stretch Challenges

  • Consider how to handle a situation where the bomb and the treasure are at the same index.

๐Ÿ‘ฉโ€๐Ÿ’ป Developer Stretch Goals

  • As a developer, I have a well commented application.
  • As a developer, I have well written README file with instructions on how to access my repository.
  • As a developer, my variables are all named semantically.
  • As a developer, I have refactored and efficient code.
  • As a developer, I have my application deployed as a live website.