rgvegajr / clickygame

react based game

Home Page:https://rgvegajr.github.io/clickygame/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

(Note: this file is mark-down formatted to be read in a code-editor "preview" function or on github)

Welcome to the readme file for my react app: US Fighter ID Game!

This application is deployed on github pages at:

The github repository ca be found at:

Background/Purpose:

This reactjs application is intended to demonstrate a single-page, front-end application built with the reactjs library. The functional purpose of this application is to allow a user to view an array of 12 x US Fighter Aircraft, "click" on a fighter to learn its name/identification (ID), and win a point for each click that does not repeat. If the user clicks more than once on a particular fighter, the score resets to zero and the user is prompted to reset game and try again. A hi score is tracked through resets as long as the user does not refresh the page.

Technologies used:

This application uses the following technologies:

  1. Front-end: html5, Bootstrap 4 css, jquery.
  2. React js javascript library package. react, react-dom, react-scripts

My role:

I am the app developer. I used MS Visual Studio Code as my integrated development environment and Github for repository, version control, and github pages for deployment. Bootcamp instructors provided guidelines, instructions and requirements for this app.

App Organization:

The code is organized using react's baseline folders and structure. Components are established as folders with index.js and style.css files.

Instructions (These instructions assume user is familiar with GITHUB and node js and has installed node.js on a PC/Mac.):

  1. Access the web-application via the url provided above.
  2. View the 12 fighter images and click on one to ID it and add a point to your score. To make the game more challenging, the fighter images "shuffle" randomly so you should do your best to remember which fighters you have already clicked*.
  3. Continue clicking a new fighter and adding to your score until all 12 fighters have been clicked and ID'd without repeating. This will give you a score of 12.
  4. If you click a fighter more than once, your score will reset to 0. You can also click "eject" at any time to reset your score to 0 and attempt to better your score.
  5. *If you need help, use the console inspection function of your browser to view the clickedArray in the console which will show which fighters have been clicked.
  6. Whe you're done....EJECT, EJECT, EJECT!!

About

react based game

https://rgvegajr.github.io/clickygame/


Languages

Language:JavaScript 51.4%Language:HTML 30.4%Language:CSS 18.2%