Giter VIP home page Giter VIP logo

2048-1's Introduction

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.

AmIResponsive-01 AmIResponsive-02

Table Of Contents

User Goals

General User Goals

  • 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.

Existing User Goals

  • 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.

Features

Existing Features

  • Welcome Screen
    • This feature is found on the initial landing page of the site, and provides the user with an inistial starting place.

Welcome Screen

  • 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.

Username Input and Display

  • LocalStorage Usage Confirmation
    • This feature is found on the initial landing page, and allows the user to control the usage of localStorage.

LocalStorage Usage Confirmation

  • 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.

Error Feedback

  • 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.

Play Button

  • 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.

Input Reset

  • 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.

Page Buttons

  • 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.

Instructions Page

  • 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.

Score History Page

  • 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.

Scrolling Tips

  • 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.

On-Screen Controls

  • 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.

Game Screen

  • Current Score
    • This feature is located on the main page.
    • The purpose of this feature is to show the players current game score.

Current 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 Results Page

  • 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.

Game Reset

Technologies Used

Languages

  • HTML
  • CSS
  • JavaScript

Stylings/Theme

  • Google Fonts
    • Font's used for site:
      • Pacific
      • Bubbles
  • Font Awesome
    • Icon's used across the site:
      • Up Arrow
      • Left Arrow
      • Right Arrow
      • Down Arrow
      • Information Symbol
      • History Symbol
      • Close Symbol
  • Icon Archive
    • Icons used for this site:
      • 2048 Favicon

Project Management

Learning/Information Resources

  • 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

Testing

Automated Testing

Chrome DevTools - Lighthouse Report

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.

Chrome Devtools - Lighthouse Desktop Mode

  • 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.

Chrome Devtools - Lighthouse Desktop Mode

Validator Testing

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
  • JavaScript
    • index.js returned no errors.
    • index.js returned four warnings, all for google charts.

Manual Testing

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.

Unfixed Bugs

  • There are currently no known errors or issues.

Deployment

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:

  1. Opened GitHub and opened the "2048" repository.
  2. Navigated to the "Settings" page of the repository.
  3. Navigated to the "Pages" page of the repository.
  4. Selected the "main" branch and selected "Save" to save as the deployed branch.
  5. The link to the live deployed site was then presented.

Live Site

Credits

Information Sources/Resources

  • 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

Content

2048-1's People

Contributors

lukebinmore 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.