If you play cubes for a long time , they turn into balls
Looking at the name of the game Lines 9753, you might think that this story is about the 9753rd clone of the famous game Color Lines, in which you need to make 5 balls in a row of the same color. Yes, it is, a clone. Well, what else could be new? I will share my ideas and some subtleties of the implementation in HTML + CSS + JavaScript. I’ll tell you what the numbers 9753 mean. I’ll propose a way to find another combination of numbers and see how the game changes. It will become more interesting or boring - you decide. Have you guessed what 9753 means? Then, please, under cat.
Variety of game options
Ever wondered where in the original game came the field dimension 9x9? It is amazing how well not only the dimension of the game is chosen, but also other parameters, so it’s interesting to play: the number of colors is 7, the number of balls in a row is 5 and the number of balls appearing per turn is 3. These 4 parameters are put in the name of the game - Lines 9753 It is this four that, by and large, determines the complexity of the game, which is most likely not suitable for everyone.Perhaps someone will like a different set. For instance:- 3333 - solitude like solitaire, you can’t be afraid to get into a dead end and try to collapse as many balls as possible at a time (5 is still easy, 6 is harder, 7 and 8 are almost unrealistic), suitable in the case when you do not want to think at all;
- 5643 - on a 5x5 board, cells are not as small as 9x9, so it’s convenient to play on the phone, but the difficulty seems to be slightly higher than in 9753;
- 5543 is a slightly easier option than 5643, because the number of different colors is less, which means it is more likely to make a series of balls of the same color;
- 4443 - comparable in complexity to 5643, but the balls are even larger - only 4 balls on the short side of the screen.
I think everyone will find suitable game options for themselves. Do not disconnect from the network and together we will be able to see the most popular options in the table on the site.Move back
It is allowed to make moves back. Once upon a time, when the trees were tall, and I was still a student, I had to play Color Lines. I really liked the game. Once, having lost half a day in it, and having scored several thousand points, I came to a standstill. The realization came that it was an accident, that the balls fell out successfully, and that in the near future I could not go so far. To break my own record, I will have to kill ten times more time, and then if I’m lucky. Since then, I have not played this game for a long time. The feeling of universal injustice is deep in my soul. And it sat there until the insidious plan of revenge crystallized - to make the same game, but with the ability to rewind moves back at least to the very beginning. It was this option that became for me the main motivating reason to write the game in my own way.Fixed randomness
Some players said that sometimes the car deliberately puts balls in uncomfortable places to complicate the passage. Especially when there are very few free cells left, it is impossible to wait for the right ball in the right place. In other words, randomness in the game is far from random. With a new opportunity to rewind moves backward, it would not be logical to offer each time a new place for new balls. So it would be possible to go back and forth until the right ball appears in the right place. Therefore, in the game all the moves of the machine are determined and depend randomly on the move number and the location of the balls on the field. Moreover, everyone plays the same game. That is, the game begins with the same arrangement (the first move of the car), and then the moves of the car depend on how the player goes: if the players go the same way,then on the field they will have the same arrangement of balls. This allows you to objectively and regardless of chance to compare different solutions. Some people like to measure who is next, who is faster ... Decisions in the form of a sequence of player moves are sent to the server. The car’s moves are calculated according to the same random algorithm. The server cannot be tricked, the entire sequence is checked for correctness, and only then the result is entered into the table. All records are saved along with the sequence of player moves. Then we analyze and publish the best decisions of those who score 9999 points. It will be necessary to come up with what criteria to choose the best.The car’s moves are calculated according to the same random algorithm. The server cannot be tricked, the entire sequence is checked for correctness, and only then the result is entered into the table. All records are saved along with the sequence of player moves. Then we analyze and publish the best decisions of those who score 9999 points. It will be necessary to come up with what criteria to choose the best.The car’s moves are calculated according to the same random algorithm. The server cannot be tricked, the entire sequence is checked for correctness, and only then the result is entered into the table. All records are saved along with the sequence of player moves. Then we analyze and publish the best decisions of those who score 9999 points. It will be necessary to come up with what criteria to choose the best.
prompt
The positions and colors of the following balls are shown. Due to the fact that the game can be rewound forward and backward, it makes no sense to hide the next moves. It could be shown several moves forward, but it didn’t occur to a simple interface (keep in mind that the car’s moves change if the cells are occupied as a result of the player’s actions).Scoring
Scoring is done according to the classical formula N * (1 + N - DIMENSION), where N is the number of balls in the line, DIMENSION is the dimension of the playing field. That is, 5, 6, 7, 8 of the balls collected together give 5, 12, 21 and 32 points, respectively. For game option 3333, when 3, 4, 5, and 6 balls collapse, 3, 8, 15, 24 are obtained.Graphic arts
The graphics are only vector - I don’t like scaling artifacts, especially fuzzy borders. The main animated graphic elements: a vintage tape recorder and bouncing balls with highlights and gradient lighting. They are made using CSS and seasoned with pieces of JavaScript. Initially, a dark color scheme was made. You can try it by turning it on in the settings. However, everything looks gloomy. I like the light one better.Three-dimensional ball
Paradoxical as it sounds, but from 3 rectangles nested into each other, a three-dimensional ball is obtained:- container specifying the size and position on the screen
- round square, creating a two-dimensional shape, contracting and stretching during bouncing
- a square with an elliptical gradient fill that defines the color and illumination of the ball, adding a third dimension.
With a container, everything is simple. Its CSS attributes position, left and top specify the coordinates of the ball on the field, and font-size sets the size relative to which the other two squares are scaled. A round square is, like the vast majority of rounds, on our web pages, just a square with the most rounded corners. When we click on it with a mouse, it flatters, squeezing from above and expanding the sides. And if the click turns out to be as quick as a mouse click, then the ball starts to bounce.
@keyframes flat {
0% {height: 1.0em; width: 1.0em; top: 0; left: 0em;}
100% {height: 0.9em; width: 1.05em; top: 0.1em; left: -0.025em;}
}
@keyframes jumping {
0% {height: 0.9em; width: 1.025em; top: 0.1em; left: -0.0125em;}
10% {height: 1.02em; width: 1.0em; top: -0.02em; left: 0em;}
40% {height: 1.008em; width: 1.0em; top: -0.18em; left: 0em;}
50% {height: 1.01em; width: 1.0em; top: -0.2em; left: 0em;}
60% {height: 1.0em; width: 1.0em; top: -0.18em; left: 0em;}
70% {height: 1.0em; width: 1.0em; top: -0.1em; left: 0em;}
90% {height: 1.0em; width: 1.0em; top: 0em; left: 0em;}
100% {height: 0.9em; width: 1.025em; top: 0.1em; left: -0.0125em;}
}
The maximum number of colors is 15.Not all colors have quite smooth gradients even on a good monitor, so I selected the colors for the eye. The more colors, the more difficult it is to distinguish balls by color on the field. It seems 15 colors is enough.Counter
The main secret of the counter is in tapes with numbers. Each ribbon is hidden inside a rectangle through which only one digit is visible. The edges of this rectangle are slightly darkened to create a rounding effect, as if inside there is not a tape, but a disk. The speed of the scroll animation is proportional to the remaining increment of the counter and is limited by some reasonable values. The last digit is spinning 1 second.Sound
Sounds (explosion and jumping) are synthetic. They are generated by uncomplicated mathematical formulas. This creates some aftertaste of the 80s when most of the sounds in games were generated using a single-frequency frequency generator. The pluses include the program’s compactness: a simple generator of such sound effects, written in JavaScript, is much smaller than an mp3 file. For each ball, select your own pair of lowFreq and highFreq notes (see wikipedia ) and fill the audio buffer like this: var soundUpBuffer = audioCtx.createBuffer(1, frameCount, sampleRate);
for (var i = 0; i < frameCount; i++) {
var x = i / frameCount;
var time = duration * x;
var volume = Math.sin(x * Math.PI);
var freq = lowFreq + Math.sqrt(x) * (highFreq - lowFreq);
buffer[i] = volume * Math.sin(2 * Math.PI * freq * time);
}
Here the frequency changes from lowFreq to highFreq along the curve x ½ , and the volume sin (π x).At an explosion, the volume decays according to the formula 1 / (1 + 10 * x + 1000 * x * x), and the frequency is randomly selected from the first to the fifth octave.Adaptive dialog box size
Implemented an algorithm for selecting the size of the dialog box so that it takes up as much space as possible and does not go beyond the boundaries of the visible area. The problem is that on different devices the size of the dialogs is different - sometimes it turns out too small, and sometimes it does not enter the screen. I made the size of the dialogs depend on the font size (CSS units em). Next, I sort through the font size so that the dialogue takes up no more than 95% of any of the screen dimensions. So I did not have to make cases for adaptive CSS.Small program size
The whole game fits in one html file of about 150Kb. About 3000 lines of source code (of course, without the server side). No JavaScript libraries and frameworks were used - everything is natural, as in the Stone Age. Sometimes you just don’t want to deal with a third-party API, and sometimes it’s useful to understand how much frameworks simplify the life of a bicycle inventor and a new rake tester. It is useful to first come up with your own how to implement this or that idea, and only then compare with how others did it. For example, the version for Android takes only 250Kb. It consists of a thin WebView wrapper and a pack of png-shek for different phone resolutions. By the way, png-shki could be replaced with one vector xml-koy. It would have turned out exactly in the spirit of minimalism.Forum
The forum runs on phpBB . The account allows you to:- save your achievements on the server so that they are not lost when changing your phone or computer
- play alternately on one device, then on another
- leave messages and ask questions to other players or developers.
i18n and l10n
Internationalization and localization. The game has been translated into Russian and English. Only 35 short phrases. I would not refuse free assistance in translating into several more popular languages (Chinese, German, ...).No ads
You can often hear the opinion that if the program is free and without ads, it means a trojan, backdoor, virus ... In other words, free cheese is only in a mousetrap. Otherwise, why? Why is someone willing to do something for others for free? I don’t know the general answer. Not only that, I don’t know exactly why I do it myself. I'm just curious. If you like something, then I often wonder how the author succeeded. I would like to try to do the same or even better. Sometimes I like everything, with the exception of some details, and there is a desire to do something like this, but with my blackjack and fingertips.Conclusion
That's all for now. I hope you enjoy the game as much as I was interested in creating it. I will be glad to any comments.References