Introduction: Whack-a-Light! - When Moles Become Lights

Whack-a-Light! is an interactive and engaging game, inspired by the renowned whack-a-mole!, designed to captivate and sustain children's attention while promoting physical activity.

The game operates as a distributed system, comprising multiple modules dispersed across a vast area (approximately 300 sqm in this particular project). Each module consists of a light and a button, and the idea is to have one of the modules’ lights to turn on, prompting children to race and turn it off by pressing the corresponding button. The game is presented on an interactive board, portraying Flora, the main character, on a quest to discover special flowers to create a delightful fragrance.


From a practical perspective, this will be accomplished by connecting all the different units via Wi-Fi and managing them through a custom-designed user interface.


Arduino and Java code can be found at this Google Drive link

Attachments

Supplies

The needed materials for the projects, to create 10 lights, are the follwing:

  • 10x Arcade push-led buttons
  • 10x ESP8266 modules
  • 10x Single sided printed circuit board
  • 10x USB cables
  • 10x 5V transformers
  • some pins and cables to make connections
  • some coding skills (Arduino – Java – HTML/CSS/JS)
  • Wi-Fi

Step 1: Software - Arduino

All the Arduino code was written using the Arduino IDE from their website 

Arduino Download


The ESP8266 modules have mainly two goals:

  • Open a captive portal to allow the user to input WiFi credentials and server information.
  • Work as a client to connect to the server and manage the exchange of information.


The module attempts to connect to the previously stored and used WiFi network. If it fails to connect after 20 attempts, it opens a password-protected captive portal to set the credentials. The access point's name and password can be modified in the uploaded code. The designated web page can be accessed via browser at '192.168.4.1'.

Once all the necessary settings are configured, and the module successfully connects to the WiFi network, the light will blink three times.

The light will blink again to indicate successful connection to the server once the modules are connected.

Step 2: Software - Java

All the Java code was written using Visual Studio Code from their website 

VSCode Download


The Java code was developed based on this Guide, so it is suggested to review it before working with the provided code.

All the main functions of the code can be found in the following directory: \demo\src\main\java\com\example\messagingstompwebsocket. Additionally, all the resources such as audio files, images, and videos are located in the directory: \demo\src\main\resources\static. In the static folder, you will also find all the files related to the User Interface presented in Step 3.


The code folder is structured as follows:

  • Connections

This is the class that manages the connection with the flowers. It contains functions to open the Java server, check if the received connections are as expected, and handle the game-playing functions.

  • DemoApplication

Main class that runs all the game

  • Greeting
  • GreetingController
  • HelloMessage
  • ipgui

This class represents an initial version of a possible code improvement that introduces a first graphical user interface (GUI) for inserting the addresses of all the flowers.

  • MessagingStompWebsocketApplication
  • PlaySound

Function to manage Flora's vocal commands

  • socket_info
  • WebSocketConfig


The functions that were not described in detail are mainly taken from the aforementioned guide.

To run the game, it is necessary to modify the code with the desired number of flowers to connect and the corresponding IP addresses for both the security check and the flower colors.

Furthermore, the game was intended to be further developed to connect some spray diffusers to the server. Most of the code required for this purpose is already included in the Google Drive link.

Step 3: GUI

Files for the GUI can be found in the \demo\src\main\resources\static folder.


The interface was designed to provide a clean and distraction-free experience, specifically tailored for children.

The main features of the interface include:

  1. A button to enter and exit full-screen mode: This button helps children focus, as mentioned earlier.
  2. A play button: This button is used to start a new game round. Every time it is pressed, Flora (the character) will ask for a new flower. Additionally, when a random flower is selected, a corresponding flower of the same color will light up on the screen and giggle, helping children understand what to search for.
  3. A small white circle in the lower right corner of the screen: This circle indicates whether all the expected devices are connected to the Java server. If all the modules are connected, the circle will disappear.

These features aim to provide the best possible experience for children by keeping the interface simple and free from distractions.

Step 4: Hardware

The hardware setup is relatively straightforward, using the materials listed earlier.

On the printed circuit board, female pins were soldered to facilitate the connection of the ESP8266 modules without the need for permanent soldering. The necessary connections include Vin (power), GND (ground), one pin for the LED (on D6), and one for the button (on D3).

Vin was directly connected to the power outlet. GND was connected to both the negative terminal of the power outlet and the ground for the button and the LED. The other two cables were connected to their respective components.

As a temporary solution, a cardboard support was placed around the button and the printed circuit board. As the next step in completing the product, a more suitable enclosure will be used, and flowers will be installed around the light.