Intro to Games and Visualizations

Voiceover: Congratulations! You now understand the JavaScript language. Variables, loops, strings, functions, objects, arrays, even object-oriented design. But what good is a language if you can't make something cool with it? There are lots of ways you can use your new knowledge, but one of the most popular ways to use JavaScript with Processing.js is to make games and visualizations, which you probably know, if you've ever looked at our hot programs list. A game is something interactive, where you get some reward. There is usually a win state, a lose state, a score. A visualization is also highly interactive, but without the game mechanics. Let's look at some of the common components we'll need. We'll need UI controls for anything we're doing. Like buttons, and sliders, and menus. And some of these will be simple buttons, other times we'll need multiple buttons, other times we'll need sliders, and drop-downs, and it all builds upon the same basic principles, though. Besides interaction with a mouse, we'll also want keyboard control, like being able to use the arrows to move our characters up and down, or to change the angle of our visualization. We often also want the notion of scenes. A scene is like your start screen, and your options screen, and your main screen, and your end screen. And they're usually very different, and at any given point we want to be showing one of them or the other, so you have to really organize your code in order to know the difference between the scenes, and have a good way of switching between them. And now let's talk about a few things specific to games. The environment of a game. Is it a side-scroller, which means it's kinda a character moving forward through a space? Is it a bird's eye view, like going through a maze? Is it a 3D environment? It's crazy, but you can do it. Are there multiple levels, and each of them have different environments? What are the characters in the game? They'll probably have different behaviors, and emotions, and states, like a happy state and a dead state. And they'll might be user controlled or sometimes they'll be programatically controlled. And your program gives it some sort of logic to follow. There could be one of them, there could be lots of them. They could get spawned during the game as it's played. Now once we've got characters in an environment, we usually also add in some items, and then we have a lot of things colliding with each other. And we usually want to know when things collide, because things are typically trying to attract each other, or avoid each other, like when you're picking up gems, or avoiding nasty turtles. So we need to be able to detect collision between objects, and sometimes it's very simple collision, and other times it's more complex if the objects are all different shapes and sizes. Finally, if it's a game, it's usually got a score. So how do you measure how well the user is doing? When do you tell them if they've lost or won? How spectacular can you make the win screen or the lose screen? So, as you can see, there are a lot of aspects to think about when making games and visualizations. We'll walk through some of them here, but we don't know what's in your head, and most likely, you'll have to just combine the knowledge you learned here to make whatever really cool thing is in your head right now.