CODEWITHSUNDEEP
html
Jeff Meatball Yang
Jeff Meatball Yang

Reputation: 39057

Making Javascript and HTML5 games

A long time ago (Netscape 4-era), I wrote Javascript-based games: Pong, Minesweeper, and John Conway's Life among them. I'm getting back into it, and want to get my hands even dirtier.

I have a few games in mind:

In all of these, I have only a few objectives:

So my questions are:

  1. How would you implement these games?
  2. Do you have any technology recommendations?
  3. If you've written these games, what was the hardest part?

N.B. I also want to start from first-principles - if you recommend a framework/library, I would appreciate some theory or implementation details behind it. These games are different enough that I should learn something new from each one.

Upvotes: 14

Views: 8027

Answers (9)

allanberry
allanberry

Reputation: 7785

edit 2019-02: processing.js is old and not well supported. Instead, try p5.js, which is equivalent and up to date.

Don't forget processing.js, which is a pretty well tested full-stack graphics and interactivity javascript framework, which has substantial (if not comprehensive) support for most I/O, sounds, graphics, and even WebGL. If you write vanilla Processing code, which is basically Java syntax compiled to JavaScript, you can use many open-source debuggers out there, including the native Processing environment. Other than that, you can integrate any other JavaScript code you have a mind to include.

Here is a guide for the JavaScript developer, explaining much of what you might want to know.

Check it out. Good stuff.

Upvotes: 4

tommymarshall
tommymarshall

Reputation: 21

I'm currently working on a series of blog posts explaining how to build a Javascript game using EaselJS and Box2D for physics. Here's Part 1.

Upvotes: 0

andy boot
andy boot

Reputation: 11767

Put simply use Canvas for moving lots of stuff around the screen and SVG for prettier, slower, vector graphics.

One of the first things you should do is write a speed test program to see what can be done with Canvas and then play with it.

I wrote a blog post about Canvas & writing HTML5 games

Upvotes: 4

d13
d13

Reputation: 10077

Maybe this is not what you wanted to hear, but have you thought of starting with a good book?

http://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=html5%20game

A good book will save you a lot of time, and start you off right at the basics.

Upvotes: 2

Niraj Chauhan
Niraj Chauhan

Reputation: 7900

A good question when I also started to learn HTML5 I also came across this question, finally after lot of research I found best way to do is by using some engine or framework. I learned canvas and made my own game but that took hours of logic and 100+ lines of code.

Better go with scirra, it might reduce your work.

Upvotes: 1

Tom Gullen
Tom Gullen

Reputation: 61773

Tom here from Scirra (Construct 2 game maker). We make an HTML5 games engine called Construct 2, it exports purely to HTML5 no Flash in sight!

Construct 2 uses an event based system to add logic to your games and does tons of the repetitive/difficult legwork for you. For example adding polygon collision to objects without some visual editor is a difficult task to undertake sometimes.

Anyway we think it's worth a look and you can get results very quickly from it as well. It's an alternative to coding the entire game you might want to take into consideration when developing HTML5 games.

Upvotes: 3

Seth Ladd
Seth Ladd

Reputation: 120819

Depends how much you want to start from scratch. To answer your direct questions:

1) How would you implement these games?

A: JavaScript + Canvas. Canvas is the 2D drawing surface from HTML5. Performance is pretty good on desktop machines, not so great on iOS and Android devices (as of the date of this post). If mobile is your utmost concern, you need to use the DOM and CSS3 3D transforms which trigger the GPU on those devices.

2) Do you have any technology recommendations?

A: This is sort of answered by the first question. JavaScript is a must, but I would ignore jQuery. You are targeting HTML5 devices, so no need to compensate for legacy browsers. As you are probably using Canvas, no need to smooth over the DOM interaction, either. There are some higher level libraries which make interacting with Canvas easier, such as Easel.js. WebSockets are useful for bi-directional streaming communication. And Box2D is useful for a physics engine. Local Storage is simple key/value string data for things like level progress, but for anything complex, you'll want WebSQL DB. For large binary assets you'll want to look at the File System API. Finally, don't be afraid of WebGL, as it is extremely fast and useful for 2D games.

3) What is the hardest part?

A: Almost certainly the hardest part is the debugging. WebKit's Developer Tools can make this easier, so don't leave home without them.

Upvotes: 11

James Black
James Black

Reputation: 41838

The hardest part, for me, was that there were no tools to help make the graphics, as there is no Maya export to canvas, for example, so, everything is done manually, with primitives, unless you want to take bitmaps that you will modify as though they are sprites.

At the time there was no real support for text in canvas, so my solution didn't work using excanvas, but worked fine on Safari and Firefox.

So, you may want to look at what HTML5 features you want to support, such as a built-in database, and then decide which browsers you are willing to work on.

How to implement these will largely depend on how you want to create the graphics, and if you want to do 3D graphics, as then the bitmapped sprites would not work.

Upvotes: 3

Srikar Doddi
Srikar Doddi

Reputation: 15609

Take a look at ChromeExperiments The examples are from around the world using the latest open standards, including HTML5, Canvas, SVG, and javascript.

Upvotes: 2

Related Questions