0

I am very interesting in making HTML5 games and dynamic web applications. As someone with a Flash background, I want to remake my flash games, and also some of the full-flash websites (most of them are portfolio for artists and designers), Using HTML5 technology. I did some research and it appear that CSS3 is an important element, as well as the HTML tags (old and new).

So, short question, to make HTML5 games, do I just need JavaScript and Canvas or there is something else?

PS : i know how to create a very basic HTML page

Jarrod
  • 9,349
  • 5
  • 58
  • 73
alaslipknot
  • 39
  • 1
  • 6
  • 1
    CSS and HTML aren't even programming languages. If you know ActionScript, then JavaScript won't be difficult for you to learn. Just try making something and you'll see what you need to know. – Blender Jul 08 '13 at 00:51
  • 2
    Do you need to know the basics of HTML to make an HTML game...? Think about that for a moment. – Major Productions Jul 08 '13 at 00:52
  • 1
    If you plan to create a HTML page you do need at least a minimal understanding of CSS; if at the very least to set the width and height of your canvas element. – doppelgreener Jul 08 '13 at 00:53
  • @KevinM1, well am not going to make a HTML game, i want to make a game that use the HTML5 technology which is not just HTML – alaslipknot Jul 08 '13 at 01:45

2 Answers2

0

There are two approaches to this

  1. Pure canvas
  2. Dom

Both are essentially Javascript with the difference in how they are rendered.

for games, people generally favour the canvas approach. This is due to canvas performance now outpacing that of DOM as of recent.

But end of the day it's the Javascript that makes this all work. So that's really what you'll want to learn.

Jarrod
  • 9,349
  • 5
  • 58
  • 73
0

As you already know ActionScript (Flash) which is the same basis as JavaScript (ECMAScript) you have the foundation for it.

You can use a basic web page as you only need to place the canvas element inside it:

<canvas id="myCanvas" width="500" height="400"></canvas>

And in the JavaScript code that you reference you start off with:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

The ctx, or context, is where you apply most of the draw operations. To manipulate pixels directly you use the canvas object directly.

Example using context:

ctx.fillRect(0, 0, 100, 100); // my first black-box

You don't need CSS for this part. The canvas can be considered as its own separate world inside the browser and CSS will not affect anything inside the canvas (which basically is a bitmap), only the canvas element itself.

All you really need to do is to first read up on the canvas API:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

and familiarize yourself with the subtle differences in the two ECMAScript versions:
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000064.html
What are the key differences between JavaScript and ActionScript 3?

Community
  • 1
  • 1