Probably another Battleship board on Code Pen

Photo courtesy of Flickr user drtran.

If you want to see the previous Code Pen I did, check out A 💩 Notification Code Pen.

Continuing along with my 2018 Resolutions to make Code Pens this year, here is my latest.

As mentioned previously, one of the reasons I wanted to start making Code Pens was to see how much I can do without the help of JS. In this example, Javascript is only used to build the markup for the board because I was too lazy to make it all by hand. There’s also a small function to simulate a game move as a miss/hit.

I’ve been doing @wesbos’s awesome CSS Grid course, so I thought it would be fun to use these new skills to recreate a classic board game, Battleship. I’m sure there are probably tonnes of these on Code Pen, but honestly, I don’t care. It was just fun making it. There’s some tweaking to do still (centering of game pieces is off when I look at it on mobile), but so far, I’m happy with it.

Maybe at some point, I’ll make the full game, but for now, a board with some simulated hits and misses.

I’ll end with some cheese, “You sank my battleship!”.