So what game am I building?

In one word a MMOTDBG which means a Massive Multiplayer Online Tower Defense Browser Game.

This kind of game was made famous by desktop tower defense, and was one of those games that made me lose hours without me noticing. I think it is a really fun game, but it is missing a multiplayer mode. Also most of the games of this genre also miss the multiplayer mode. You are always the one defending, I’d like to be able to attack enemy bases too! So I’m planning a creating a mix between DTD and a browser game like Ogame (which also made me lose a few weeks of my life)

MMOTDBG

So if I’m successful I’ll probably die playing with my creation because  I forgot to feed myself :-)

Wanna know when it is ready? Drop your email here and I will let you know when the private beta is launched.

What do you think? would you play this game? please leave a comment!

Posted in Meta | 5 Comments

Ajax game example

I’ve disappeared a bit, but that doesn’t mean that I’m not working on my game anymore.

I’ve made a lot of progress which I didn’t write about. I completed the tutorials for akihabara and I like it a lot. I’ve made a single player pong game and now this simple ajax “game”.

What is it? Well, is more of a hello world of different technologies than a game. There’s no gameplay! I was trying to get a simple infrastructure in place with some basic functionality. There’s a simple server with all the game logic, then there’s a frontend using akihabara to display everything (which is a bit of an overkill, but for now is great). The comunication between frontend and backend is done with jQuery, and the server is built in java with the help of the play framework (which I love!).

As you can see there are many different technologies working together… and what do all this accomplish???

A bouncing ball…

You can see it in the following video

I was planning on getting a live example as I’ve done with all the other games but I need to find a good (and cheap) hosting server to put this in. I was thinking of using google app engine, but they don’t let you create different threads which is a must for this kind of server, so no free hosting for me :-(

Posted in Tutorial | Comments Off

Going forward

I’ve completed all the text only exercises I meant to. Now is the time to dive into graphics.

I know the suggestion by TK in his blog post was to learn the real graphics programming. No libraries, no framework. Well… I really don’t want to do that. I think that in my case (web game developing) it wouldn’t be savvy to work on just javascript and HTML. Like he suggested to ignore matrix mathematics in the beginning, I’m choosing to ignore all the browser incompatibilities that comes with working on javascript alone. I prefer to let someone else deal with it. Someone with more experience.

I think it would remove most of the fun of game developing and could block me from going forward.

What game engine will I choose? Well there are two that seems to be what I need:

  1. Akihabara: which is a game engine for making classic arcade style games using Javascript and HTML5
  2. gameQuery: is a jQuery plugin to help in game developing but seems to be in an earlier stage

I’ll try some tutorial for both of this engines an later decide which way to go

Posted in Meta | Comments Off

Hangman in Javascript

HangmanThis exercise was a walk in the park compared to the previous one. I needed to learn a few thing to be able to complete it, but it was rather easy. You can view the source of the game here and try it out here.

What I needed to learn was how to find if a character was present in a string and how to retrieve a character once you know its position.

First to find if a character is present you use the function ‘indexOf(char)’ of the string object like in the following example:

var word="A string";
var character = 'a';
var index = word.indexOf(character);
if(index == -1)
  return false;
else
  return true;

indexOf is case sensitive so the previous function will return false. If the character was present index would contain the index of the character in the string.

The other useful function was charAt(int), which is like the opposite of indexOf(char), it will return the character in a known position.

var word = "A string";
var character = word.charAt(2);
return character;

This function will return ‘s’. So we could right this totally useful program

var word = "Useful program";
return word.charAt(word.indexOf('s'));

Which will obviously return s.

Game flow

  • check if word has the character guessed
    • no update the structure
      • was last step?
        • no update wrong guessed letters
        • yes end game losing
    • yes update right guessed letters
  • for every character in the word
    • check if it was guessed
      • no hide it
      • yes display it
  • If there are no hidden letters the player won


Posted in Tutorial | Comments Off

7 game developing things I have learned so far

LearnI has been an interesting journey this far and I have learned more then what I thought (ie. not only javascript), I thought it might be interesting to discuss these observations so please leave a comment.

  1. There’s a long way to go. Learning to program a game is not something you do in a weekend. Sure you could hack together some sort of game in a weekend, but that’s not what I’m talking about.  I’m talking about developing, testing, bugfixing, releasing  and promoting a game to real users.
  2. It ain’t easy. Many people don’t understand the work that is really behind the tools/games they use every day. When you try to develop even a simple game you need to understand the rules really well, you need to consider and implement every possible use case. It’s a lot of work.
  3. OOP rules. I’ve become too used to OOP that not working with objects was really difficult to me. Proof of that is how hard was to complete the checkers game and how easy was the chess one once I learned OOP in javascript.
  4. Step by step is the way to go. When you want to learn something new there are usually to ways to do it. You could just dive in and learn as you go, this is cool because you can make a lot of progress really fast and you immediately start working on something you want. The other way is to go step by step, do small exercises that let you learn gradually, this is obviously slower because you do a lot of work which is “academic”. When you are done with it nobody will use it. Most of my life I’ve learned things in the first way. Now I think that step by step is the way to go, because your product (the real one) will be a lot more maintainable since you learned the proper way to program which in the long run will save you a lot of time.
  5. Step by step is the way to go 2. Don’t just jump at any problem and start writing code. First understand well what the problem is and try to solve it in your head. Then write some pseudocode in comments and then write the actual code using the comments as a guideline. Write some basic functionality and then expand it.  Finally test, Test, TEST!
  6. Stackoverflow is your friend. We all have doubts, we all have some stupid bug that we can’t fix (or even find). If you have a coworker he could help you, but not everyone is so lucky. For the rest of us Stackoverflow is probably the best way to go.
  7. The tools don’t matter but help. Everyone of the exercises I’ve done thus far could have been written in notepad, so don’t stress about the perfect tools and the perfect work environment. Sure tools help you, they highlight your code, keep thing in order and integrate well with your versioning system. Tools essentially save you time, but the most important thing is what you actually do, not what they let you not do.

What have YOU learned?

updated from the comments

  1. making [casual games] is 10% fun and 90% boring. There must be millions of unfinished prototypes out there that were dropped just after the fun ended and the developer had a ‘better’ idea… I know I have a few dozen. by benologist
Posted in Tutorial | 13 Comments

Chess in Javascript

ChessIn this tutorial I’ll show you a (very minimal) working chess game written in javascript. I could have polished it a bit more, but I’m actually very eager to start working on some graphics, so I needed to get out of the way chess and hangman.

What did I learned in this step? Well as I said in the previous tutorial I needed to learn Object Oriented Programming in javascript. This helped me a lot during the development. Creating the chess game was a lot easier than the checkers one and that wasn’t expected.

How do you program OOP in javascript? Well I could tell you but I think that Tim at nefarious designs can do a better job.

Game structure. The game has 3 main components, a lot of buttons which represent the game board and let the user interact with the game, a bunch of objects (one for every kind of piece) and an array to memorize where every piece is in the game board and to be able to access it.

Every object has 6 methods, but only 2 of this are really important. One is the one which moves the object from a cell to the other (updating every status variable) and the other is the one which verifies  if a move is valid or not. This second method simplifies a lot the programing of the game since the main loop doesn’t need to care which object was selected and is moving, it just ask if the move is valid an if it is the game ask to piece to move itself to the desired cell.

Game flow

  • Check if there is a piece already selected
    • no Check if selection is valid
      • yes Select
      • no Do nothing
    • yes Click on owned piece?
      • yes Change selection if valid
      • no check if is eating move
        • no Is move valid?
          • yes move
          • no Do nothing
        • yes Is move valid?
          • yes eat and move
          • no Do nothing
  • Draw

You can try the game here and can find the source here

Posted in Tutorial | 1 Comment

Checkers game in javascript

Since I can’t work on this full time (I still have exams to pass) it took me about a week to get this game working. What surprised me was that even this simple game had so many rules and special cases that I needed to take into account. This led to the code being a bit chaotic in my opinion, even thought I tried to make it as readable as possible. For the chess tutorial I’ll need to figure a way to write more in a object oriented way.

Anyway you can find the files in my repository at github, and you can try it here.

To write this game I tried to build first a minimum viable game and then work my way up to the real game. First I created the visual representation of the board (a table of buttons) and the memory representation (a 2D array), then I initialized it with the game pieces.

Later I let the player move any piece anywhere and take turn doing it. Then I started verifying if the move was valid and I grew from simple moves to jump moves and jump-eating moves. Always going a small step closer to the full game.

Later I created a counter for every player to count how may pieces they where left with and when it went to zero I’ll end the game.

Then I added the ability for a piece to become king when it reaches the end of the board and start jumping backwards. This was kind of a big move since I had to take many possibilities into account, but it went easier than I expected.

After that I had most of the game working so I started playing a few games looking for bugs and I found many! After correcting them the game could be called finished. I had a look at the code and I polished a few things (added a few comments where needed, deleted one unused variable…).

After all that here we are. The game is working and I’m progressing on my way to becoming a game developer. I left a bug in the code, nothing that could prevent you to have a good game of checkers, but still a bug. Can you spot it? Here’s the code. Maybe is easier to find it playing it.

Posted in Tutorial | 1 Comment

Tic Tac Toe in javascript

Updated: followed suggestions by tonyl

The series continues… I just had a big problem with my pc but I’ve found and old one to work with while I find a proper replacement… but it’s SLOOOOOW

Anyway, here’s the tutorial.

To have a look at the final file here’s the link

In this exercise I learned how to use the arrays. What is an array? It is better explained here

In computer science, an array type is a data type that is meant to describe a collection of elements (values or variables), each selected by one or more indices that can be computed at run time by the program.

I not only needed an array but a bidimensional one. You can think of a 2d array simply as a table that lets you access every cell like you did when you played naval battle. You have an index for the x and one for the y.

To declare a bidimensional array you first need to declare a simple array (note that you don’t need to specify how many cell will have the array).

var arr = [];     //or  var arr = new Array();

Then you declare an array for every element in the previous array. In my case I needed a 3×3 array so I declared 3 more array using a for cicle.

for (var i=0;i<3;i++)
        arr[i]=[];

Lastly I need to initialize  the array to have a known starting point. Since my starting point is an empty board I will initialize the array to zero.

for (var x=0;x<3;x++)
    for (var y=0;y<3;y++)
       arr[y][x]=0;

As you probably realized by looking at the previous code to access the cells you need need to write the name of the array variable folowed by the indexes between “[" and "]“.

The other new command I used is

window.location.reload(0);

Which simply reloads the page. I used it to start a new game every time someone won or the where no more moves.

Tic Tac Toe flow

At every click the program should do the following operations

  • Update the game board (visually and the represantation)
  • Check if it was a winning move
    • If yes congratulate and end the game
  • Check if it was the last move
    • If yes end the game
  • Change player

If you need any other explanation or if you have something to add please comment below.

You can try it here

Posted in Tutorial | 7 Comments

Getting a random number in javascript

This time I use most of the knowledge of the previous tutorials. The only new concept is the random number I need for this game. Getting it is pretty easy, I just need to use the Math.random() function.

Math.random() is pretty straight foward, it returns a number between 0 and 1. To get an integer number between 0 and 100 we first call Math.random() then multiply the result by 101 (range+1). This way we get a number between 0 and 101 but it isn’t an integer. We just need to apply Math.floor() to the result to round the number to the lowest integer thus giving us an integer between 0 and 100.

It’s easier to show you what to write than to explain it:

var rand = Math.floor(Math.random()*101);

this will give you the desired random integer, but what if you want a number not starting from 0? Well you will need to use the same method but at the and add your desired starting point. Suppose we want a number between 15 and 37. Our range is 37-15=22. Our starting point is 15.

var temp = Math.floor(Math.random()*23); //this gives 0-22
var rand= temp+ 15; //this gives 15-37

Another interesting function I use in this code is isNaN() which checks if a variable is “Not a Number”. For a very good explanation on how to use it check this stackoverflow question

Here’s the code for my first “game”

<HTML>
<HEAD>
<TITLE>Guess The Number</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function didYouGetIt() {
var number = document.getElementById(“number”).value;
//Get a random number from 1 to 10
//Math.random() gets a number from 0 to 1
//Multiplied by 10 and rounding by defect I get an integer from 0 to 9
//Adding 1 I get what I was looking for
var newNumber = Math.floor(Math.random()*10)+1;
//isNaN(num) returns true if the content is not a valid number
//so !isNaN(num) returns true if it IS a number
//number!=”" check that the variable is not empty
if ((!isNaN(number) && number!=”")){
if(number==newNumber)
document.getElementById(“writeHere”).innerHTML=”Great, you got it!”;
else
document.getElementById(“writeHere”).innerHTML=”Wrong. Try again! The number was “+ newNumber;
}else
alert(“Write a valid number from 1 to 10″);
}
</SCRIPT>
</HEAD>
<BODY>
Please enter a number between 1 and 10: <BR>
<INPUT TYPE=”text” id=”number” VALUE=”">
<INPUT TYPE=”button” Value=”Click” onClick=”didYouGetIt()”>
<div id=”writeHere”></div>
</BODY>
</HTML>

Posted in Tutorial | 3 Comments

Getting user input in javascript

This is the second program I write in javascript so it is still pretty simple. What I wanted to do is to get some data from the user and display it back. As I said it is pretty simple but I’m just starting out.

I googled a bit and found a few solutions, the first I tried required a form and I think was to complicated for what I was trying to do. After playing a bit with the code I was able to eliminate the form (keeping only the input box and button) . To access the data in the textbox I use document.getElementById(id).value, this is pretty straight foward and works fine.

Now how to visualize the data I just read? Well my first try was to just throw an alert with the data in it. But I don’t really like popups that much. So after googling a bit how to do it I found a better way. This time I use one of the most important features of Javascript, the fact that I can modify the page I’m working on.

All I had to do was to create a DIV with and id where I wanted to write the data and then write in it with this line

document.getElementById(id).innterHTML=data;

Now the program is working but there’s a little bug that I can’t stand. If you don’t write anything in the box and click the button you will still get a message. To prevent that I will just add a simple If statement that verify if the value of the textbox is empty. This way I can show an angry popup if the user tries to trick me

The code with the proper syntax highlight can be found in my repository http://github.com/MaurizioPz/From0ToGame/blob/master/02_GetName.html

<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function sayHi() {
//Here we declare a variable “name” and get the value of the inputtext “username”
var name = document.getElementById(“username”).value;
//Check if the user wrote something
if(name==”")
//if empty show a pop-up
alert(“Are you scared of telling me your name?”);
else
//Here we modify the div “writeHere” with what we want to tell the user
document.getElementById(“writeHere”).innerHTML=”Hi ” + name + “, you rock!”;
}
</SCRIPT>
</HEAD>
<BODY>
Please enter your name: <BR>
<INPUT TYPE=”text” id=”username” VALUE=”">
<!– the parameter onClick tells the browser to call our function “sayHi” when the user clicks this button –>
<INPUT TYPE=”button” Value=”Click” onClick=”sayHi()”>
<div id=”writeHere”></div>
</BODY>
</HTML>

If you have any question or if you would have done it in a different have don’t hesitate to comment

Posted in Tutorial | Comments Off