2048 - Live Site
2048 is a game site aimed at those that like a mathmatical challenge, looking to put their strategy and numeric skills to the test.
The purpose of the site is to host the 2048 game created in JavaScript, and provide access to a mathmatical and strategic game. The purpose of the game is to provide mental stimulation and entertainment to the players.
The main aim of this project was to create a simple, and entertaining game that challenges players to think strategicly.
- User is able to interact with the game in multiple ways.
- User is able to access the game from any web browser.
- User is able to play the game on any screen size.
- User is able to save their username.
- User is able to see past game scores.
- User is able to see a brief overview of their game results.
- Welcome Screen
- This feature is found on the initial landing page of the site, and provides the user with an inistial starting place.
- Username Input and Display
- The combination username input and display can be found on the initial landing page of the site.
- This feature allows the user to store their scores under their own username.
- This feature also shows the username the user previously entered.
- LocalStorage Usage Confirmation
- This feature is found on the initial landing page, and allows the user to control the usage of localStorage.
- Error Feedback
- This feature is located on the initial landing page.
- The purpose of this feature is to display errors that need to be resolved before proceeding to the game.
- Play Button
- This feature is located on the initial landing page.
- The purpose of this feature is to all the user to start the game from the initial landing page.
- Input Reset
- This feature is located on the initial landing page.
- The purpose of this feature is to allow the user to reset their username and localStorage confirmation.
- Page Buttons
- This feature is located on the main page.
- The purpose of this feature is to allow the user to open the instructions and score history pages.
- Instructions Page
- This feature is located on the main page.
- The purpose of this feature is to provide users with information relating to how to play the game.
- This feature also provides the user with information about the navigation of the site.
- History Page
- This feature is located on the main page.
- The purpose of this feature is to provide the user with information relating to the players previous scores.
- This feature also shows the user a line graph of their previous scores.
- Scrolling Tips
- This feature is located on the main page.
- The purpose of this feature is to provide users with tips and tricks to help them with the game, or navigating the site.
- On-Screen Controls
- This feature is located on the main page.
- The purpose of this feature is to provide the user with an on-screen method of interacting with the game.
- This feature allows user's on mobile devices to play the game.
-
Keyboard Controls
- This feature is a non-visable feature of the site.
- The purpose of this feature is to provide a more enjoyable method of interacting with the game.
- This feature also allows the user to navigate the site with simple shortcuts.
-
Game Screen
- This feature is located on the main page.
- This feature is the main game for the site.
- Current Score
- This feature is located on the main page.
- The purpose of this feature is to show the players current game score.
- Game Results Page
- This feature is located on the main page after the game ends.
- The purpose of this feature is to provide the user with information relating to the game they just finished.
- Game Reset
- This feature is located on the main page after the game ends.
- The purose of this feature is to provide the user with a method of resetting the game to play again.
- HTML
- CSS
- JavaScript
- Google Fonts
- Font's used for site:
- Pacific
- Bubbles
- Font's used for site:
- Font Awesome
- Icon's used across the site:
- Up Arrow
- Left Arrow
- Right Arrow
- Down Arrow
- Information Symbol
- History Symbol
- Close Symbol
- Icon's used across the site:
- Icon Archive
- Icons used for this site:
- 2048 Favicon
- Icons used for this site:
- GitHub
- Used for version control, hosting and deployment
- Visual Studio Code
- IDE used for development of site
- W3Schools
- Used for discovering specific element properties
- Stack Overflow
- Used for discovering specific element properties
- MDN Web Docs
- User for discovering JavaScript specific functions, features and properties
Summary:
- Desktop:
- The index page has a performance score of 99.
- The index page has a accessibility score of 100.
- The index page has a best practice score of 100.
- The index page has an SEO score of 100.
- Mobile:
- The index page has a performance score of 98.
- The index page has a accessibility score of 100.
- The index page has a best practice score of 93.
- Improved by obtaining higher resolution logo image.
- The index page has an SEO score of 100.
Summary:
All HTML, CSS and JavaScript pages passed validators with no errors.
- HTML
- index.html returned no errors.
- index.html returned one warning - Section lacks heading - Controls-Section
- W3C Validator Results
- CSS
- style.css returned no errors.
- style.css returned no warnings.
- W3C Validator Results
- JavaScript
- index.js returned no errors.
- index.js returned four warnings, all for google charts.
Summary:
During the development of this site, and upon completion, a range of different manual tests were carried out to confirm no bugs or issues remained. These tests were carried out on a range of different simulated and physical devices, on a range of different browsers. All tests carried out: PASSED
Devices Tested
Simulated devices tested using Chrome DevTools
- Physical Devices
- Desktop PC (Windows 10)
- Macbook Pro (OSX)
- Samsung Galaxy S10+ (Android)
- iPhone 11 (IOS)
- Kindle Fire Tablet (FireOS)
- Simulated Devices
- Moto G4
- Nexus 10
- Pixel 2
- Pixel 2 XL
- iPhone 5/SE
- iPhone 6/7/8
- iPhone 6/7/8 Plus
- iPhone X
- iPad
- iPad Pro
- Surface Duo
- Nest Hub
- Nest Hub Max
Browsers Tested
- Chrome
- Edge
- Firefox
- Opera
- Safari
- Silk Browser
View Tests
Functional Tests
- Username Input
- Check if existing username is pre-filled.
- Check if user can enter text.
- Local Storage Confirmation
- Check if existing state is pre-filled.
- Check if user input is accepted.
- Error Message Dispaly
- Check if error message is displayed.
- Check if correct error message is displayed.
- Play Now Button
- Check if game screen is loaded.
- Check if user input is correctly validated.
- Check if keyboard input is accepted.
- Reset Button
- Check if inputs are cleared.
- Check if localStorage has been cleared.
- Instructions Button
- Check if instructions page is opened.
- Check if close button is displayed.
- Score History Button
- Check if score history page is opened.
- Check if close button is displayed.
- Score History Page
- Check if newest score is displayed.
- Check if best score is displayed.
- Check if Google Chart is loaded correctly.
- Check if all scores are displayed in the correct order.
- Check if all scores are formatted correctly.
- Close Page Button
- Check if close page button closes instructions page.
- Check if close page button closes score history page.
- Current Score
- Check if current score is updated with current top score.
- 2048 Game
- Check if game is loaded correctly.
- Check if tiles are loaded correctly.
- Check if all game inputs are accepted.
- Check if game movements are succssefully carried out.
- Check if tiles combine properly.
- Check if tiles change color correctly.
- Check if game ends on no more possible moves.
- Check if game ends on game winning score reached.
- Check if game results are displayed on game end.
- Game results
- Check if correct winner or loser status is displayed.
- Check if correct information is loaded from history.
- Check if information loaded from history is formatted correctly.
- Check if new game details are added to localStorage.
- Play Again Button
- Check if play again button restarts game.
- Check if keyboard input is accepted to restart game.
- Check if current score is correctly reset.
- On-Screen Controls
- Check if clicking inputs complete corresponding game movements.
- Tips
- Check if tips scroll from right to left.
- Check if tips scroll at correct speed.
- Check if tips change to the next tip correctly.
View Responsiveness Tests
- Site Header
- Check if header stays the same size reletive to the screen height.
- Check if the content is centered on the page.
- Check if header shrinks on smaller screens.
- Site Logos
- Check if logos have the correct spacing in the header.
- Check if the logos resize to fit the header.
- Welcome Heading
- Check if heading sizes properly to fit window.
- Instructions/Score History Buttons
- Check if buttons shrink on smaller screens.
- 2048 Game
- Check if game sizes correctly based on screen size.
- On-Screen Controls
- Check if controls are sized correctly based on screen size.
- Tips
- Check if tips speed is adjusted based on window width.
- There are currently no known errors or issues.
The development of this site has been done so in the "main" branch. This branch has been deployed using GitHub Pages, with the live site being the most recent commit in this branch.
This site was deployed by completing the following steps:
- Opened GitHub and opened the "2048" repository.
- Navigated to the "Settings" page of the repository.
- Navigated to the "Pages" page of the repository.
- Selected the "main" branch and selected "Save" to save as the deployed branch.
- The link to the live deployed site was then presented.
- W3Schools
- Used for discovering specific element properties
- Stack Overflow
- Used for discovering specific element properties
- MDN Web Docs
- User for discovering JavaScript specific functions, features and properties
- PNGWing
- Provided game and site logo
- Icon Archive
- Provided site favicon