Javascript lesson two. Arcanoid game: bring some JS!

Hi there,

I continue with the Arcanoid game and this is lesson two.
Last time we created basic HTML/CSS scaffolding for the game; today we bring some Javascript. First we create all the game elements on the fly.

Things you need to know before we start:

  • JS syntax;
  • DOM manipulations (you can get in touch with it here);
  • querySelector() (man page on MDN).

Static vs. dynamic

Some elements on the HTML page are static, it means we are not going to change ’em during the game. For example, the footer and the header itself (excluding the statistic info) are static.

All the elements inside the playground (bricks, ball, racket) are dynamic — they will move, will appear/disappear and will respond somehow to the user activity (pay attention, the playground itself is static!). If we are going to handle dynamic elements by JS, let’s not stop half-way, let’s create ’em by JS too!

Skeptic: Roman, do not publish the code on the GitHub, people will just copy-paste it!
Me: Shut up!
Me,to the audience: Guys, it’s much better to create your own code before checking out my version.

Go ahead with the branch lesson/02… in the repository:

  1. remove all the elements inside div.playground;
  2. remove all the dimensions from .brick, .ball and .racket (in the style.css);
  3. add the js/script.js.

Main points here:

  • as we decided previous time, all the game elements are have position: absolute; and they are positioned relative to the playground.
  • We have three rows per to bricks (= 30 bricks) in the top of the playground; magic numbers are replaced with constants.

Q: Constants? In my Javascript?
A: Alright, alright, I remember that there is no really constant thing in JS. But according to the general convention some variables that wont be changed during the application cycle are considered as constants and named in UPPERCASE.

  • We have appropriate variables for the playground, the ball, the racket.
    • Respecting the principle, each brick could be accessed as well. As this code organisation is not the final one, we will organize such access later.
  • All the positioning of elements happens via
    elm.style.[[top|bottom|left|right]] = [[number]] + "px";.

    • Do not forget, these properties are string and must contain dimension like "px" or em (if you feel it too simple ;)).
    • One more point, any change you make to the elm.style object is represented in the style="" attribute of appropriate HTML element so you can easily check it in Firebug or any other Developer Panel.
  • width and height are set via elm.style as well (they also require dimensions).
  • All the other styling (like position: absolute;, background-image and so on) should be set in the CSS.
    • The rule of thumb here: change numbers in JS; change complex appearance by adding/removing class name(-s).

If you did it well you should see 30 bricks, one ball and one racket in the playground.
lesson-02
Next two lessons we will discuss the code organization (I foresee hundreds lines of code, it’s not ok to keep ’em in one file) and the generic game logic.


Hope you enjoy this thread. If you have any notes, please comment this post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s