We have reduced support for legacy browsers.

What does this mean for me? You will always be able to play your favorite games on Kongregate. However, certain site features may suddenly stop working and leave you with a severely degraded experience.

What should I do? We strongly urge all our users to upgrade to modern browsers for a better experience and improved security.

[2017 Challenge] Learning the ropes of making games

# What is this about?
This thread is part of the [2017 Game Developer Challenge](http://www.kongregate.com/forums/4-game-programming/topics/694738). It's about setting yourself a challenge, sharing it publicly and finishing it during 2017.
In here I will share my progress with you. This will include practical things like finished games or small code snippets. But I will also talk about more theoretical thoughts and why I do certain things.
There are four things I have in mind with this thread and the idea of the challenge itself:
1. Making some games and whatever else I might add to my challenge during the year.
2. Motivating people to challenge themselves and growing one a professional and personal level by doing so.
3. Adding a topic that is interesting to read and maybe even will result in an insightful discussion here and there.
4. Making this forum a more attractive place for developers and improving the community feeling.
While the main purpose of this thread is to report my progress I also would like to invite you to comment and share your own thoughts on anything related. Don't be shy and say what's on your mind. This is all about learning and getting better.
***
If you don't already participate in the challenge yourself give it a shot. It will be up for the whole year and you can join anytime. This will be a great opportunity to improve your skills and I'd love to have you on board.
Finally I'd like to thank everyone who is walking this path with me. You guys are amazing and I really appreciate your attitude!

# My personal challenge
Here you can find my personal goals for this year. I might add more depending on how things develop.
* I will spend at least 1 hour every week on learning how to make games/ making games
* I will make a "snake" game. *(Done)*
* I will make a simple idle game.
* I will participate at least once in GiTD
* I will report my progress weekly.

# Week 0
In my first report I'll give you a bit of overview.
***The current situation***
Making a game is one of my life goals. I've played so many of them and I would love to give something back. It doesn't have to be the next Skyrim but I'm curious to see how far I can get.
Never made a game before. Luckily I come from a background with knowledge in programming. So I will be able to skim through many things which would cost time otherwise. But aspects like graphics, the dynamic changes of the game and a real time interaction with the player will be probably my main challenge.
***
***Outlook for January***
It's going to be cold and it might snow. Oh wait. You mean an outlook on what I will do. January won't have any goals besides spending at least one hour per week. I will be mainly doing research on how to make games.
As for the practical side Shay's game making tutorial will be one starting point. I might take a short look at Unity/ WebGL but I will most likely start with HTML5. So going for tutorials in HTML5 and Javascript will be on my list. Making a collection of useful resources could be also one good move. The next bigger goal in the practical direction will be to upload something playable to Kongregate. Once I know how to do this a GiTD entry will be a realistic option.
The more theoretical part is directed towards game design. I'm sure you all know that feeling when you are all fired up to make something new and you would like to start coding right now. But in the long run behavior like this leads to problems which would be easy to solve in the the design step but almost impossible to deal with once a majority of your code is ready. Not sure if there are good articles out there on this topic. But the least I can do is making my own plan and adjust it when I encounter something important during programming.
***
***A bit about my challenge goals***
Right now I have two main goals. (Reporting is more of a tool than a goal to me). Spending at least 1 hour every week is a habit making goal. No matter what you do as long as you spend time doing it there is a good chance you are going to become better at it. At the same time the amount of energy and motivation you need to get started will get lower. Besides that it's a cool trick if you can't make a plan on *what* you are going to do yet. Your goal might not be clear. But at least it's measurable and you keep progressing in the right direction.
My second goal is to make an entry for GiTD. It's like making a game just with some added difficulty. And it will be fun to come up with a fitting idea. This goal is supposed to give me some focus so I don't research endlessly.
***
That's about it from me for this week. Feel free to comment if you have some piece of advice. Otherwise see you next week.
Thanks for reading!

When you start working with the bare canvas you'll find there's a lot of features missing or done not in the best way. It makes for verbose code. Just don't try to make anything too complex with it. After you get your bearings move to Phaser.
Also this is one of the simplest [canvas tutorials](http://diveintohtml5.info/canvas.html) I've found. [This page](http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/) makes a good reference guide.
> As for the practical side Shay's game making tutorial will be one starting point.
Eh, [this one](http://www.kongregate.com/forums/4-game-programming/topics/640187-how-to-make-html5-games) looks a little complex. I wouldn't start a beginner with the Kong API, and then leave little explanation as to what these important canvas functions are doing. It does make many good points however: like audio and cookies.
Good for amateur coders looking to zoom through HTML5 and get a game up, not so much a good starting point for beginner coders learning canvas.

No promises, but if graphics are end up being a big hurdle (one that you don't want to overcome yourself), assuming you don't want something massively time consuming i'm sure I could doodle up a few sprites or something. Would be a nice way to support one of my fellow challenger takers. If you wanna chuck me a PM further down the line when you're a bit further along the development cycle then feel free to do so.

**@lobn:**
Thanks for the links. That canvas tutorial was pretty awesome. I like how it was build up and those random questions dropped in between.
I will use Shay's Tutorial mostly for the foundation my games will be build on. It covers many aspects which are necessary to make a working game. I'm pretty good at working my way through existing code and figuring out what I have to change to get what I need. So this won't be a problem. But the more the merrier.
***
**@nutter666:**
Thank you for that amazing offer! But I don't think that kind of help will be necessary. I mean.. yeah... if for some weird reason I end up absolutely needing a crow that shoots tarantulas from its eyes I might come back to your offer. But there are tons of free resources out there. And it would feel wrong to waste your time on a problem that I can easily solve myself.
What I *could* need help on is general feedback. For things like proportions, color choice and arrangement of elements. Lobn covered nicely the technical part of drawing. But there is also the more aesthetic part. I don't mind screwing up on my first attempts but getting feedback in that direction would help me a lot.

# Week 1
This week I've been thinking a bit about how to progress best. I like the idea of spending at least one hour weekly so far. But I want to give it more focus. Otherwise I will end up reading random stuff which is interesting but doesn't get me any closer to making games.
That's why I decided to do my first update to my challenge goals.On top of the other things I will make a "snake" game. This isn't as boring as going for Pong but also not as complex as other possible games. And it will help me looking for the right tutorials/ how-tos and asking the best questions. I will still keep my eyes open for good beginner material but at the same time I have a more measurable goal at hand.
So what I have done (besides reading Lobn's suggestion) is my first attempt at some sort of concept overview for that snake game. I'll post it in a seperate post and I'm curious to hear how you handle that sort of task with your games. Maybe this will remind you of some cool links that deal with this topic.

# Overview for the snake game
**Description**
You (the player) will control a snake which eats pills to grow bigger. The goal of the game is to beat all levels. You can beat a level by growing to a certain size. The game will have 5 levels. Hitting a wall/ obstacle or the snake's own body with the head of the snake results in a game over.
Not included in this version:
* Sound
* Speed
* Persistent Hi-Scores
* Kong API
***
To get a list of things that need to be done I've divided to go for the Model-Controller-View design pattern. For those unfamiliar with MVC here is my simplified explanation:
* **Model** Deals with how you store (game) information. This can be as simple as storing everything in integer variables. Or it could mean some complex class or string. Might even mean that you use some external database. Note: Store doesn't mean necessary persistence in this case.
* **View:** Deals with how you display information. So for example you could display simply a number or make a health bar instead. It's the same information but different ways to display it to the player.
* **Controller:** Deals with the "inner logic" of a program. You have information but you don't wont it to be static. So any form of manipulation of information/ data falls into this category. Whenever something happens in your game this is the part that takes care of it.
No idea if using this approach is a good idea or not for games but it's a starting point and it should cover most of the things that need to be done in a more systematic way. It was just a spontaneous idea and might need some major cleaning up (took me about 10 minutes to make).
**Model**
* Game status (title, game, dead)
* Levels (how they are build up)
* Current level (obstacles, number/ id, target score)
* Snake (head, body, size)
* Pill location
**View**
* Title screen
* Level screen
* Game finished screen
* Game over screen
* Level (obstacles, outer wall)
* Snake (head, body)
* Pill
**Controller**
* Game loop
* Head movement
* Pill spawning
* Body growing
* Level goal check (target score)
* Death check (Collision detection)
***
**Milestones**
Those are for judging the progress of the game.
* Overview over necessary classes and functions
* Art ready
* Moving head on a level field
* Collision detection with walls, obstacles and pills
* Snake body growing
* Collision detection with snake body
* Transition between screens / progressing to new level
* Uploaded to Kong

> *Originally posted by **[Tulrog](/forums/4/topics/696165?page=1#10935929)**:*
> I'm sure you all know that feeling when you are all fired up to make something new and you would like to start coding right now. But in the long run behavior like this leads to problems which would be easy to solve in the the design step but almost impossible to deal with once a majority of your code is ready.
Oh man, I can relate to this one a lot in my first game...
***
Well anyways, I'm sure you'll have a lot of fun with your challenge. Starting game developing might look like a huge challenge and it is, but that feeling when you build your game and it's looking closer to the end product you envisioned is really satisfying and rewarding. I'm sure you'll come across quite a few hair-tearing bugs or issues as you learn and become more skilled but that's all part of the challenge.
I don't know much about HTML5 but I believe it's a good step in this new interest you're doing and it'll help with the fundamentals of game developing. If you're planning to use Unity, the API might need some getting used to at first but I'm sure your knowledge of HTML5 will help you understand fast. All I can really say is good luck with your challenge and have fun!

For now I don't care too much about implementation. This setup is giving me some hints on what I have to figure out.
But more importantly it is an example on how I would do the first step of my game. And this gives you guys the opportunity to jump in and explain how your first phase of game development looks like (if you want to).
**What do you people do *before* you write your first line of code?**
(Also don't do this at home. I probably skipped like a Gazillion steps between the description and MVC.)
***
I'll be looking into Unity and some other things in a later stage.
Thank you PlazmaGames! Really excited about doing this step forward.
***
Funny story: Yesterday when I was lying in bed I was thinking about how to model the information of the snake body. It remided me of FIFO (First In - First Out). And there is an abstract data type connected to this method called Queue.
In German that thing is called "Warteschlange". *Warte* being a modified version of "to wait". And one of the meanings of *schlange*? You guessed it: *snake*. So this might be a good candidate for a solution. The code is almost writing itself. :D

> What do you people do before you write your first line of code?
#### Focus on the parts instead of the whole.
The whole project is too overwhelming to take head-on. Instead work on small pieces and this will slowly dimish the size of the whole until it becomes finished. Divide and conquer!
*Write a snake game.* Too broad.
*Write the main menu.* Easier but still unworkable because there's many pieces to be approached here: Artwork, UX, buttons, etc...
*Draw the character.* Bingo.
#### Write pseudocode.
Have a goal in mind (generally one like above). Think of *a small amount* of steps required to reach your goal. Don't worry about detail yet.
**Example pseudocode:**
1. Define the snake location as blocks in a queue.
2. Get where each block is on the snake.
3. Draw each block.
After that, go a level deeper and think of steps between each step.
**Adding a layer of detail...**
1. Define the snake location as blocks in a queue.
1.2. Add a new block to the front
1.3. Remove the oldest one from the end
2. Get where each block is on the snake.
2.1. First block is the head
2.2. A stripe is every x blocks
2.3. The last is the tail
3. Draw each block.
3.1. Animation
From here I'll paste the pseudocode into a comment in my game. And I'll write the actual code alongside each step.
Know that this isn't 100% foolproof. Your pseudocode may have to conform to a restriction your game library has. This also assumes certain conditions like your snake was already several blocks long to begin with. And not all actions can be defined in a list of steps like this. But the separating things into smaller pieces idea remains solid.
PS: I apologize if my pesudocode may have given too much of the solution away.

I can see where I lost you lobn. ;)
So let me rephrase that question. From the moment you commit to making a game to the time you write your first line of code: What steps are involved in that process?
Do you take a piece of paper and just write down whatever is in your mind? Do you open an Excel sheet and make some sort of random TODO list? Or do you somehow *systematically* break your idea down into tasks. Do you use UML diagrams? Do you just start coding and improvise? Do you make concept art? Do you make a shedule? Do you tikink in milestones? Do you keep a diary with your progress? Do you set up some sort of document in which you keep track of your progress? Or do you gather the seven dragon balls and just wish for that darn game? ;)
Please don't answer those questions one by one. I'm genuinly interested in your very personal style of developing/designing games. What do you folks do? What problems do you encounter? How do you decide which approach you use?

My way will probably sound weird but to design my games, I daydream, a lot. I do this whenever I can from being in school, travelling somewhere or when I'm showering. I don't really write plans in paper or a word document, I usually just get straight to coding when I think the game I want to develop in mind is worth trying out. So far, I've drawn my art as concept art in my first game but I plan to do that in future games too.
The first thing I do before I start scripting my games is to make a prototype. I use the basic polygon sprites that Unity has already provided to label players, enemies, weapons, health, buttons, etc. During prototyping, I focus on making the gameplay I had in mind work as efficient as I can. It's also a stage where I test out my skills and make any changes due to any reason that I've come across, but I mainly change the gameplay if I didn't know how to do a specific thing such as saving in my first game or if I thought about a new feature I can incorporate for the game. The prototype doesn't have to be fully completed so whenever I've finished the main concept of the game, I work on making the end release. The end release is where I implement the graphics, soundtracks, SFX. Occasionally, I make changes in this stage too but I try to avoid doing that so I can focus on making the game rather than learning how to implement said changes into it. Those usually occur in prototype stage.
Things like making my graphics happen when I'm prototyping or early into making the final product. I research for soundtracks and edit SFX in the middle of the final stages. I don't really have a schedule but I try to work on my current game for at least an hour everyday but this changes a lot. In the future, it's very likely I'll change most of the habits I currently have but right now, this is how I design and develop games.

> *Originally posted by **[Tulrog](/forums/4/topics/696165?page=1#10946652)**:*
> I can see where I lost you lobn. ;)
>
> So let me rephrase that question. From the moment you commit to making a game to the time you write your first line of code: What steps are involved in that process?
LOL.
Okay, so I prefer the paper and pen approach for that. When an idea comes to me I write down whatever is in my mind. Then when I get home I have a large whiteboard mounted to my wall and I use it for diagrams and ploting out steps. Steps as in the whole pseudocode thing. Is that what you wanted you cheeky racoon?

**@PlazmaGames:**
Thank you for your insights!
***
**@lobn:**
Yeah. That gives me a better understanding of how your design steplooks like.Thank you for sharing!
Also we are arch-enemies now because of my envy on your whiteboard. Revange!
*~ Cheeky racoon*
***
# Update to week 1
So I took a look on HTML5 and JavaScript. Nothing really worth writing about on HTML5. Canvas is probably the most important thing. And it is nice to know that some of the commands are shorter now.
For example
```
<script type="text/javascript" src="racoon.js"></script>
```
is now simply
```
<script src="racoon.js"></script>
```
You can even leave out the quotation marks.
As for JavaScript I'm going through [this](http://eloquentjavascript.net/) tutorial. Nothing really surprising so far. But the cool thing about the tutorial is that it has coding exercises and solutions for those exercises. One of those exercises was FizzBuzz. A rather simple task which can come up in a programmer interview.
For all numbers from 1 to 100 you are supposed to print something to the console. If the number is divisable by 3 print *Fizz*. If it is divisable by 5 print *Buzz*. If it is divisable by both print *FizzBuzz*. Otherwise print just the number. Relly fun exercise. If you have some spare time between tasks give it a try.
Besides that I was also looking for an IDE (Integrated Developer Environment). I'm going to make more than one game. So I might as well do it in an organized way. Makes your life easier. In the end I picked Netbeans. If you ever start with Java you most likely will get Eclipse and Netbeans as recommendations. I've worked with Eclipse for years now and wanted to try Netbeans out.
Next on the menu: Going through that JavaScript tutorial.

> You can even leave out the quotation marks.
You can, but you shouldn't. This behavior differs between browsers and is not valid XML. It may work because your browser is smart enough (or stupid enough) to be able to parse non-valid XML, but the same can't be said for all browsers. Likewise, as I said earlier, it is not valid XML and will throw a parsing error. There is only one benefit to omitting quotation marks, and that is filesize. For filesize you sacrifice portability, validity, and in some cases readability. You can argue it will affect forward compatibility too. They may arbitrarily say you must include quotes in HTML6 and your program won't work in new browsers.

Mini update. I've had trouble understanding functions in JavaScript until I ran into [this](https://www.youtube.com/watch?v=oB5rH_9bqAI) video. Very different from how functions work in Java. But I like it.:) I hope this will result in some crazy things you can do with that approach. Passing functions around like objects sounds really interesting.

How have you been doing in terms of working with the IDE? From Shay's tutorial which started with something simple like notepad++ which i was using for a while now shuffling to sublime text. I've been running things through a wamp localhost for my projects due to apparently [security issues](https://phaser.io/tutorials/getting-started) if you run it directly onto your browser (well I did change to learning through phaser after a few pure code projects). How's the experience with netbeans, does it make updating more responsive and instant within a local environment?

Not really sure what you mean. I don't work with live changes or anything like that if that's what you mean. I'd have to download some Chrome App for that. At least that's how I think it would work.
I can simply hit F6 and the game opens in the browser. That's enough for me at the moment. Autocomplete is cool though. But on the other side it takes some time to start Netbeans. Just try it for yourself. Having worked with Netbeans at some time in your life is certainly not a bad move.

Ya, I don't know what to think about using IDEs, I was under the impression that things would be opened within a built in environment replacing the browser. But if it still does run through browsers, does it do it through local files or through a local web server. I guess i could look into netbeans further on, but most the tutorials I've seen haven't used that. Wonder if anyone else have anything to offer about the developing environment for HTML5 programs and maybe pros and cons of each. Things seems to work just fine but there must be some differences in terms of which tools we choose to use. I use different browsers at the same time alternating between chrome and firefox while using firefox developer for running my html5 projects.

It's all personal taste when it comes to development environments. Netbeans in its long term has been more geared towards C, Java, and Python. I see now that it has recently made [support for HTML5](https://netbeans.org/features/html5/index.html). It looks promising but I can't say how well it works; I've only used Netbeans for C.
Most Web Developers use Atom, Brackets, or Sublime. Sublime is the simplest out of those and you'll need to add other tools to do more heavy workloads. Atom and Brackets are close to Netbeans in complexity.
Personally I use a combination of Sublime, XAMPP, Gulp, and Livereload.
1. Write code in Sublime.
2. Locally host with XAMPP.
3. Use Gulp to minify and trigger the Livereload.
4. Livereload causes the web browser to autorefresh.

> *Originally posted by **[lobn](/forums/4/topics/696165?page=1#10961968)**:*
> It's all personal taste when it comes to development environments. Netbeans in its long term has been more geared towards C, Java, and Python. I see now that it has recently made [support for HTML5](https://netbeans.org/features/html5/index.html). It looks promising but I can't say how well it works; I've only used Netbeans for C.
>
> Most Web Developers use Atom, Brackets, or Sublime. Sublime is the simplest out of those and you'll need to add other tools to do more heavy workloads. Atom and Brackets are close to Netbeans in complexity.
>
> Personally I use a combination of Sublime, XAMPP, Gulp, and Livereload.
>
> 1. Write code in Sublime.
> 2. Locally host with XAMPP.
> 3. Use Gulp to minify and trigger the Livereload.
> 4. Livereload causes the web browser to autorefresh.
Ya, I'm working with a combination of Sublime, WAMP and livejs on the side. How's the Gulp and LiveReload running 2 programs to keep up the refreshes? I don't have any programming background to begin with although I'm slowly trying to learn different approaches along the way. Btw, where do u use to host your games? I'm in the process of fiddling with that.