Sign in to follow this  
CarlosMartinez

web browser game development

Recommended Posts

so i have the basics of programming and "visual" web development (i mean i can make things look the way i want them).

 

 

the reason im posting here is because i want to learn how to make real time browser games, without using flash, i want to use the tools that come with the browser itself like php, javascript, html5 etc... 

 

i have some general questions and some specific questions, so lets start with the general ones:

 

general questions:

 

1- do you know about a good book that will get me on the right track, specially on the networking part.

 

2- what is a good way that you would recommend to interact with the database in real time, or interact with other players, i can load stuff from databases and write on them, but usually when i use php to manipulate databases, it requires a submit button to send data to the server, so i would like to know if there is a way to do this without leaving the current page, like with javascript but accessing the actual server.

 

3- even tho i have knowledge of programming, i have pretty much nothing when it comes to networking, how would it work?, (like the log in stuff, to get the user and have him play against or with other users in real time), that part sounds really scary to me, but hopefully its not THAT hard. so yeah, how would it work? 

 

specific questions:

 

4- lets say i want to have a battle between 2 users, each one of them will have 3 characters, and each character wil have 3 different spells, is it a good thing to have every available character and every available spell in the database?

 

5- (only if the anwer of #4 is yes), then alright, each character in the database will have data like hp, mana, items and pretty much numeric stuff, but it will also have 3 spells, those spells would have complex effects that i cant just put in numbers in the database, so how would it work?, lets say one of the spells should hit one of the enemies for 50 hp, and then break that 50hp and give each of the teammates 50% of that as a shield (25 & 25 with 2 teammates), how would i put all that effect in a database? and how would i use it?

 

 

 

well thats pretty much all i need, feel free to answer even if you cant answer all of the questions, also note that the most important of those for me is #3, because i dont have any kind of experience or basics on that field, so any help will be appreciated, thanks a lot.

Share this post


Link to post
Share on other sites

Hi there,

 

I'm the head TA for '15-237: Building Cross Platform Mobile Web Apps' at Carnegie Mellon University, and I just happened to stumble upon your post and I think I may be able to help.

 

If you have no knowledge of basic web development (and actually, even if you do), I highly suggest reading "Object Oriented Javascript" [1], and then "Javascript: The Good Parts"[2] - but take everything you read in "The Good Parts" with a grain of salt - some of it is a little extreme.

 

Once you're done, learn how to use the fairly simple HTML5 canvas API [3]. At this point you should be able to build pretty much any browser-based, client-side-only game you like. Also, there are several libraries that build on the basic canvas API. I heard that Raphael.js is a good one.

 

As for networking, I suggest working with Node.js [4], which is a javascript environment for server-side code. At that point you should learn AJAX (look up JSONic and RESTful APIs). For real time games, which you seem to be interested in, you should take a look at socket.io [5]. There's not a lot of documentation for it, but it makes real time networking almsot trivial. Just look at some example code around the net and you'll get it in no time. Then, for authentication (player login, etc.) you should look into using either express - a node.js library [6] that handles some of that stuff, or any of the many alternatives around the web. Finally, for a database, I highly recommend mongoose [7], since it works quite well with node and is pretty popular.

 

It's sort of a long journey, but I think that going through it is going to be much more help than answering your specific questions directly.

 

Hope this helps!

 

[1] http://www.amazon.com/Object-Oriented-JavaScript-high-quality-applications-libraries/dp/1847194141http://www.amazon.com/Object-Oriented-JavaScript-high-quality-applications-libraries/dp/1847194141

[2] http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?s=books&ie=UTF8&qid=1356190548&sr=1-1&keywords=javascript+the+good+parts

[3] https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial

[4] http://nodejs.org/

[5] http://socket.io/

[6] http://expressjs.com/

[7] http://mongoosejs.com/

Edited by Xaan

Share this post


Link to post
Share on other sites

well i have some experience with object oriented programming on javascript, but i'd like to see how extreme is "the good parts", also i already read some books on the canvas, and i actually liked the tool much more than flash even though it feels harder when it comes to animation and stuff, it wont be a problem here, the only thing that concerns me about working with canvas, is that the code is actually pretty open for anyone to see, and any experienced person might be able to find in-vulnerabilities easily by going through the code.

 

as for the last 4, i've never been a big fan of working with external libraries, even tho i know their potential, but im not saying i wont give them a try, learning a library that is not well documented could get a little messy tho.

 

overall, i feel its a little scary to work like that, it would be great if there was tutorials or open source codes to learn about this, having no clue about how serversided apps work, for example, i saw this on socked.io:

 

var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

 

i dont understand a word of it, and i dont know where to put it, or how.

also for the database, learning mongoose feels too hard now, my cpanel only offers database options for mysql, and i dont know how anything else would work.

 

 

Im not saying what you posted isn't great, what im saying is that it might seem easy for a person as experienced as you, but to me things just got even scarier, what i really want to learn is the basics of how it all works, instead of a library that will help me through it ( dont know if that makes sense), or maybe just learn the basics in some kind of introductory way like the most basic tutorial for it, before i get to go deeper on those libraries.

 

thank you a lot though

Edited by Xeinnex

Share this post


Link to post
Share on other sites

I did a tutorial/journal series of sorts that might prove useful to you.  It was entitled 

A simple JavaScript app using Node, cocos2D, YUI and Heroku

 

Wow... big font...

 

Anyways, it was a "simple" project I did for my daughter creating a primitive web game, but it covered all the back end systems required... from hosting in the cloud (Heroku), a server back end ( Node ), a UI and admin pages (YUI) and the "game" (cocos2D).  Additionally part of it covers saving to a database (CouchDB noSQL).  The best part is, every piece I used was freely available, so you can get started for zero money... or at least could at the time I wrote it.

 

Pretty much covers how to do everything end to end, except the game specific bits.  Of course, you dont have to use Cocos2D HTML, there are dozens of options, although if Cocos2D sounds appealing, i've done a tutorial for that too.

Share this post


Link to post
Share on other sites

Well, you're going to have to break this habit of not using external libraries. I have this problem too... Building everything from scratch is so much more satisfying and you don't have to "learn" how to use your own code. That said, you have to break out of this habit.

 

Networking, at it's basics, is THAT hard. If you really want to learn the very basics of networking, that means taking up the C language, learning about processes and threads, then web sockets and how they work, then HTTP and TCP and UDP, etc... That is all really cool and doable, but unnecessary for you to build your game.

 

Node.js isn't an external library. It's a server side runtime environment for javascript. All that means is that it lets you write servers (easily) in javascript (which I think is nice, since the frontend of your game is going to be in javascript, too). Before you look at socket.io or anything else, you should google some articles on Node to understand what it is, and then do some tutorials (there are a lot of them). It starts with installing Node.js, writing some javascript file, and then running it from the command line. You'll also want to gain a basic understanding of AJAX. Plenty of tutorials for that too.

 

Socket.io is an external library to be used with Node.js. It goes inside a js file that you also run as a node program from the command line. The code you posted above is a very simple skeleton of a socket server that is listening on port 80 - i.e. if you want to communicate with that server, you'll have to connect to that.server's.ip.address:80. If that doesn't make any sense, then a few Node tutorials should fix it. In any case, you don't start with socket.io, you start with AJAX and Node.js. By the way, socket.io is an external library but it's so heavily used it might as well be a part of Node's core. Trust me - you will not want to learn how to implement it yourself.

 

Also, I'm not as experienced as you think. I've had to learn all this in 6 months over the summer to be able to teach a class I helped to write at Carnegie Mellon. Just dive in: a bunch of tutorials on one window and google.com on the other window to google anything you don't understand in the tutorial.

Share this post


Link to post
Share on other sites

Hi,

 

 

Stay the ~stink~ out of PHP or Flash until the mess is cleared in those environments - might be never.   The mainstream recommendation is Javascript and HTML if you want to do serious browser game development with a future. 

 

Resources have been suggested here.  Find an SDK for browser games; it'll make your life much easier, especially in growing with art assets and effects. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this