Giter VIP home page Giter VIP logo

game-match-star-count's Introduction

GAME: match the star count build with React

Mathe the star count is a small game that shows the player the number of stars and player must click on the available buttons to match the count. It allows to choose one number or sum two numbers to match the star count.

Features

  • Generates random number of sums
  • Allows user to select a button to match the star count
  • Allows user to select number of buttons to achieve a certain sum
  • Allows user to unmark wrong button or button selected in the the summing process
  • Shows 4 colours to the user:
    • grey for untouched buttons
    • green for correctly used buttons
    • red for button that is more than star count or is a added to the sum and the sum is more than the star count
    • blue for buttons that are being selected to form a sum of the star count
  • After the all buttons used
    • star generation is stopped
    • button reset Play Again is generated
  • Timer is rendered to track the game and starts with 10 second countdown

Bugs

  • Timer bug: when user clicks the timer stops the countdown [resolved"]

Process

  • iniatialises npm npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
  • configures webpack
  • installs dependencies and loaders npm i -D babel-loader style-loader css-loader @babel/core: the core babel library @babel/preset-env: allows us to target specific environments @babel/plugin-transform-runtime: if you get regenerator runtime errors you may have forgotten this one! @babel/plugin-proposal-class-properties: optional - recommended if you will be using ES6 class syntax @babel/preset-react: only add if creating an app that uses React
  • add .babelrc file
  • creates entry html
  • initializes app entry point
  • adds run scripts

Technology

  • React
  • React-dom
  • Babel

game-match-star-count's People

Contributors

gretaivan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.