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 week in issue 16 we’re going to conclude this run with cool JavaScript and HTML5 ideas. I owe a huge thanks to the developers of the game Danger Crew for answering questions for the Toolkit audience. (Their game costs $10, but if you purchased itch.io’s massive Anti-Racism Bundle earlier this year, you already own it!)
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.
On top of HTML, we layer special languages that add even more functionality. Languages like PHP and JavaScript are powering features that we use every day. At one time, the internet was almost all “static” pages made one at a time by hand. Today, almost everything is “dynamic,” meaning it’s loading different parts from programming that has variables and functions.
The game developers behind Danger Crew, Drew Conley and Glenn LaBarre, both work as web developers. Most games are made with robust programming environments called game engines. But Drew and Glenn already knew the full set of web languages! Could they make a game using just HTML, CSS, and JavaScript?
“I was afraid I'd lose steam by pausing to learn another ‘proper’ game development language,” Drew says. “My other side projects at the time were all in JavaScript, so I was already very fluent in it. I figured we would just use that and migrate away if we hit a limit. We never found the limit!”
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.
Ages 12-15: Let’s play with JavaScript! (activity)
The first JavaScript example on W3C Schools is a simple button, and they’ve already set it up to run a function called “Date().” Kids who already know some HTML and CSS can add some visual interest to this if they want, using <div>s to align the button, for example, and inline CSS to style the button. The full JavaScript tutorial teaches basics about all kinds of JavaScript interactions and how to build them, from clicks to scrolling to timed events.
To be like a traditional game, Danger Crew runs in a standalone web app container called Electron, Drew says, “which basically lets you run your JavaScript code in a version of Google Chrome that doesn't have all the extra browser ‘stuff’. When playing Danger Crew, you're really just running our own smaller version of Google Chrome.”
“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.”