Beginning JavasScript/HTML5 Gaming Class

[cwaage]

Hi -

I'm working to develop a course for my Middle School students in beginning JavasScript and HTML5. I think they would get the most out of it if the goal was to build a few games.

I'd be very interested in the good resources on the subject for that age group as well as any exiting courses out there from which I can borrow. I have Googled the subject extensively, but thought this was a good place to ask for more experienced feedback.

Thanks in advance for any input or recommendations!

[d13]

How much JavaScript programming do your students know?

If none, they should at least have a good beginner's introduction.

Could you let us know more about your students and what you hope to teach them?

[cwaage]

This students have a working knowledge of HTML and CSS, but not JavaScript experience.

The goal is to expose them to programming concepts (i.e. variables, loops, functions, etc ...) and have them learn basic programming skills.

I know I'd need to start slow with a basic introduction to Javascript. But the carrot, the end goal, is to be able to create one or two simple 2D games.

[AzraelTycka]

Hello,

I'm not a tutor in any programming field. But I'd like to put my two cents in. I think a game which would be easy to extend is a nice way to go. By easy to extend I mean that it doesn't necessarily require too much of work to make a difference, i.e. calling some function/constructor simply with different values would produce a bit different result and so on. It makes sure that your students have the same game but all have a slightly different visual result which I found to be quite appealing.

One example which I find nice are mazes. Tere are some algorithms that can be difficult to grasp but the basic ones are very simple to understand and very simple to program and they are usually pretty short too. And the result for so little work is impressive at the least while keeping some form of randomness (no two mazes will be probably same in your class, changing the size of the maze is simply changing width and/or height that's only two input parameters and provides quite some difference). That adding a player and some simple collision is very easy to understand in terms of 2d array (matrix) or in any other way you would do it.

Apart from that it's very simple to extend with some kind of bonuses to collect and/or enemies to shoot. It takes little effort to make these changes. Basically you can make it as a project and build upon what you made throught the year/half year or how long your classes go.

And as a finale you can ask students as their homemade project or their individual project during classes throught the year to create some kind of a maze solver. So not only they are players but they can make a computer to solve it and visualize it.

This usually shouldn't take too long to make so perhaps you can add a few more little project to your class with other games (other one I like for these kinds of classes is arkanoid like game, again it provides an opportunity for those kinds that want to show their individuality with extendign the basic game with some special effects - multiple balls, bullets, speed boost, and so on - and/or differently generated maps of blocks, again everything is simple so focus can be maintained on the language but with some nice playful results).

 

Link for mazes (visual examples how the maze is build are pretty neat ;-)).

In case you don't know what arkanoid is.

MDN breakout (arkanoid) lesson.

 

Don't know if this helped at all, I expect yo uare asking about games you could make and some ideas to make it more entertaining for students while still keeping focus on the language and not adding too many difficult concepts to the bag?

[d13]

It can be tricky!

Even simple concepts like what a variable is can be quite a paradigm shift for the average 12 year old.

Loops are a hurdle that will be very difficult for many to understand. 

I used to teach basic game design to that same age group using Flash 5, about 15 years ago.

It was a great tool for teaching programming because you could very easily attach images to programming code, so that students could visually understand what their code was doing.

But, for middle school, we just made simple point-and-click games with button events , and logic that didn't do much more than count or accumulate a score, or do basic if/else decision making.

If you had some kind of tool that was very visual and wrote all of the basic boilerplate code for you, that would let students overcome the technical problems of setting up a coding environment and installing the game engine or frame work.

Maybe something like Game Maker would be appropriate?

https://www.yoyogames.com/gamemaker

I've never used it, and I'm not sure if it's overly complex, but it's probably worth looking into.

If you want to go with the pure-code style of making games, I wrote a very simple game engine that was designed, in part to be as easy as possible for people new to programming to start with:

https://github.com/kittykatattack/hexi 

But, if you went that route, you'd probably have to start the students off with a simple code template so that they wouldn't have to worry about creating the HTML container page or launching the initial start screen.

[permith]

I would recomend make a list of terms so that your students would know where to start searching.   The modern students tend to be really good at knowing how to use search engines, but get really really frustrated when they don't know the terms to use to start to get hits.  (IE: game loop, Polygon hit test,  double buffering, and similar).

I would say you can get away with a lot of things without going very formal.  Someone can make some pretty extensive games on modern hardware without even needing to resort to a normal quicksort/search. 

For teaching I would probably recommend a few games:   Pong(Basic game loop, key input, rectangular collision), Galaga(Arrays),  a Match 3(more arrays), Missile Command(How to use known math concepts in a game(Trig to define a circle, pythagorean theorem)).

 

[zeke_chan]

Hi there. I teach game development at the university level but in terms of experience and knowledge, most of my students come in with zero programming background. How long will your course run?

If your students have little JavaScript experience, I would suggest Codecademy to get started:

https://www.codecademy.com/learn/javascript

Here are games your students could start with (this is what I teach my gamedev 101 class):

1. Endless running style game (like flappy bird)
2. Pong
3. Asteroids

Once those are done, you could progress with:

1. Breakout
2. Space invaders
3. Minesweeper
4. Tetris

If you plan on introducing game AI:

1. Rock paper scissors
2. Tic-tac-toe
3. Battleship

Feel free to reach out if you'd like more suggestions or help in planning for your course. Also, I've been writing game tutorial series that you may find useful for your class. You can check it out here: zekechan.net.

Zeke

[Faktori]

I never gave any javascript or game design lessons but I took some, and if I had to teach the basics I would certainly start by a simple top-down game with an array based map.

The map would be rather simple, an [x][y] array where 1 is a wall and 0 is empty, where the player would navigate and eventually pick up a key to open a door and that's it

I feel it's a good way to introduce :

javascript arrays + methods,

loops (since they'd have go through the array to display it),

simple inputs (player movement),

basic game design and mechanics (game loop, collision handling, map design),

and maybe some simple IA (like an enemy going back and forth)

I don't know, maybe that's a little too much.. I feel that a 12yo can handle this though since it's mostly logic, there's very few math involved - the only issue I see would be getting the kids to assimilate / understand syntax - but in a way, writing a script line is quite like writing a sentence with nouns, verbs etc. and they do learn grammar at school so..

Hope I could help !