Interactive web coding with the makers of Danger Crew
You don't need new programming languages to make video games.
Hi! I’m journalist Caroline Delbert and this is The Toolkit from Robotics & Beyond 501(c)3. Our goal every week has been to give you some videos, projects, and products that help kids (and parents) get inspired by science, technology, engineering, math, and creative design.
This is our last newsletter issue for now, so please reply and tell us if you’ve liked what we’ve been doing! If you’re a paid subscriber, we’ll contact you next week.
The structural frame of the internet is HTML, hypertext markup language, which holds the structure of every webpage. When HTML added CSS, cascading style sheets, users could change how their whole website’s fonts looked, for example, by changing just one line instead of every individual piece of code.
Ages 5-8: Let’s change colors! (activity)
W3C Schools, a decades-old institution that has free tutorials of everything from basic HTML to full-stack web development, has a live preview tool that I really love. Take a look at this simple CSS exercise, because you can sit with even little kids and just type in different color names where they appear in the sample code. The internet usually uses hexadecimal color codes, but there are over 100 named colors from “yellow” and “orange” to “lightgoldenrodyellow.”
Using CSS helped Drew and Glenn turn a regular webpage into something dynamic that looked and felt like a “real” game. “[W]e had to do a lot of CSS visual tricks to make Danger Crew feel like a game instead of a web page,” Drew says. “For example, we limit a visible viewbox of the page to create a camera effect that follows the character around. (That sounds fancier than it really is.) We had to do some weird scaling tricks to make pixel art appear large and crisp, as well as learn how to play music and sound effects in the browser.”
Ages 8-12: Let’s learn HTML! (activity)
Kids in this age group are probably ready to start making simple websites using HTML. The W3C Schools HTML tutorial goes through a bunch of Try It Yourself examples with short lessons, and it also teaches kids how to make local files and look at them in a web browser.
The Danger Crew team counted on this same idea. “Using the web made it really easy to host different versions of the game,” Drew says. “Instead of Glenn needing to download a whole new app to try my latest changes, he could just hit a URL on his laptop. We sometimes even had multiple versions deployed with specific game changes we were trying to decide on and compare.”
“Having an online demo is a great unexpected benefit to having the game written for the web first,” Glenn adds.
“I felt self conscious throughout the whole development time that our game would be seen as less or cheap because it wasn't written in a big name gaming language,” he says. “It turns out that real players don't know or care how you make your game—they just want to play a fun game—so use whatever tech choice you want!”
Build stuff, collaborate with friends
For now, this is the last planned issue of the Toolkit. I’m excited that our final issue includes real web developers, because I want kids of all ages and their families to see that feeling curious, practicing new skills, and working together to solve problems are all essential to the people who do these jobs. Drew and Glenn decided to use their well “developed” (zing!) web skills to help make their game easier to design and build. “I just wanted to get started on the idea as quickly as possible without losing any momentum or inspiration,” Drew says. “When something seems like it's too much to handle, adding a few guardrails (like time, or scope) can really get creativity flowing.”
I asked what they would tell kids who want to start tinkering with web technology. Glenn sums it up beautifully: “First: Build and ship things often. Huge, ambitious projects are fun to dream up, but they take a TON of work to complete. Get into the habit of making things and put those things in front of people who will help you grow. Second: Make things with friends. You'll learn more with a friend, and they can help you find the motivation to keep going.”