The end function calls clearInterval to clear the timer and reset all the other states to the initial values.īelow that, we have the style tag to make the circle class have the border-radius properties to make a div become a circle. We call setTimer to set timer so that we call clearInterval on it later to end the game. Start calls setInterval to run the timer to set circleX and circleY every 2 seconds. Next, we define the onClick function to increase the score. Timer has the timer that’s run to let us set circleX and circleY to random numbers to let us display the circle at random locations. We have the score, circleX, circleY and timer states.ĬircleX and circleY has the x and y coordinates of the top left corner of the circle. To create the click shape game, we write: import React,
#Clicky game react install#
To install it, we run: npx create-react-app click-shape-game We can create the React project with Create React App.
#Clicky game react how to#
In this article, we’ll look at how to create a click shape game with React and JavaScript. If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs.React is an easy to use JavaScript framework that lets us create front end apps. To receive an 'A' on any assignment, you must link to it from your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. Here are some resources to help you along the way:Īfter completing the homework please add the piece to your portfolio. Here are some resources for creating your README.md. Then work on making the game interactive.Īdd a README.md to your repository describing the project. Begin by building a non-functioning static version for your Clicky Game.In addition, add this homework to your portfolio. Hosting on Github Pages and adding a README.md are required for this homework. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. See the README generated with Create React App for instructions on deploying the application to Github Pages.Īttempt to complete homework assignment as described in instructions. When complete, the application should be deployed to Github Pages. Once the user's score is reset after an incorrect guess, the game should restart. The user's score should be reset to 0 if they click the same image more than once.Įvery time an image is clicked, the images rendered to the page should shuffle themselves in a random order. The user's score should be incremented when clicking an image for the first time.
The application should keep track of the user's score. Each image should listen for click events. The application should render different images (of your choice) to the screen.
Clicky Game Overviewįor this assignment, you'll create a memory game with React. This project was bootstrapped with Create React App.
0 kommentar(er)
