Basic Introduction to CSS
The first step is to be prepared to scream at the menace that is inconsistent cross-browser CSS handling. The second step is to know HTML to a moderate point (you need to understand the concept behind an ID and a class for an element, and what a parent element and a child element are).
CSS stands for Cascading Style Sheet. It's called 'cascading' because you can have multiple rules for one HTML element and they all cascade together when they apply to the element.
All CSS documents are set out like this:
selector { property: value; }
Selector is a rule that selects the specific element[s] you will be applying the styles/properties to. Property or a style is the name of the CSS style to apply to the elements found by the selector, with value being the value for the style, obviously.
Properties are the easy part to understand, the hard part is selectors. Selectors have their own syntax that are used to query the DOM (Document Object Model, ie. the HTML markup that you're styling). I won't go into too much detail about selectors, you can google around about it for more information. The simplest selectors are: element tag names, IDs and classes (this is why you needed to understand this concept before). Basic examples for each type are listed respectively.
body { background-color: #000000; }
The above example selects the body element (because we put 'body' as the selector, it searched the document for any element with the tag name 'body') and then sets its background colour to the hex colour value '#000000' (black). 'background-color' is one of the many CSS properties you can use in CSS, see here for a list of properties you can use.
#hello { color: #ff0000; }
The above example selects any element with the ID 'hello' and then sets its text colour (yes, the property name is ambiguous, but that's what it means - the colour of the text/font inside the element) to the hex colour value '#ff0000' (red). When I specifically say any, I mean that any sort of element tag name is accepted. For example, if you wanted any div (ie. any element with the tag name 'div') you would use the selector 'div#hello' instead.
.world { color: #0000ff; }
The above example selects any (again, any sort of element tag name rather than a specific one) and sets its text colour to the hex colour value '#0000ff' (blue). Like IDs, if you wanted to select a specific tag you would add the tag name before the selector ('div.world').
Now, combining all the examples together into a HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <style type="text/css"><!-- Raw CSS code can go in a style tag like this, have a look at other tutorials/guides to see how to include CSS code from a .css file instead --> /* this is a comment - any text inside these two things will not be parsed */ body { background-color: #000000; /* set the background color for the body to black*/ } #hello { color: #ff0000; /* set the text colour for any element with the id 'hello' to red */ } .world { color: #0000ff; /* set the text colour for any element with the id 'world' to blue */ } </style> </head> <body> <span id="hello">Hello </span> <span class="world">World!</span> </body> </html>
Just a small intro, read up on the other guides for a bigger introduction! Also, you'll hear the acronyms CSS3 and CSS2 chucked around - they are what they sound like, different versions of CSS. IE6+, Opera 9+, Firefox 2+ and all versions of Chrome support CSS2, the first upgrade of original CSS. CSS3 is a newer upgrade which adds new features that look to remove the needs for unnecessary images for things like text shadow and round borders. When I say upgrades, it's not really like engine upgrades (although the rendering engines have no doubt been improving with each CSS version) but rather more CSS properties to style elements with and additional selector syntax.
Genesis 19:4-5
Before they had gone to bed, all the men from every part of the city of Sodom - both young and old - surrounded the house. They called to Lot, "Where are the men who came to you tonight? Bring them out to us so that we can have sex with them."
wamt.js - My 2D HTML5 game engine
(view on Forrst)
When I started getting back into webdev earlier this year, it was around the time that everyone was talking about the amazing HTML5 specification. I wanted to make a dwarf-fortress esque game with the HTML5 canvas about five months ago. I got this far into the game, which had terrain generation but everything was still static. I then realised that I'd be better off just making a game engine that I could use for multiple game engines later without recycling code.
I never finished that game because I've been working on what is now called wamt.js, my game engine, for the past five months on and off. The original version was a lot of repetitive code and it ran around 30fps, so I started rewriting it about a month and a half ago. The new version runs at 60fps steady on all examples, and the code is 15kb smaller after being minified.
Now before I get into showing you examples, I know some people are going to ask "What's the point of writing an engine when there's already plenty of HTML5 game engines?". Well for 1) I have thoroughly enjoyed writing my own engine and it has really helped me work on my webdev skills and 2) there are some engines that come with price tags for some of their features, and I wanted one that is completely free and open-source like web software should be.
Here are the examples I have so far. Please note that these are really simple things and I've spent more time on the actual engine then working on interesting examples, so I hope to add some cooler ones soon.
I have many ideas to add still, such as polygons (these were in the pre-rewrite version of the engine, I just need to re-add them), particles, tilemaps and more. I will be making Android and Desktop versions of the engine eventually too, which (unfortunately) will probably not all be written in JavaScript but the API will be exactly the same for all different versions of the engine even though the programming languages will be different, so you could easily port games between each engine branch. I would also like to make a networking extension for it as well.
Invited to Forrst
I got accepted into Forrst, yay.
