Javascript lessons. Arcanoid game. Let the show begin!

Hi there,

I’d like to provide several Javascript lessons for you for only €1500 for free :).
Let’s write the Arcanoid game from scratch step by step. We will discuss a lot of Web programming principles, will use contemporary technologies and finally will create the finalized ready-to-use product.

What is required?

We will use pure HTML, CSS and JS without any frameworks. All the functionality we need we’ll create by our own. I believe that you already have basic understanding of the HTML, CSS and JS: you understand how position: absolute; works and how to create/update the HTML element on the fly.
If no — better take some lessons at W3Schools.
It would be great if you are familiar with Git or any other Version Controlling System to store your code.

All the lessons are supported by the code on GitHub. Each lesson is represented by appropriate lesson/… branch, for instance, lesson one.
Despite of you can copy-paste my code, it’s better to create your own.

Let’s begin with the lesson 1.
I want you already know following things for today:

  • the basic understanding of the server and the client;
  • basic HTML and CSS things;
  • how CSS positioning works.

The Server and the Client

When you open a web-page in your browser, it asks the remote computer to give some files. after all these files are downloaded (it depends on your network speed when exactly it happens), the browser proceeds with showing you the content it obtained.
Usually the browser needs an .html file to describe all the elements, .css file(-s) to determine how they look like and .js file(-s) to describe the behavior of the page. If the page has media resources (pictures, audio, video), they also are loaded.

Q: The skeptic guy asks why do we need the server for such a simple project?
A: Well, we don’t for this one but it’s really convenient to develop client-server things having the client and the server. Moreover, some features do not work without the server, for instance, XMLHTTPRequest.

So after you follow the run instructions from the GitHub, you should be able to open the http://localhost:8080/index.html in your browser.

The playground and visual environment

Let’s create the area where our application resides. We need

  • the header with the statistic info for the game (lives available, bricks left, total score and
    so on);
  • the main area where the action takes place (the playground);
  • the footer with copyright info.

Important point, your app should cover the whole page so make sure root elements are 100% wide and high. Foresee minimal dimensions for the application. Make sure you do not observe scrollbars unless you reach minimal page size.

Let’s use position: absolute; for attaching elements to page borders, for instance,

  • .header is attached to the top and is 100% wide and 40px high;
  • .footer is attached to the bottom and is also 100% wide and 40px high;
  • .playground‘s top and bottom are 50px far from appropriate page border (this makes 10px gap between .header/.footer and .playground); same for left and right but with 10px distance to page borders.

Q: Can I use another method of “sticky footer”?
A: Sure! Just verify it works and there are no scrollbars.

The playground: go deeper

There will be following elements on the playground:

  • bricks; they cannot move,
  • the ball that can move in both X and Y directions (respecting playground edges),
  • the racket that can move only horizontally (it will be controlled by the mouse and/or the keyboard).

It’s really convenient to set position: absolute; to all that elements because we are going to control them by JS. Their coordinates should be relative to the .playground so, for instance, the ball can fly between (0, 0) and (playground.width, playground.height).

I put the some dummy elements in the playground just to show the possible look.
Next time we’ll bring some JS to this page: we’ll create and place all the playground elements on the fly.

Hope you enjoyed the lesson. Please provide your feedback in comments.


One thought on “Javascript lessons. Arcanoid game. Let the show begin!

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s