Whack-a-mole
1
First, set the browser to Full Screen view, to give this worksheet and your code as much space as possible.
Then choose either one of the two options below:
Option 1: Start this worksheet from scratch
- First
- Then .
- All answers that you subsequently enter/edit will be auto-saved to this sheet.
Option 2: Continue, or view, previous work
- All answers that you subsequently enter/edit will be auto-saved to this sheet.
- The first time you re-load an answers sheet - within a single session on Elan - you will be asked to confirm that you understand this.
This worksheet is copyright © Richard Pawson 2025, and protected by the Creative Commons license:
Attribution-NonCommercial-NoDerivatives 4.0 International.
You may freely make and distribute copies of this worksheet as is, but if you modify this worksheet you may not distribute your modified version (outside your own teaching institution) without the author's permission.
Please email the author to report errors or suggest improvements.
Step 1: Introduction
Notes
Total hints used: /Step 2: Load and exploring the starting code
# 5df28caa31662998d0b574c82171762c4927486273db2969eca08f3d7e98223c Elan 2.0.0-alpha valid
main
variable score set to 0
while true
variable hole set to Hole.vacant
if random() > 0.5 then
set hole to Hole.mole
end if
variable html set to htmlForSimpleGame(hole, score)
call displayHtml(html)
variable stop set to clock() + 1000
while clock() < stop
call processKey(hole, score)
end while
end while
end main
procedure processKey(out hole as Hole, out score as Int)
variable n set to getNumericKey()
if n isnt -1 then
if hole is Hole.mole then
set hole to Hole.hit
set score to score + 1
elif hole is Hole.vacant then
set hole to Hole.miss
set score to score - 1
end if
variable html set to htmlForSimpleGame(hole, score)
call displayHtml(html)
end if
end procedure
enum Hole vacant, mole, hit, miss
function htmlForSimpleGame(hole as Hole, score as Int) returns String
variable core set to htmlForHole(hole, "hole")
return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>"
end function
function htmlForFullGame(holes as Array<of Hole>, score as Int) returns String
variable core set to ""
for i in range(0, holes.length())
set core to core + htmlForHole(holes[i], i.toString())
end for
return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>"
end function
function htmlForHole(hole as Hole, label as String) returns String
variable img set to imageForStatus[hole]
return $"<div class='hole'><img src='{img}'><div class='label'>{label}</div></div>"
end function
# Acknowledgement: mole icon source https://www.flaticon.com/
constant vacantImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/vacant.png"
constant moleImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/mole.png"
constant hitImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/hit.png"
constant missImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/miss.png"
constant imageForStatus set to {Hole.vacant:vacantImg, Hole.mole:moleImg, Hole.hit:hitImg, Hole.miss:missImg}
constant styleSheet set to '\n.game { display: flex; flex-direction: row; }\n.hole { display: flex; flex-direction: column; width: 50px; height: 50px; border: 10px solid white;}\n.label {width: 40px; text-align: center;}\n.hole img {height: 40px; width: 40px}\n.score{ margin-top: 20px;}'
,
watch the following video, exploring the code alongside the video:
What is the largest and smallest result returned by the random() method?
Notes
Total hints used: /Step 3: creating an Array
Having made the changes shown in the video and run the program, describe what the display shows?
Do any moles appear?
Notes
Total hints used: /Step 4: making moles appear again
Having made the changes the mole should now pop up in different holes. But ...What happens when you press a key?
Notes
Total hints used: /Step 5: responding to the keyboard input
Make the changes shown in the video and then run the program - to show that you can now hit (and also miss!) the moles. If you find that the moles change too quickly to hit, change the speed by editing this line:let stop be clock() + 1000
Code does not parse as Elan.
let stop be clock() + 1000
Code does not parse as Elan.
let stop be clock() + 1000
Code does not parse as Elan.
let stop be clock() + 1000
Code does not parse as Elan.
let stop be clock() + 1000
Code does not parse as Elan.
What is the main difference between how this game works and the one shown in the introductory video at the start of this worksheet?
Notes
Total hints used: /Step 6: making multiple moles appear
Complete the changes shown in the video and confirm that 1, 2, or 3 moles appear at a time.Notes
Total hints used: /Step 7: review what we have learned
How can you select multiple instructions in the Elan editor?
What does 'DRY' stand for in 'the DRY principle'?
What is an 'enum' ?
What is 'dead code' within a program?
When should you use a 'for' loop?
What, in general terms, does an Array allow you to do?
How can you select multiple instructions in the Elan editor?
An Array is a simple example of a more general concept, called what?
What pieces of information must you specify when defining an Array?
If you created an array of just five elements, what would be the element numbers of the first, and last, elements?
What would be the syntax for reading the first element of an array named 'players'?
What instruction is used to change a specific element within an existing array?
Notes
Total hints used: /Congratulations! You have completed this worksheet
If you have time available, there are two optional activities:
Continue to refine the game
Here are some ways that you might like to refine the game
- At the start of the program allow the user to select a level of play - say as a number in the range 1-5.
(Look up the library method
inputIntBetween in the Help tab show in Help.) Use this number in a formula to alter the time specified in this instruction:let stop be clock() + 1000 - Keep track of how many moles have actually appeared, and display this as well as the score.
- Award a bonus point if, whenever three moles are shown at once, you hit all three before they disappear.
# cce653dc3a5173ba91d288ce4be9137ac2723eb2245c236e8169e34c80d96d75 Elan 2.0.0-alpha valid
main
variable score set to 0
while true
variable holes set to new List<of Hole>()
call holes.intialise(10, Hole.vacant)
variable hole set to Hole.vacant
variable numberOfMoles set to randint(1, 3)
for count in range(1, numberOfMoles + 1)
variable holeNumber set to randint(0, 9)
set holes[holeNumber] to Hole.mole
end for
variable html set to htmlForFullGame(holes, score)
call displayHtml(html)
variable stop set to clock() + 1000
while clock() < stop
call processKey(holes, score)
end while
end while
end main
procedure processKey(out holes as Array<of Hole>, out score as Int)
variable n set to getNumericKey()
if n isnt -1 then
if holes[n] is Hole.mole then
set holes[n] to Hole.hit
set score to score + 1
elif holes[n] is Hole.vacant then
set holes[n] to Hole.miss
set score to score - 1
end if
variable html set to htmlForFullGame(holes, score)
call displayHtml(html)
end if
end procedure
enum Hole vacant, mole, hit, miss
function htmlForSimpleGame(hole as Hole, score as Int) returns String
variable core set to htmlForHole(hole, "hole")
return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>"
end function
function htmlForFullGame(holes as Array<of Hole>, score as Int) returns String
variable core set to ""
for i in range(0, holes.length())
set core to core + htmlForHole(holes[i], i.toString())
end for
return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>"
end function
function htmlForHole(hole as Hole, label as String) returns String
variable img set to imageForStatus[hole]
return $"<div class='hole'><img src='{img}'><div class='label'>{label}</div></div>"
end function
# Acknowledgement: mole icon source https://www.flaticon.com/
constant vacantImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/vacant.png"
constant moleImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/mole.png"
constant hitImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/hit.png"
constant missImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/miss.png"
constant imageForStatus set to {Hole.vacant:vacantImg, Hole.mole:moleImg, Hole.hit:hitImg, Hole.miss:missImg}
constant styleSheet set to '\n.game { display: flex; flex-direction: row; }\n.hole { display: flex; flex-direction: column; width: 50px; height: 50px; border: 10px solid white;}\n.label {width: 40px; text-align: center;}\n.hole img {height: 40px; width: 40px}\n.score{ margin-top: 20px;}'
.
Important: You don't need
to understand the additional code shown in order to continue with further worksheets.
However, the following video does explain the additional code for those who might want to go deeper at this stage.