How to start writing a 2048 game in JavaScript?

Question

css

I decided to write a game in 2048, and everything would be fine, but I don’t know where to start.

I will write where I would start, and you write where you would start:

var data = []; //масив для хранения данных

data = [,,,,,,,,,,,,,,,,] //поле 4x4

Hmm, methods will be needed, then:

var twentyFortyeight = {}; //создаем объект

twentyFortyeight.data = [,,,,,,,,,,,,,,,,]; //поле 4x4

twentyFortyeight.ready = function(){
  //twentyFortyeight.data[0] = 2;
  //twentyFortyeight.data[1] = 2;
  //for(){console.log('выводим 4 элемента массива');}
};
twentyFortyeight.ready();
// 2 2 0 0
// 0 0 0 0
// 0 0 0 0
// 0 0 0 0
twentyFortyeight.up = function(){
//
}
twentyFortyeight.left = function(){
  if(twentyFortyeight.data[3]==undefined || twentyFortyeight.data[3]===twentyFortyeight.data[3-1]){}
  //data[1] равен data[0], значит складываем, помещаем сумму в data[0], удаляем data[1]
//проверка на равенство каждого 4 элемента массива на равенство с предедущим
}

Write what you think will really speed up the development of the game. For example, using DDT or any other professional devices. As you can see, I started with a static analysis of the game algorithm, but in the future, everything needs to come to dynamic addressing in arrays...

Answer 1

You wrap the whole game into a separate entity.
Getters: number of dimensions of the playing field, the size of the corresponding dimension, the current state of the field.
Methods: create a new game (array of dimensions), apply a motion vector (vector)
That's all you need. As a result, you get not a dull game in a 4v4 field, but an abstraction over it with the ability to play in any number of dimensions.
UPD You will probably also need a game state getter (the game continues or the game is over)
UPD2 We got a banal example of the answer to the question "Why does a programmer need a ruler/mathematics" :D

Answer 2

You can look at how the author himself did it , the code is quite understandable, and there are comments.
Specifically on the question: create an object of the playing field (grid), describe events for managing the game, make game states (win, lose, in progress). Then you can already conjure over the function of adding a new cell to the field, which is placed in any free cell (for example, on the approaches to 2048, increase the probability of a new cell appearing to the largest, etc.).

Answer 3

You can start by taking a course on Udacity that focuses on developing 2048 with JavaScript
https://www.udacity.com/course/ud248

Answer 4

It is necessary not to suffer garbage in ide, but to take a sheet of paper.
The application template is already there, great. Next, draw a diagram of how it all interacts with each other (flow diagram, for example).
Make a plan (a Gantt chart is fine) and stick to it.
At first glance, these actions seem redundant. Trust me, when you're done, a lot of pitfalls will surface.

Answer 5

Somehow, for the sake of interest, I made 2048 in Javascript, I don’t remember the subtleties, but the principle was as follows:
data - a two-dimensional 4x4 array, where all the "cubes" were stored
blocked - the same 4x4 array for marking sectors, where at that moment there was already an addition
of cubes when pressed, I run through all the cubes starting from the edge of the nearest one to the side where we are shifting (i.e. if you clicked "down", then I look through all the columns by cubes from the bottom up).
At the same time,
1.1) If there is a void, I shift it,
1.2) If there is no void, check which cube it is
1.2.1) If the cube != to ours, we leave everything in place
1.2.2) If this is the same cube, then check the blocked array for the fact that we received this cube by addition, or it was before that
1.2.2.1 ) If the cube was like this - we double ours, move it (animation), and delete it, change the data in data + put the block in the blocked
array logic, well, and checking for a loss according to the principle "if there is nowhere to go - a loser" and for winning when you receive block 2048.
If you are interested in digging yourself, achieving - go for it, there is nothing complicated, the main thing is to build logic and it will not necessarily be similar to the one what I described. If it's interesting to see the finished version, I can send a link to my version, but I'm not responsible for the cleanliness of the code, it was written in one evening)