Contents
New to coding and want to get a quick introduction? Try these short, interactive tutorials that will allow you to quickly make changes to code and learn some basic concepts.
Interactive p5.js Tutorials
The tutorials listed below are made in JavaScript, using a library called p5.js, so you will be able to run the code examples in a web browser. The code examples are shown on this site, but if they don’t work for you, there will be a link on each tutorial page to open the code in a new window (some browsers may not run the code properly directly on this site).
- Screen Size and Background Color: Get your first taste of coding by learning how to:
- Run a p5.js program
- Pass data into a function
- Change the background color of a p5.js program
- Change the canvas size of a p5.js program
- Variables: Learn what variables are, and how to use them to make the data in your program more reusable.
- More to come!
Play and Edit a Game
If you’d like to experiment with an actual (though very simple) game, try the interactive tutorial below.
Make sure that when you get to the game, you check out the following tabs below the game:
- How to Play: Learn the game controls and what your goal is.
- Learn: Read about some basic computer science and programming concepts.
- Edit Game: Follow the instructions in this tab to make changes to the game. Be sure to click the “Try Code Changes” button when you’ve finished making your changes, so that you’ll see the effects!
- Resources: Links to more activities, books, and other resources for game development and programming.
Click here to play and edit a very simple shooter game.
Tutorial Series: Code Your First Video Game (with JavaScript/p5.js)
Ready to make a complete game? Check out this free video tutorial series on Youtube. You will learn how to make a simple, browser-based game from scratch. Once you’ve finished the series, you will have the tools to experiment and learn how to make more complex games.
Click below to watch or watch here on Youtube: https://bit.ly/3dE1zQM
