Battleship

Created an online version of the popular classic boardgame Battleship where a user can play against the computer.

Technologies

  • MERN stack (Mongo, Express, React, Node)
  • HTML
  • CSS
  • Bootstrap
  • JavaScript

Features

  • Event listeners and handlers
  • Document Object Model (DOM) manipulation
  • Asynchronous JavaScript with async and await
  • User information storage and password encryption - using Bcrypt
  • User sign up and log in functionality
  • Full CRUD functionality
  • RESTful API


battleship

Landing Page

Displays the instructions for how to use the site

battleship

Sign Up Page

battleship

Home Page

Default home page after login where user can start a new game

battleship

New Game Page

battleship

Ship Placement

Ships are displayed at the bottom of the new game page for a user to place them on their board and start playing the game

battleship

Game Play

Locations are marked as hit (H) or miss (M) when a user clicks or the computer attacks back. User's ships are indicated on their board by their first 2 letters