How to Program Games: Tile Classics in JS for HTML5 Canvas

4.6 (1737)
Обучение платное
14.5 часов курса
Курс от Udemy
Чему вы научились?
Create, display, and play with a 2D tile world that supports optimized collision (a central concept for generations of games in a variety of genres!)
Program games in JavaScript for HTML5 Canvas without using any external libraries or plug-ins
Create, load, display, and rotate image graphics in games
Break game code into multiple files to better manage large projects
Define a class and use it to create multiple instances of gameplay objects in unique positions (note: only using the very basic first concept of object-oriented programming, it doesn't dive deep into that rabbit hole)
Handle mouse input for a one-player game, or keyboard controls for both one and two-player games
Implement basic item pick-ups (keys) and trigger their usage upon collision (open doors)
Develop and adapt gameplay for basic platformer movement, digital board/strategy games, simple matrix formations for retro arcade-style enemies, and worlds larger than the screen viewed by scrolling camera
Apply simple trigonometry calls to move game objects at arbitrary angles
Implement basic loading screen functionality in HTML5
О курсе

By taking this new course you'll program several classic game types that all incorporate 2D tile-based worlds. You'll code in JavaScript for HTML5 Canvas, so a text editor and ordinary web browser are all you need (an art program can be handy for a few sections but is not required). I've attached my code for each step so you'll never be stuck. At the end you'll learn even more ways to apply what you've learned. Also by completing the course you'll get a PDF of my complete 500-page textbook on game development: Hands-On Intro to Game Programming. The book contains over 100 exercises, a couple of more game types, and additional material with more detail about the projects you created in this course.

(HTML5 Logo in the course image is by W3C, licensed under Creative Commons Attribution 3.0 Unported. Background pattern for transition cards CC BY-SA 3.0 Subtle Patterns © Atle Mo. drawn by Paul Phönixweiß.)

Introduction to Your Course and Instructor

Here's what you'll be learning how to create in this course, and a bit about who you'll be learning it from. Pleasure to meet you!

Ball with Mouse Paddle - Warm-Up and Review
You'll be able to prepare a file for coding HTML5/JavaScript, get the ball bouncing, and move the paddle with mouse input.
Section Introduction

This lecture is just a bit of set up and context for what you'll be learning in this review section, including one last reminder about the previous free Udemy course that this one builds upon.

Create the HTML File

Making an HTML file is a simple matter of creating a plain text file and saving it with the right extension. As a reminder, since you're programming you should make sure that your OS is set to show all file extensions, rather than hiding known types, since otherwise it will be tough to tell txt from html files, png images from jpg images, and so on.

Proper HTML Header

Whereas other browsers may let you get away with a very basic (if technically incorrect) HTML wrapper for your game files, Firefox is picky and will complain with a warning in the console unless you provide it with a proper header. Since many people use Firefox and this doesn't take very long to do let's take a moment to form it properly.

JavaScript in HTML with Console Use

You'll see how to open your console, print code to it from your program code, and also see an example of spotting an error message in it due to an issue in the programming.

HTML5 Canvas with Setup Function

To display graphics for your games we'll need a canvas to paint on. In this step you'll create that canvas with HTML and set up a way to use it from the JavaScript.

Draw Filled Rectangle and Circle

During this lecture you'll write code to display colored rectangles and circles.

Variable and Timed Updates for Motion

For action to happen over time, rather than being computed all when the program stats, an interval time has to be set up. That's what you'll accomplish here. To show that it's working you'll also use a variable to position the ball, changing it on each update call to produce a steady horizontal motion.

Modify Speed, Also for Vertical Motion

Now you'll get the ball bouncing off the left and right sides, as well as moving vertically and bouncing off the top and bottom of the canvas.

Reason for a Big Rectangle Each Frame

There's a semi-mysterious giant rectangle being drawn every time the game updates. It deserves some explanation (maybe even a bit of demonstration?) for why it's there.

Separate the Motion and Draw Code

Time to separate the movement and rendering lines of code. Although this isn't technically necessary it can help reduce strange complications that would later arise due to positions being updated and drawn in varying order.

  • Any plain text editor like Notepad will do, however one which supports features for programmers such as multiple file tabs, code highlighting, line numbers, and smart/auto-indentation can be handy for later phases as the code grows in length (Notepad++ is free for Windows, TextWrangler for Mac, or Sublime Text 2 which I use has a fully functional free trial for either)
  • Any common web browser should work fine, although I use Google Chrome (free) so you may prefer that one just to see on your side exactly how it shows up in the videos
  • To follow along the few steps for drawing art you'll need a program that lets you draw and save images with transparency. I use a slightly older version of Photoshop, although free alternatives exist and the steps are similar. I also attach all art files that I create, so if you prefer to only focus on the coding steps you can download the images that I create in the videos.
Chris DeLeon
Chris DeLeon
Independent Game Development Educator, 23 years making games
Курсы Udemy подойдут для профессионального развития. Платформа устроена таким образом, что эксперты сами запускают курсы. Все материалы передаются в пожизненный доступ. На этой платформе можно найти курс, без преувеличений, на любую тему – начиная от тьюториала по какой-то камере и заканчивая теоретическим курсом по управлению финансовыми рисками. Язык и формат обучения устанавливается преподавателем, поэтому стоит внимательно изучить информацию о курсе перед покупкой.
Комментарии (1737)
Как и любой другой веб-сайт, konevy использует файлы cookie. Эти файлы используются для хранения информации, включая предпочтения посетителей и страницы веб-сайта, которые он/она посещал. Информация используется для того, чтобы подстроить содержимое нашей страницы под тип браузера пользователя и другие параметры и таким образом улучшить его пользовательский опыт. Для получения более подробной информации о файлах cookie, пожалуйста, прочтите статью «Что такое файлы cookie»