Snippets That Recreate Board Games in the Virtual World

Board games are a favorite pastime for all ages. When you think about it, they were the original portable gaming systems. Take one over to a friend’s house or get the family together for a game night. You can play anywhere, anytime.

And their impact may be greater than you’d think. They’ve played a role in helping us develop decision-making skills and learning to follow the rules. So many basic life lessons, all wrapped up in something fun.

Here, we’ve put together a collection of online homages to some popular board games. Some are playable, some aren’t. But they all feature some compelling design and coding techniques that are worth a look. And if you happen to spend a few hours playing games, all the better!

Checkers, Anyone?

One of the simplest games is also among the most enjoyable. For this playable example, you’ll want to grab a friend (or try to outsmart yourself). As with the physical game, the red and black teams take turns. As you click on a checker, your options for moves are shaded on the board. Fans of Connect 4 will also want to check out a similar snippet.

Dynamic Chutes

Among the very first games I learned as a child was Chutes and Ladders. It’s incredibly basic and makes for a great introduction to playing games. Even better was that I got to pass along the tradition to my own child. Here, we have a dynamically-generated game board. Each time you refresh the page, the paths change.

Mancala

A two-player game that can be traced back to the 7th century, Mancala is one of the oldest on Earth. Surely, its earliest players never envisioned playing on a screen. But this interactive example allows you to do just that. Try to collect your opponents’ pieces and see who comes out on top.

That’ll be $1,000, Mr. Monopoly

Nothing teaches you about the benefits of a good investment quite like Monopoly. That feeling you get when an opponent lands on one of your properties – you know you have them right where you want them. This masterfully recreated game board was built with CSS Grid and looks exactly like the real thing. You can almost hear the dice rolling.

Jenga!

It takes a steady hand to play Jenga. One false move and your carefully-crafted tower goes to pieces. Frustrating, indeed. But there’s no pressure here. This Jenga-inspired loading animation simply puts together a tower using Vue.js. Sure, it comes apart at the end. But at least there aren’t little wooden logs all over the floor afterwards.

Top Tiles

Scrabble seems to be both universally loved and timeless. It also provides a great way to both learn and, ahem, invent words. As a tribute to the great game, here are some very detailed letter tiles. Notice the fine woodgrain textures. And, if you want to ensure that a word that you’re playing is valid, this simple dictionary will help.

You Sunk My Battleship

Back in the day, Battleship seemed almost high-tech. You had all of these little pieces and, if you were lucky, a board that made sounds (that really made things fun). There are a ton of Battleship-themed snippets out there. However, this one had a wonderful simplicity that lends itself to online play. Type in a letter/number position, click the arrow and find out if you’ve made a hit.

Risky Business

The game of “strategic conquest”, Risk takes a real time commitment to play – not to mention a smart strategy. It even inspired an episode of “Seinfeld”. The game’s complexity makes this snippet all the more impressive. Play against AI and see if you can rule the world.

Game On

Because board games have had an impact on our society, they also make for a terrific playground for developers. The simplest games allow you to test your working knowledge of CSS and JS. They provide you with a knowable and realistic end result to work towards.

As your knowledge grows, you can then move on to some of the more complex games and add in extras such as artificial intelligence. Regardless of your level, these games can help you sharpen your skills while having fun at the same time.