Reverse engineering arkanoid DX-ball, or the new life of the old game

Congratulate all habravchan with unofficial day of computer graphics ! On this day, I want to tell you about how I made the online version of the old game.

Perhaps many are familiar with the game DX-Ball , I played it at a preschool age, and already at school I was in computer science lessons. So I was interested in doing it in HTML5.

Little about work

I will not give healthy pieces of code, and explain how it works, I will tell about there, how I analyzed this game, and I will say only about the game itself, that it was made only on the canvas. I wanted to make it as similar as possible to the original one, and leave as many files as possible unchanged, the only thing that changed was the record list - it became “endless”.
At the beginning, it was intended to redraw only those elements of which change, but because of the large number of bugs that arose in connection with this, I stopped at the option of full frame redrawing. And despite the fact that the game can be stretched to full screen, its resolution always remains 640x480px, however, as in the original.
')

Let's look at the composition of the game:

* .pcx files are raster backgrounds of the game such as the initial splash screen with a description of bonuses, and the final “High Score”. I did not begin to sort them, but it is possible to read about the PCX device in an interesting series of articles , right there on Habré.
* .mds - MIDI music files, savex helped me convert them to * .mp3.
The file Default.bds stores information about the location of bricks on all 50 levels.
At one level there are 20 ² bricks that are written byte-by-byte into this file.
From this and it turns out 20 ² × 50 = 20 KB
* .sbk - files of raster fonts, and the rest of the graphics (bricks, rackets, etc.)
I have nowhere to find information on how this file works, so I had to figure it out myself, and this is what I found out:
Files of this type contain something like this:


^{image is clickable.}
The structure of this file is slightly more complicated than the Default.bds, it describes the characters in turn,
The first 4 bytes of the file is the file header, it contains information about how many characters (images) the file contains.

After the title there is a sequential description of characters (images), as shown in the screenshot, the Sysfont.sbk file contains 94 characters. The width and height of the first character are specified in the 4'th and 8'th bytes. The 12th byte is the number of the character from the ASCII table, 0x41 = A, if it is 0x00, then this is not a character, but some kind of picture. Then there are several more bytes, in our case 130 (13 × 10), starting from the 17th byte - this is the raster of the symbol (shown in green in the figure). Then all this is repeated 93 more times (starting from the byte of the symbol indicating the width).

Images (symbols) are drawn from bottom to top, from left to right 1 byte = 1 pixel, the byte value is the color number.
As I understand it, the game uses 2 color modes, the first is used in the game itself, and the second is only in the splash screen.
Here are 2 schemes, each color has 2 numbers, the top one is the color number in Dec, and the bottom one in Hex:


Here is an example of the first 3 characters of the Sysfont.sbk file using the first scheme:


Oh yes, the zero in both tables is a transparent color, and the colors in the first scheme, from 224 to 231, are dynamic, that is, they are shifted by one color each frame to form such an animation.

But there is a problem, some characters, such as qypgj, should be lower than the rest, and apostrophes and other signs should be higher, but since all the characters are of different sizes, they are aligned to the bottom.



To solve this problem, there is a special byte, going after the symbol designation (in the first screenshot it is underlined in blue).
The characters gj this byte is 0xFD = 253. and y ^ ' this byte is 0x08 = 8. This is exactly the character offset relative to the rest, but why instead of a negative offset such large numbers? The fact is that this is the type of recording negative numbers, in one byte 128 negative and 128 positive numbers. If our byte is less than 128, then we don’t touch it, and if more, we just subtract 256 from it.
And we get an excellent result:


Before launching the game, all the images (symbols) are drawn in the same canvas as the game, I save them as pictures,
that is, char[...].img.src = canvas.toDataURL("image/png");
Since putImageData () is much slower than drawImage () and this is not the only minus.
putImageData, does not superimpose the image on top, but replaces it completely.

In the process of parsing the game, I discovered two secret bonuses that are not used in the original game :-)



All the animation in the game is optimized using requestAnimationFrame, but different devices give different FPS indicators. In order for the ball to fly at the same speed not depending on fps, I multiplied the speed of the ball by the coefficient delta which was calculated using the following formula: delta = 1000/fps/60; , my laptop managed to draw about 55 frames per second, but periodically hung up, and swallowed more than 30 frames at a time, because of this hangup, the delta coefficient was not calculated correctly, and the ball acquired an uncontrollable speed, so that I would get rid of this for 4 fps seconds, so it is rarely updated.

In the previous game, Doodle Jump, I gave users the opportunity to insert its iframe on any site, with the result that over 7,000 users played this game every day on third-party sites of completely different subjects, from personal blogs to recording studios.
Therefore, in DX-ball, I do not take away such an opportunity; moreover, the game is flexibly configured to be inserted into the site.

It seems everything, if in your opinion I didn’t say anything, ask questions, I will definitely answer.

Link to the game: DX-Ball.ru

PS The game is still damp, bugs and freezes are possible in it, so I will be grateful if you write about the shortcomings in the comments.