The main aim of this project is to create an application on the theme "NoNo Game" using modern web development approached based on JavaScript. Technologies were used: HTML5, SCSS, Bootstrap theme, JS Framework React.
Application runs on Heroku cloud hosting. - https://mkriventsev-kaj-sem.herokuapp.com/
More information about Nonogram game - [https://en.wikipedia.org/wiki/Nonogram]
Below the main pages and functionality will be described
- The Home page contains interactive, drawn using SVG nonogram board in form of logo.
- There are 4 buttons there:
- New game
- Statistics
- Settings
- Feedback
This is the page where user can play the game. There are 2 stages of game initiation.
- Choosing game level and complexity (size)
- Playing the game after level was chosen
On this first stage user have to choose one of the board sizes (5x5, 10x10, 15x15), and level. After that user can start the game.
On the game page user see the play board with rows numbers, columns cumbers and greed. Below the board there are 3 buttons:
- Start Over - reset current level
- Change Mode - user can fill the cells with fill ■ and guess X modes.
- Seect Level - user will be redirected to first stage of game, where he can select size and level.
On the side is a button that allows you to control the music. User can turn on / off background music.
Above the board the timer is located. After finishing the game final time will be stored.
After the level is finished the modal form with congratulations will be shown and user can go to next level (or back to select level stage in case the level was last in the size).
On statistic page user can see his own statistic of the game. How successfully he solved the levels, best, worst and average times.
Clicking on the button with trash bin user can erase statistics for each level.
On settings page user can manage game settings such as:
- Music preferences
- Sound effects preferences Also, below the settings the short game instructions with short video are located.
Music: https://www.chosic.com
Yugen - Emotional Ethnic Music by Keys of Moon | https://soundcloud.com/keysofmoon
Attribution 4.0 International (CC BY 4.0)
https://creativecommons.org/licenses/by/4.0/
Music promoted by https://www.chosic.com/
Mirage by Hayden Folker | https://soundcloud.com/hayden-folker
Music promoted by https://www.chosic.com
Creative Commons Attribution 3.0 Unported License
https://creativecommons.org/licenses/by/3.0/deed.en_US
- Switch on/off the music which is playing during the game
- Change music volume level
- Select one from 5 suggested music themes (Africa, Japan, Water, Forest, Asia)
- Switch on/off the sound effects
- Change effect volume level
On the feedback page user can fill the feedback form.
By clicking on Submit button the user's default email client will be opened with message which will be prefilled with form values.
This project was bootstrapped with Create React App. Project's appearance was bootstrapped mainly from BootsWatch Sketchy
NoNoGame is Single-page application developed using React framesork.
For storing user preferences and statistics the Local Storage API was used
Audio accompaniment - playing audion uding JS
Interactive SVG logo on the main page
Regitered default Service Worker used for making the app running in offline mode,
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will be reloaded if you make edits.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.