Tiny Arkanoid in JavaScript (30 lines of code)

Watching how people in 30 lines of javascript fit excel and snake , I decided to keep up with progress, and create something like that.
So, ladies and gentlemen - 30ti line Arkanoid on pure JS.



Link to fiddle .
I will also duplicate the codepen , and then the fiddle replied the whole night with 500k.

Javascript:

(function (fld, pF, px, py, dx, dy, lifes, score) { var cycle = setInterval(function () { var bx = pF(ball.style.left = pF(ball.style.left) + dx + 'px'), by = pF(ball.style.top = pF(ball.style.top) + dy + 'px'), row = ((by - 30) / 14) | 0, col = (bx / 32) | 0; if (bx < 0 && dx < 0 || bx >= 314 && dx > 0) dx *= -1; if (bx + 6 >= px && bx + 6 <= px + 64 && by >= 259 && by <= 264) { dy *= -1; if (bx + 6 <= px + 21) dx = -6; else if (bx + 6 >= px + 43) dx = 6; else if (Math.abs(dx) == 6) dx = (dx * 2 / 3) | 0; } if (by < 0) dy *= -1; if (by >= 288 && !--lifes) clearInterval(cycle), alert('Game over!'); if (by >= 288 && lifes) dy *= -1, lifesNode.innerHTML = lifes; if (by >= 18 && by <= 100 && fld[row * 10 + col].className != 'removed') { dy *= -1, fld[row * 10 + col].className = 'removed'; if (dx < 0 && ((bx | 0) % 32 < 10 || (bx | 0) % 32 > 22)) dx *= -1; if (dx > 0 && (((bx + 12) | 0) % 32 < 10 || ((bx + 12) | 0) % 32 > 22)) dx *= -1; scoreNode.innerHTML = ++score; if (score == 50) clearInterval(cycle), alert('Victory!'); } }, 1000 / 60); document.addEventListener('mousemove', function (e) { px = (e.pageX > 40) ? ((e.pageX < 290) ? e.pageX - 40 : 256) : 0; paddle.style.left = px + 'px'; }, false); }(field.children, parseFloat, 129, 270, -4, -4, 3, 0)); 

')
In general, I tried to achieve maximum authenticity:

• the angle of reflection of the ball depends (slightly) on which side of the racket it fell: when falling on the left third the ball flies to the left, when hit on the right third it flies to the right (in both cases the projectile reflects at a slightly larger angle than when hitting the middle) , when it hits the center, the ball flies off at 45 ° and its direction along the X axis does not change.
• Scoring (and how without it).
• Given three lives. However, when the ball hits the lower edge, the game does not reset, and the ball just bounces and one life is taken away.

Among the shortcomings: the ball sometimes inadequately behaves and breaks too many bricks.

Under the hood

With the layout is simple. Bricks - inline-blocks, racket and projectile - position: absolute.

But with collision detection a little more interesting. The area where the bricks are located is bounded above and below, which means it makes sense to check the collisions only when the projectile is in this area. The height and width of the bricks is determined. Therefore, taking the coordinates of the ball, we can accurately determine the number of the brick in which it fell. If its coordinates are X and Y , and the width and height of bricks are width and height, then taking the integer part from the particular X / width and Y / height we get exactly the column and row number col and row of the current target. Knowing this, we can calculate the number of this element:
number = row * rowLength + col .
Fortunately, querySelectorAll returns the elements in exactly the order in which they are arranged in html. And we can easily remove the current brick:
elements[number].className = 'removed' .

setInterval

Despite the fact that the native requestAnimationFrame already implemented in all desktop browsers, it was decided to abandon it in favor of setInterval. Firstly, it also allows you to cover the old versions, and secondly, it saves one (precious!) Line of code:

 requestAnimationFrame(function () frame { requestAnimationFrame(frame); }); //  var cycle = setInterval(function () { }, delay); 

Total

The code, in my opinion, turned out quite compact. The longest line is 88 characters (including indentation). The game itself is a bit crooked, well, what else can you expect from 30 lines?)
Now apparently, as someone noticed in the comments to previous posts, it is worth waiting for "Tiny Windows" in 30 lines.