Skip to content

Latest commit

 

History

History
158 lines (109 loc) · 6.44 KB

README.md

File metadata and controls

158 lines (109 loc) · 6.44 KB

Battleship

A JavaScript game based on a classic "Battleship" game, implemented to practice Test Driven Development.

This is an image

This is an image

This project is created to practice Test Driven Development(TDD) in JavaScript by creating a Battleship game using Jest(JS Testing Framework). Babel and Webpack are also used in this project :cityscape: Feel free to reach me at Twitter 🥏

Technologies Used

javascript babel jest webpack npm

Includes the following features/components:

- Jest
- Babel Loader
- Webpack
- Test Driven Development(TDD)
- Source Maps
- Html Webpack Plugin
- Css/Asset Resource Loader

Usage

  1. Compile on your machine

    Run Dev Server (Port 5500)

    npm install
    
    
    npx webpack --watch //Clientside
    
    
    npm test // run tests
    
    
  2. Pre-Compiled(Easy to use)

    Just open index.html in dist folder

Steps I followed to complete this project

  1. Setup Environment Setup

    • Install NPM using npm init -y to skip questions.
    • Install Webpack using npm install webpack webpack-cli --save-dev.
    • Add a webpack.config.js file and setup project directory.
    • Run npx webpack --watch command to make sure webpack setup is successful.
    • Install Babel using npm install --save-dev babel-jest @babel/core @babel preset-env command. Configure Babel by creating a babel.config.js file.
    • Install Jest using npm install --save-dev jest command.
    • Create a sample test using Jest documentation. Configure Jest by adding "test": "jest" line to package.json file.
    • Run npm test command to make sure the mock test passes and everything is configured correctly so far(PASSED).
    • Use source maps.
    • Load Assets.
      • CSS
      • Images
    • Setup HtmlWebpackPlugin
      • Clean up the /dist folder
      • Setup template.html
      • Setup favicon
    • Update webpack.config.js file to finish environment setup.
    • Make sure it compiles the bundle successfully.
  2. Create Game Logic

    • Create DOM elements and cache them in DOMInterface module
    • Create ships.js module which contains shipModule factory function
      • ships() method - is an array of objects which include ship's name, length and it's direction
    • Create gameboard.js module which contains gameboard factory function
      • gameGrid() method - is an array of 100 elements
  3. Test Game Logic

    • Test ships.js module
      • Test shipsTestMethod() method in ships.test.js which should return array of objects
    • Test gameboard.js module
      • Test gridTest() method, it should return array of 100 elements
  4. Repeat Step 3 and 4

    • Make sure all tests pass.
  5. Create UI

    • Update template.html for any changes
    • Style HTML page(create style.css)
    • Add Images and Fonts
  6. Finish the game

    • Allow users to place their ships.
    • Implement drag/drop of ships.
    • Make game responsive.

Links to content that helped me with this project

  1. The Odin Project

  2. YouTube

  3. Jest

  4. Design Inspiration

  5. Webpack

  6. Others

Notes/Remarks

Future Changes/Fixes

  • Polish the intelligence of computer and allow it to place adjacent slots after getting a hit.

  • Create a 2 player option ->

    • Let users take turn by passing the device back and forth.
    • implement a pass device screen so players don't see each other's boards!
  • Reduce tight coupling of code in gameLogic.js and divide code into smaller modules.

  • Improve testing by reducing mocking.

  • Add a button to Auto-Place ships.

Quote

“It always seems impossible until it's done.”
— Nelson Mandela

🚢 🎯 🎆