2048游戏开发：JavaScript网格单元格X、Y轴标记问题求助

Hey there! I’ve built a few 2048 clones before, so let’s walk through how to fix this grid cell positioning issue. The key is to map each cell’s logical position (row/column) to actual screen coordinates, and there are two solid ways to do this—let’s break them down.

Option 1: Use CSS Grid (Simplest & Most Maintainable) #

CSS Grid was made for exactly this kind of grid layout, so you won’t have to manually calculate X/Y values most of the time. Here’s how to set it up:

1. Define the grid container

   .grid-container {
     display: grid;
     /* 4 columns, each 80px wide, with 10px gaps between cells */
     grid-template-columns: repeat(4, 80px);
     grid-template-rows: repeat(4, 80px);
     gap: 10px;
     /* Optional: center the grid on the page */
     margin: 20px auto;
   }
   

2. Style individual cells

   .cell {
     width: 80px;
     height: 80px;
     background-color: #cdc1b4;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: bold;
   }
   

3. Assign cells to grid positions
   For each cell, you just need to tell it which row and column it belongs to. If you’re generating cells dynamically in JS:

   const gridContainer = document.querySelector('.grid-container');
   for (let row = 0; row < 4; row++) {
     for (let col = 0; col < 4; col++) {
       const cell = document.createElement('div');
       cell.classList.add('cell');
       // Grid uses 1-based indexing, so add 1 to row/col
       cell.style.gridRow = row + 1;
       cell.style.gridColumn = col + 1;
       // Store the logical position for later game logic
       cell.dataset.row = row;
       cell.dataset.col = col;
       gridContainer.appendChild(cell);
     }
   }
   

   This way, the browser handles all the positioning math for you—no manual X/Y calculations needed!

Option 2: Absolute Positioning (For Full Control) #

If you prefer to calculate X/Y manually (maybe for custom animations), use absolute positioning inside a relative container:

1. Set up the container

   .grid-container {
     position: relative;
     /* Calculate total size: 4 cells * 80px + 3 gaps * 10px */
     width: calc(4 * 80px + 3 * 10px);
     height: calc(4 * 80px + 3 * 10px);
     margin: 20px auto;
   }
   

2. Calculate cell positions in JS

   const cellSize = 80;
   const gap = 10;
   const gridContainer = document.querySelector('.grid-container');
   
   for (let row = 0; row < 4; row++) {
     for (let col = 0; col < 4; col++) {
       const cell = document.createElement('div');
       cell.classList.add('cell');
       // Calculate Y position (top) based on row
       const top = row * (cellSize + gap);
       // Calculate X position (left) based on column
       const left = col * (cellSize + gap);
       cell.style.top = `${top}px`;
       cell.style.left = `${left}px`;
       gridContainer.appendChild(cell);
     }
   }
   

Common Pitfalls to Avoid #

• Mixing up rows and columns: Remember, rows correspond to the Y-axis (vertical position) and columns correspond to the X-axis (horizontal position). It’s easy to flip these by accident!
• Forgetting gaps: If you have spacing between cells, make sure to include the gap size in your position calculations (like we did with cellSize + gap).
• Container padding/borders: If your grid container has padding or borders, subtract those values from your position calculations to avoid offset cells.

Once you have the positions set up, you can use the data-row and data-col attributes to track each cell’s logical position for game logic (like moving cells, merging them, etc.).

内容的提问来源于stack exchange，提问作者Rohit