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,
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
- 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.
position: absolute; for attaching elements to page borders, for instance,
.headeris attached to the top and is
.footeris attached to the bottom and is also
.playground‘s top and bottom are
50pxfar from appropriate page border (this makes
.playground); same for left and right but with
10pxdistance 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
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.