If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Intro to Games and Visualizations

The JavaScript programming languages can be used to create exciting games and visualizations. These might include components like UI controls, keyboard controls, scenes, characters, environments, items, collision detection, and scoring. We'll explore each of these components in detail as we build our own games and visualizations in this unit! Created by Pamela Fox.

Want to join the conversation?

  • piceratops ultimate style avatar for user trek
    Looking for the reason behind a strange behavior in the Khan Academy sandbox.

    I like to work on projects on my the web server on my laptop since I can control the real estate easily and I do not have to argue with Error Buddy every time that I make a change. The weird thing that I notice is when I port my code up to the sandbox and save. When I return to the project, many times the code has been double-spaced.

    Has anyone else noticed this happening? Does anyone know why this occurs sometimes, although not always?

    Thanks.
    (130 votes)
    Default Khan Academy avatar avatar for user
    • old spice man green style avatar for user Josh (SpongeJr)
      It's the line endings. Windows puts a CR+LF at the end of lines but the editor only wants LF.
      I use Notepad++ (free open-source software) and change the "EOL conversion" to Unix-style. Turn on special characters and you can see the difference.

      You could probably do something similar in many text editors if you know what you're looking for. LF and CR might also be displayed as ^J and ^M (ctrl-J and ctrl-M) respectively, or their ASCII values (10 and 13, or 0A and 0C in hexadecimal), or \r\n. Regardless, you probably want to strip out the CR's and leave the LF's.
      (70 votes)
  • winston baby style avatar for user Hyeongsu Kim
    Can anybody make me a game?
    (12 votes)
    Default Khan Academy avatar avatar for user
  • orange juice squid orange style avatar for user Jack Mullen
    will these videos help me even when I have not learned java script?
    (18 votes)
    Default Khan Academy avatar avatar for user
    • leafers ultimate style avatar for user alimadhami
      This is a follow-up course to "Intro to JS: Drawing and Animation". You can find this course when you go to Computing > Computer Programming in the courses menu, and search for the title.

      So yes, you do need to know basic Java script to be able to understand and learn from these lessons. Hope this helps:)
      (22 votes)
  • starky ultimate style avatar for user daniel hockey
    Do I need to do Intro to HTML and Intro to SQL before I learn this?
    Because I learnt Drawing and Animation, but not the other Intro's
    (6 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user likezoamusa20
    what type of application can I use make a game
    (5 votes)
    Default Khan Academy avatar avatar for user
  • aqualine ultimate style avatar for user AndyH
    Where is the game section on this website?
    (3 votes)
    Default Khan Academy avatar avatar for user
  • aqualine ultimate style avatar for user 31AziziSetarah
    where are the games in khan academy i thoght there were no games.in khan academey i have only have done math i have not seen the games.
    (4 votes)
    Default Khan Academy avatar avatar for user
  • duskpin sapling style avatar for user Dean Summer
    println(Infinity); gives a weird value on KA:

    null (Why is it falling back to nothing?)

    Same for println(Infinity + Infinity);. Other checks are logical.
    (3 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user crh20rh094
    how do you make a game ??
    (3 votes)
    Default Khan Academy avatar avatar for user
    • mr pink red style avatar for user DMS_HK
      Making a game can be a complex process, but I can give you an overview of the basic steps involved:

      1. Define your game concept: Decide on the type of game you want to create, the genre, gameplay mechanics, and any unique features or goals.

      2. Plan and design: Create a detailed plan for your game, including its levels, characters, storyline, art style, sound effects, and music. Consider creating a visual prototype or sketch to help visualize your ideas.

      3. Choose a game development platform: Select a game development engine or platform that aligns with your skills, preferences, and the type of game you want to create. Popular choices include Unity, Unreal Engine, Godot, or GameMaker Studio.

      4. Learn the necessary skills: Familiarize yourself with the tools and technologies required for game development. This may include programming languages like C# or JavaScript, graphic design software, and audio editing tools.

      5. Start development: Begin building your game by creating the game world, implementing gameplay mechanics, designing levels, and adding art assets. Break down your development tasks into smaller manageable chunks and work on them one at a time.

      6. Test and iterate: Regularly playtest your game to identify and fix bugs, balance gameplay, and improve user experience. Collect feedback from others and make necessary changes to enhance the overall quality of your game.

      7. Polish and finalize: Refine the visuals, audio, and user interface of your game. Add additional features, optimize performance, and ensure smooth gameplay.

      8. Release and distribute: Once you are satisfied with your game, consider publishing it on platforms such as Steam, mobile app stores, or independent game distribution platforms. Promote your game through marketing channels to reach your intended audience.

      Remember, making a game is a creative process that requires dedication, patience, and continuous learning. Don't be afraid to start small and gradually build up your skills and knowledge as you work on more ambitious projects.

      *The following answer is 100% AI generated.
      (3 votes)
  • leaf orange style avatar for user Dominic R.
    Can someone explain regular expressions, or point to a tutorial? I've seen some people using them but I don't know what they are/do.
    (2 votes)
    Default Khan Academy avatar avatar for user
    • old spice man green style avatar for user Bob Lyon
      I doubt it. But maybe someone can win the contest to explain a computer science concept.

      I was first exposed to regular expression in a senior level college course in the Theory of Computation and how regular expressions are equivalent to finite state automata.

      Here is a concept: The asterisk, * is a regular expression that matches any string. So, s* is a regular expression that matches all strings beginning with with an s. Similarly, *s matches all strings ending with an s. There are quite a few more operators besides *.

      Javascript defines both literal expressions and constructed expressions. However, many lesser browsers have a hard time with literal ones, so it is best to stick to constructed regular expressions. Regardless, I find regular expression programming to be "write-only". That is, the end product is hard to read, comprehend, understand, and debug.

      A google query of "Javascript RegExp" can introduce you to this powerful (and horrible) concept. My DeKhan library is a fine example of regular expressions and their use: https://www.khanacademy.org/computer-programming/dekhan-the-code/5149916573286400
      (3 votes)

Video transcript

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.