https://github.com/noorvandamme/BachelorThesis
In this blog post, I'll walk through the tools we used in our development process, the reasoning behind our choices, and how we worked with new technologies, particularly Arduino sensors, to create an interactive shuffleboard game.
When we began this project, we considered using new tools and technologies. However, after careful consideration, we decided to stick with tools we were already familiar with. This was done to ensure the feasibility of the project and to avoid unnecessary risks. Ultimately, the priority was to create a working product that would meet the goals of our project. While we didn’t dive into unfamiliar tools, the process still provided valuable learning experiences, especially with the integration of new hardware like Arduino sensors.
Arduino
For the hardware component of our project, we used an Arduino board to control sensors and communicate with our game’s software. Arduino was a solid choice for this project due to its flexibility, ease of use, and ability to interface with various sensors. Since we were integrating physical components with our digital game, Arduino offered a simple and reliable way to achieve this.
IR Break Beam Sensors
A key feature of our game is detecting when the pucks move through the slots in the shuffleboard. To accomplish this, we chose IR break beam sensors. These sensors work by sending an infrared signal across the slot, and when the puck breaks the beam, it triggers a response.
Initially, we considered using microswitches, both long and short variants. However, we quickly ruled them out when we realized that these switches would create resistance for the pucks, making the gameplay less smooth, especially for younger users. Since our target audience includes children, it was crucial to avoid any obstacles that could hinder the play experience.
After testing the IR break beam sensors, we found that they were perfect for our needs. They caused no resistance and were simple to integrate, ensuring a seamless and responsive gameplay experience.
Web Development Technologies
On the software side, we used JavaScript, HTML, and CSS to create the game’s interface. These are technologies we're already familiar with, and they worked well for the task at hand. We used JavaScript to handle the communication between the Arduino sensors and the game’s interface in the browser. HTML and CSS allowed us to structure and style the page, ensuring that the game was visually engaging and responsive.
To bring everything together, we focused on integrating the IR break beam sensors with our web application. Here’s how it worked:
Arduino to Browser Communication
We connected the IR sensors to the Arduino board. When a puck passes through the sensor, the sensor's state changes from "unbroken" to "broken," or vice versa. We sent this change in state as a signal from the Arduino to our web application.
Real-time Feedback
On the browser side, we used JavaScript to detect the change in sensor state. When the state changed (from broken to unbroken), it triggered an event in the JavaScript code. This allowed us to register when the puck passed through the slot, sending real-time feedback to the user.
Sensor demo
Although we didn’t experiment with new, unfamiliar technologies, our process was still a significant learning experience. Our main focus for this project was UX and design, but at the same time, we had to ensure the game worked in a real-world, interactive environment. Translating our design and UX decisions into a working product was a challenge. This wasn't always easy, but it pushed us to think creatively about how to make sure the game felt intuitive, engaging, and functional.
During the development process, we encountered several challenges that required creative solutions to ensure a smooth user experience.