Sunstruck 103º

Players learn to spot the warning signs of heat illness in this 2D pixel game as they cross a Houston neighborhood on a 103° day.

Comment

Inspiration

I got the idea for this project from an ordinary experience in Houston. Walking across a blacktop parking lot in August is a normal part of the day here, and on hot afternoons it is common to feel lightheaded or get a headache from the heat and simply wait for it to pass. I had felt that way before without thinking much about it, oblivious to whether those symptoms were harmless or the first stage of something more serious, and I had no clear idea of what the correct response would be if they got worse.

When I looked into it, I found that heat illness progresses through recognizable stages, from heavy sweating to cramps, then dizziness and nausea, and finally confusion, which indicates heat stroke. Each stage requires a different response, and some common responses are incorrect; for example, a common response to someone with heat stroke is to provide them with water, which could actually cause them to choke. I also found that the problem is large in my own county. A 2024 Harris County Public Health report recorded 7,627 heat-related illnesses in Harris County between 2019 and 2023, a 329% increase over that period, and found that 61% of cases occurred on days when the heat index exceeded 103°F, the threshold the National Weather Service classifies as dangerous. This actually inspired my project name as well. The problem is not limited to Houston: the CDC has estimated 9,237 heat illnesses per year among high school athletes in the United States, most of them occurring in August and most during practice rather than games.

Most people are not taught this information in a form they retain. To solve that, I chose to make a game because an interactive game is more engaging than a poster or article.

What it does

In Sunstruck 103°, a storm has knocked out power on the player's street. It is 3 PM, the heat index is 103°, the player's house has no air conditioning, and the library on Main St. has opened as a cooling center. The player walks to the library and checks on neighbors along the way.

The central mechanic is body heat. It rises while the player is in the sun, fastest on asphalt and slower on grass, and it falls in shade. Shaded areas are calculated from the actual trees and buildings on the map, so shaded areas on screen genuinely protect the player. Running moves faster but raises body heat faster. The player carries a water bottle with three sips, can refill it at free stations, and can pick up items such as a straw hat that reduce heat gain.

If the player stays in the heat too long, they progress through the symptom stages in order. Each stage slows the player down and triggers a pop-up explaining the symptom and its cause. Along the route are six neighbors, each with a different heat-related problem, including a man mowing his lawn with heat exhaustion, a dehydrated child at a playground, and a jogger showing signs of heat stroke. The player chooses how to respond, and incorrect choices explain why they are wrong, because several of them are common misconceptions (such as giving an energy drink to someone with heat exhaustion). Eight signs around the map present statistics from my research. Reaching the library completes the game and displays the correct first aid for heat exhaustion and heat stroke.

How we built it

The game is built with plain HTML, CSS, and JavaScript using the canvas element. It uses no game engine, no framework, and no image files; every sprite is drawn in code. The writing, including the encounters, statistics, and first aid information, is stored in a separate file (content.js) from the game engine, which made it easier to verify the medical content against CDC guidance. The game is hosted on GitHub Pages.

After researching and designing the game, I used AI (Claude) to generate the code within the competition period. The concept, mechanics, encounters, research, playtesting, and tuning are my own work.

Challenges we ran into

A challenge was a design problem with how the educational content was delivered. In the original design, the heat-safety tips were placed on signs around the map, but as I was playtesting, it was clear to me that most players would simply walk past them and learn nothing from the game.

I redesigned the system so that the tips appear as pop-ups triggered by various game events. When the character develops cramps, for example, the game explains what heat cramps are and what causes them. Because each lesson is presented at the moment it becomes relevant to the player, the information is more likely to be understood and retained. The reminder to drink water, for example, appears when the player's body heat is rising and water is actually needed in-game.

Accomplishments that we're proud of

The shade system is the technical accomplishment I am most satisfied with. Many games represent shade with fixed tiles, but in this game shade is calculated from the position of trees and buildings, and the route-planning aspect of the gameplay depends on players being able to trust what they see on screen.

I am also pleased with the incorrect answer choices in the encounters. To write them, I researched common misconceptions about heat illness, such as the belief that a fan is sufficient on a very hot day, or that water should be given to someone suffering from heat stroke. I believe correcting a misconception is a more effective way to teach than only stating the correct answer.

What we learned

I learned the medical content itself: the order of the symptom stages, the difference between heat exhaustion and heat stroke, and the fact that the two require different handling, particularly regarding fluids. I also learned that a fan can be harmful when the air is hot enough, and that people in serious danger from heat often believe they are fine, which is why checking on others is so important.

I also learned about how to place educational content in games. If it is optionally placed on the side, most players will skip it; it should instead be woven into the gameplay so the player can learn while having fun.

What's next for Sunstruck 103°

I plan to introduce touch controls next, since most of the intended audience would play on a phone or a school Chromebook. I also plan to add a Spanish-language version, and additional encounters, beginning with one set at a football practice, since CDC data shows that athletes are a high-risk group. Finally, the completion screen should include practical local information, including real Houston cooling center locations and the 311 phone number, which residents can call for a free ride to one.

Sources: Harris County Public Health, Health Impacts of Excessive Heat in Harris County (2024). CDC, Heat Illness Among High School Athletes, United States, 2005–2009. CDC, Heat Related Illnesses (signs and treatment). Houston Health Department, Houston Activates Heat Emergency Plan.

Share this project:

Updates

Submission history