Making a Game in JavaScript

makingagame

As promised, I’m going to talk about my experience so far learning JavaScript and attempting to make a tiny, tiny game by May 1st.

I’ve gotten pretty interested in game design lately, and it’s something I want to pursue further.  The best way to do that is to start making games!  I don’t know any programming languages, so I’m sort of having to start from scratch here. Luckily, I’m in the unique and fortunate situation of having a husband who is a very talented programmer and eager to teach me everything I need to know.  Private tutoring for free!  The sooner I take advantage of that, the better.

Although I use HTML and CSS to make websites, the only programming language I have any experience with is PHP from working with WordPress, and not much of that.  I told Nick I wanted to make a small game and learn programming basics, and together we decided that JavaScript would be fairly easy to learn (and HTML 5 will let me easily share the game if I ever get it to that state).

I’m aiming to “finish” the game (and I use that term lightly) by May 1st because I work best on a deadline and we’re hoping to start a larger game project together with a friend around that time, so I’ll be wanting to shift my attention there (hopefully I’ll be ready to learn/help more in the programming department).

You might remember that last year I started a point-and-click escape-the-maze type of game in JavaScript and HTML5.  I actually got pretty far with the mechanics (despite only making one post about the game) but I ran into some bugs, got discouraged, and fell off the wagon.  Other reasons for my failure probably include a lack of independence (I didn’t know any programming at all, so Nick had to hold my hand the whole time) and a lack of a deadline/motivation.  I think I was also trying to make it a better game than it needed to be, without having the skills yet to do so.

This time, I just have a very small concept of a chase game where you navigate a Pac-Man-style map (though zoomed way in) and try to find a thief or spy by following the footprints they leave behind.

 

My "concept art" to show Nick what I had in mind.  He implored me to choose the top-down perspective instead of the Earthbound-style oblique.
My “concept art” to show Nick what I had in mind. He implored me to choose the top-down perspective instead of the Earthbound-style oblique.

 

 

The very basics

I think one of the reasons I lost interest last time I tried to make a game was that I was learning way too much at once without any context.  This time around, I decided to try learning the basics of JavaScript first through Codecademy.com.  Codecademy offers a series of free programming lessons that cover the basics of a number of different languages.  They also gamify the experience with points and badges.  (The gamification of some things may be controversial, but I think it’s perfect for tedious work like studying).  So earlier this month, I got started on the JavaScript track and finished up a little over a week later.  I will admit that I found the process boring a lot of the time, but I’m definitely glad I stuck with it.  (And I think Codecademy did a great job finding the balance between teaching and letting me discover and learn things on my own).

 

Getting set up

At this point, Nick helped me make a burndown in Google docs, set up my game environment in Aptana (which is what I was using for my other game), and get me started with a game loop.  It was amazing what a difference going through the Codecademy track made.  Nick was teaching me things he had already taught me back when I tried to make a game before, but I was able to follow so much more this time around.  Before, I would get really hung up on things like semicolon usage, or what a function even was.  It was great to be able to just skip all of that stuff and really comprehend what the code was doing.  We started off using this simple game tutorial as a guideline and then worked from there.  Before long, we had canvas, a sprite that could move with the arrow keys, and some background music!

 

Interaction

Today, I finished implementing collision detection.  Nick helped me write the code for the game to know when my sprite was colliding with (or overlapping in space with) a rectangle that we drew, and I had to come up with a way to make the code interpret that signal in a way that makes it seem like the sprite is colliding with the rectangle.  I made variables for when the sprite is colliding to the right, left, up, and down, and then added if statements to the four arrow key inputs to only move the sprite if they weren’t colliding in their relative directions.  It was satisfying to think of a solution, implement it, and have it actually work!  Nick had to clean things up a bit after me, but it was pretty good at its core.  I feel like it’s the first time I’m getting to problem-solve like this with code, and I’m happy that I’m able to do it (even if I’m at the most basic level).

 

My game so far.  You can't tell, but Fritz there is colliding with that black box!
My game so far. You can’t tell, but Fritz here is colliding with that black box!

 

Next Steps:  Map building, character AI, camera?

Now that I can make my sprite collide with something on the map, I need to actually build the whole map and get the game to know which areas are obstructions.  Nick says this will be easy, but I can’t really imagine how it will work yet!  Since I want most of the map to be off-screen, I guess I’ll also need to figure out how to make the “camera” track the main player sprite (again, no clue!).  Then hopefully we can add in the suspect character that the player will be chasing.  There’s a lot of work to do before May 1st!

 

Thoughts

I’m having fun with the project and I’m satisfied with my learning so far.  It is a bit hard to find the right time to work on it, though.  During the day, I convince myself that there are more important things that need to be done.  And in the evenings, when it makes the most sense to work on it because Nick is home and can help, I usually don’t feel like sitting at the computer anymore since I’ve been doing that all day.  I think I need to find a balance between doing some game work during the day and finding non-computer things to do (chores are all I can think of, or maybe exercise) to keep me from getting burnt out at the desk.

The other big obstacle right now is that I’m an awful student!  This has been the source of many fights between me and Nick.  I’m really impatient, I’m easily bored and distracted, I take criticisms and suggestions too personally, and I’m not as engaged in the learning process as Nick would like.  I don’t know what it is, and this isn’t the first time this has happened.  I think part of it is a combination of not liking being bad at things and being used to learning independently.  I hope that being more aware of this problem will help me catch it and stop it before it leads to any more fights.  I want to be a good student (and not drive my husband crazy)!

6 comments on Making a Game in JavaScript

  • Dan E.

    My hairdresser told me that he’s interested in learning to program (he took a few classes in high school). His husband is also a professional engineer, and he is also starting with a codeacademy series on Javascript.

    But he’s actually not telling his husband about it, or soliciting his help. He says “oh, if I told Robin, he would get all excited, and then I would feel bad if I lost interest”. I really understand that. I used to teach programming, and that seems like that would be super hard on a relationship!

    (Ana, my SO, was mystified. “Isn’t there anything that if you were learning, you wouldn’t tell me about it, at least at first?” I asked. “No, of course not, why?” she said…)

    So, congratulations on your progress so far, and on still being married. 🙂

    Managing the energy for something like this is super hard. “Don’t manage time, manage energy” is the title of some super cheesy HBS article, but I have always found that personal mental energy really is the limiting factor for my life, especially with anything “extracurricular” like this. Energy can be paradoxical — “resting” can actually decrease it. I have no magical advice for how to get into that happy focused place where you’re excited to learn, but it’s a challenge I think everyone faces even though it doesn’t get talked about much. (People talk a lot more about finding the _time_ for things … and yes, a lot of people are super busy, but if you’re energized the time finds itself.)

    • clavicarius (author)

      Wow, the idea of not telling Nick about it never crossed my mind! I can definitely understand not wanting to disappoint, but I think he’d be more hurt if he didn’t get to be a part of helping me learn. And since he’s constantly asking if I coded any today or suggesting we work on the project together, that helps keep me from losing interest. I really hope I can improve my learning habits over time, it’s something I really dislike about myself!

      Yes, I think maintaining energy is the better way to think of it! I have a lot of projects going on right now (and an endless list of things I want to do), but I have literally all day to make it happen. When I make a (sometimes unreasonably paced) schedule and then fail to stick to it, I just end up feeling bad about myself and getting even less done. Instead, I’m trying to observe things like “I work really well when I just jump into a task in the morning and work until lunch,” or, “I hit a really bad slump after lunch,” etc. and work from that perspective. I’ve always wanted to get more done in a day, but a lack of time is not the problem.

      Thanks for the thoughtful comment =)

  • Larry Hosken

    I like the way your game doesn’t let me walk Fritz through the wall.

    “I take criticisms and suggestions too personally”

    That sounds like a symptom of having someone you care about as a teacher. If you can combine learning from him with learning independently, that might help; if you struggle a while with some lesson and he’s not watching, then nobody has to feel bad about it.

    • clavicarius (author)

      Well you’re going to love the game’s latest iteration. There are now two walls Fritz can’t walk through!

      I think you’re totally right, I don’t seem to recall having these same problems learning from teachers and such over the years. Nick has started giving me assignments to try and complete on my own (helping when I get stuck), and I think that’s helping!

  • tabstop

    Does it make me a sad person if I think I recognize Code::Blocks in the image at the top?

  • tabstop

    For a real comment, I have to admit I was not completely thrilled with codecademy, but that might be based on my previous background. At any rate, I found that the lessons were very hit-and-miss depending on who wrote them.

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.