Battleship

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

Live Preview

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

       

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

   • Project: Battleship
   • More Testing

2. YouTube

   • Web Dev Simplified(How To Build A Battleship Clone)
   • Vsauce 2(The Battleship Algorithm)

3. Jest

   • Documentation
   • Matchers
   • Using Babel with Jest
   • Using Webpack with Jest
   • Setup and Teardown
   • Mock Functions

4. Design Inspiration

   • Dribbble(Phil Goodwin)

5. Webpack

   • Getting Started

6. Others

   • Play Battleship Game
   • What are Pure Functions
   • Measuring Software Quality
   • Too Much Mocking is Bad
   • Nick Berry(Inspiration)

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

🚢 🎯 🎆