loading...
Cover image for Probably another Battleship board on Code Pen

Probably another Battleship board on Code Pen

nickytonline profile image Nick Taylor (he/him) Updated on ・1 min read

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!".

Posted on by:

nickytonline profile

Nick Taylor (he/him)

@nickytonline

Senior software engineer at DEV/Forem. Caught the live coding bug on Twitch at livecoding.ca

Discussion

pic
Editor guide