SEI-Project-1

Timeframe

7 days

Technologies used

• JavaScript (ES6)
• HTML5
• CSS & SCSS
• git

Installation

1. Clone or download the repo
2. Open the index.html in your browser of choice

Overview

Link to live site https://leeofham.github.io/SEI-Project-1/

Introduction

Battleships is a game where you take turns with the computer to destroy each others ships.

Controls

This game is played solely using the mouse

Game Instructions

1. Click on the ships in the list on the left. Then choose whether you want the ship horizontal or vertical and then click the grid space where you want the ship to be placed. You can't lay out ships next to each other, this is shown by the dark grey border of squares around the ships.

2. Once you have laid all your ships, now the game is live.

3. Click the grid you want to fire at. If that grid is now on fire, you have hit part of the opponents ship. Search all grids around the hit grid square to find and destroy that ship

4. If the square now contains a X, you have missed.

5. The first to destroy all their opponents ships wins.

Process

I started off just building the grids and getting the click events to work. After a couple days of coding, it soon became apparent that the way I was doing things was very long. So I started out again and found it a lot easier.

Time management wise, I had finished the base game fairly quickly but starting again was quite annoying, as I had already invested approximately 15 hours into it. I also feel I could have managed my time better by not committing so much time to the computer firing mechanics and focussed on other things. Style wise the page is very minimalistic and to the point, but I feel it could have extra things.

Challenges

1. There was a lot of little challenges brought up by this project. However, the first main challenge was finding a way to lay the ships out with the zones around them. Both user and computer had to abide by these rules.

2. The second challenge which I didn't end up finishing was the computer firing logic. At the moment, shots are random but I wanted the computer when it hits one of your ships, to search the squares around it and when it finds the next hit, use that to work out the direction of the laid ship. Despite working on it, I couldn't iron out the bugs in time and had to resort to my backup plan of random shots.

Wins

The biggest win was completing the game with all the rules in place that I wanted except the computer firing mechanic. It's quite logic heavy with the no-go zones around the ships and the computer firing mechanics where it searches, so at first it was very daunting. I feel like this has solidified my understanding of arrays logic and also has helped me with how I break down problems into small steps.

Future features

I really want to add the computer firing mechanic and I would also like to add some animations to the grids. I am also not 100% set on the colour scheme and minimalistic theme to the page.