My twins (Nishanth & Nakshtra) are now almost 7. They are super keen to learn how computers work. So the other day, I showed them Code.org where there are several coding exercises disguised as games. They loved those games … err coding exercises. So that got me thinking… why not make a game in Excel that teaches kids simple programming concepts.
Here is the version 1.0 of Snowman & Hot Chocolate Maze game:
In this post, let’s understand how to build such a game using Excel VBA.
This maze game is inspired from the Angry Birds coding game at Code.org
The idea is simple. We create a 16×16 grid in Excel. We position a snowman at a certain point in the grid. We place a cup of hot chocolate at another point. The goal is to make snowman reach hot chocolate with a series of commands. Of course there will be obstacles (walls).
Typical Blank Maze with Snowman & Hot Chocolate loaded.
Since kids will be playing this, we need considerable variety of mazes. So let’s assume that,
- There can be any number of mazes, one per spreadsheet.
- Each maze can have a different design, different starting & ending positions.
- Each maze can also have its own images (ie Rabbit & carrot in one maze, Kid and ice cream in another etc.)
- Making new mazes should be easy. You can copy a worksheet, paste it, change the settings and all the code should work just the same.
There are two components in this game.
- The front end – ie what players see
- The back end – ie our VBA code
Designing the front end
Here is the basic layout of our maze front end.
We will create sheet specific named ranges for,
- grid for the maze
- settings for the settings
- code.start for the first cell of the code
Displaying the symbols:
We can use the Segoe UI Emoji font. This font is part of all modern versions of Windows. This has a fine collection of various emojis that you see everywhere nowadays. The Emoji hex codes are,
- 26C4 for Snowman
- 2615 for hot chocolate
- 2603 for Snowman with snow flakes
You can find more such emojis. Just go to Insert > Symbol and switch the font to Segoe UI Emoji font.
Note: download Segoe UI Emoji font if you don’t have it.
Adding the obstacles:
You (ie the parent) can write o in any cell inside the maze to build an obstacle there. So once a new maze is cloned (ie a new worksheet is copy pasted), simply create a maze layout by typing o into various cells.
Pro tip: Just select the maze layout you want with CTRL+Select option and the type o in any cell and press CTRL+Enter to get o in all cells.
All these os will be displayed as walls thru conditional formatting.
Designing the VBA back end
There are two parts to our VBA code.
- Setup the maze
- Solve the maze
Setting up the maze
The logic for this is simple.
- Clear the grid contents, except when the cell has “o”
- Set up snowman at starting position
- Set up hot chocolate at ending position
Here is the code for Maze setup.
Private Sub setupGameSheet(name As String) 'set up game sheet given by name Dim grid As Range, settings As Range, code As Range, cell As Range With Sheets(name) Set grid = Range("grid") Set settings = Range("settings") Set code = Range("code.start") For Each cell In grid If cell.Value2 <> "o" Then cell.ClearContents Next cell grid.Cells(settings.Cells(1, 1), settings.Cells(1, 2)) = settings.Cells(1, 3) grid.Cells(settings.Cells(2, 1), settings.Cells(2, 2)) = settings.Cells(2, 3) Set grid = Nothing Set settings = Nothing Set code = Nothing End With End Sub
Solving the maze
This is where things get tricky.
Simplified algorithm for this goes like,
- For each line of the code
- Check the first character of the code.
- If L, go left
- If R, go right
- If U, go up
- If D, go down
- by the number of steps indicated after first letter.
- If the new position falls outside grid
- If so, display an error and end macro
- If the new position leads in to an obstacle
- display an error and end macro
- Print a snow man along the pathway
- If snow man reaches ending position
- Print snow man with snow flakes. End macro
- Continue to next line of code
- If at end of all code, the snow man still not at ending point
- Display an error message
Here is the code for this:
Private Sub runCode(name As String) 'runs the code in sheet given by name setup Dim code As Range, settings As Range, grid As Range, steps As Integer Dim newx As Integer, newy As Integer, symbol As String, done As Boolean Dim endx As Integer, endy As Integer, oldx As Integer, oldy As Integer Set grid = Sheets(name).Range("grid") Set settings = Sheets(name).Range("settings") Set code = Sheets(name).Range("code.start") newx = settings.Cells(1, 2) newy = settings.Cells(1, 1) symbol = settings.Cells(1, 3) done = False endx = settings.Cells(2, 2) endy = settings.Cells(2, 1) While (Len(code) > 0 And Not done) oldx = newx oldy = newy steps = getNumber(code.Value2) Select Case UCase(Left(code, 1)) Case "L" newx = newx - steps Case "R" newx = newx + steps Case "U" newy = newy - steps Case "D" newy = newy + steps Case Else End Select 'check the boundary If newx < 0 Or newy < 0 Or newx > 16 Or newy > 16 Then MsgBox "Don't leave the box!", vbCritical + vbOKonlym, "Hold it there tiger..." done = True 'check for obstacles ElseIf hasObstacles(Range(grid.Cells(oldy, oldx), grid.Cells(newy, newx))) Then MsgBox "Cant move there!", vbCritical + vbOKOnly, "Oo ooh! The snow man hit an obstacle" done = True Else Range(grid.Cells(oldy, oldx), grid.Cells(newy, newx)) = symbol If newx = endx And newy = endy Then done = True grid.Cells(newy, newx) = ChrW(doneSymbol) End If End If killTime Set code = code.Offset(1) Wend If Not done Then MsgBox "Your snowman is thirsty, fetch him the hot chocolate", vbCritical + vbOKOnly, "Try Again" End If Set grid = Nothing Set settings = Nothing Set code = Nothing End Sub
To keep the code clean, I have created two functions and one sub. They are here.
Const doneSymbol = &H2603 Const speed = 900 'change this to speedup / slowdown the game Function getNumber(ByVal fromThis As Variant) As Integer 'extract the number after first character 'return 1 incase of error getNumber = 1 On Error Resume Next getNumber = CInt(Mid(fromThis, 2)) End Function Sub killTime() Dim i As Long For i = 1 To speed DoEvents Next i End Sub Function hasObstacles(thisRange As Range) As Boolean Dim cell As Range For Each cell In thisRange hasObstacles = hasObstacles Or cell.Value = "o" If hasObstacles Then Exit Function Next cell End Function
Linking front end & VBA
Now that our UI & Code are ready, let’s link them up.
We set up two buttons on the worksheet (using rounded rectangle shapes), one for setup and other for running.
We write two simple macros and assign them to the buttons.
Sub setup() setupGameSheet ActiveSheet.name End Sub Sub run() runCode ActiveSheet.name End Sub
And our game is ready.
Let’s roll, the snowman is thirsty.
Download the Maze Coding Game
Go ahead and download the game workbook here. Examine the code to learn more. Ask your kids to play for some fun. The workbook contains 3 mazes. Feel free to add more.
How to extend this game?
Here are few ways to extend the game.
- Add special point cells to the grid. When snowman passes thru these cells, score goes up.
- Add a special power cell. If snowman reaches this cell, he gains the ability break obstacles.
- Play sounds for jumps, points and breaks.
How do you like this?
My kids loved the idea. At the same time, they don’t want to play more than 2 puzzles at a time. I think they are attracted to Oggy and the cockroaches more than programming for now.
What about you? Do you find such games useful to teach programming and a love of computers to your kids. Let me know your experience once trying this.
Learn how to code yourself
Not just kids, anyone can benefit by learning how to program. So if you are new to coding, check out our five part tutorial on VBA.