This two-player six-by-seven game drops into the lowest empty cell and checks contiguous lines on four axes. Columns 1, 7, 2, 7, 3, 6, 4 produce P1’s bottom-row win on move seven; further drops are ignored until Reset.
Use the worked example
Use the seven column buttons for every move. Try the seven-drop sequence, then Reset and fill one column with six alternating tokens. Its seventh drop is rejected without spending P1’s turn. Text P1 and P2 accompanies the two token colors.
Trace the result step by step
The six-row, seven-column game uses the gravity and four-in-a-row rules described in UPenn's project explanation. Each player chooses a column; the board determines the landing cell. That separation keeps a button press from placing a token above an empty space.
Number columns 1 through 7 from left to right. The text summary lists rows from bottom to top, so its first row describes where the first tokens land. The board contains 6 × 7 = 42 spaces. Use that convention when comparing the visible grid with its row summary.
Each slot contains empty, P1, or P2. Keep current player and terminal result separate from the rendered token. Labels P1/P2 complement color so the turn and winning line remain understandable without distinguishing hues.
For the selected column, search upward from the bottom for its first empty slot. A valid move changes exactly that slot. It cannot float above an empty lower row or overwrite another token.
If every row in the column is occupied, retain the board, current player, move count, and result. Announce that the column is full and let the same player choose another. Invalid input should not become a hidden pass.
After Reset, make all six drops in column 1. The alternating tokens fill that column without making four of one player. A seventh attempt leaves P1 on turn with six moves recorded. Choose another column to continue; a rejected drop never acts as a pass.
In the seven-move example, P1 occupies bottom columns 1 through 4. P2 occupies the bottom two cells at columns 6 and 7 and the cell above column 7. P1 has the contiguous horizontal line, so the result announces a win on move seven and freezes further drops.
After a valid placement, inspect lines through the new token. For each axis, count contiguous same-player tokens in both opposing directions and add the new token once. The four axes are horizontal, vertical, and the two diagonals.
Using the declared bottom-up row coordinates, direction pairs can be represented by (row change, column change): (0, 1), (1, 0), (1, 1), and (1, −1), each with its reverse. Stop at the board boundary, an empty slot, or another player's token.
Four or more contiguous tokens on an axis wins. A gap cannot be skipped just because four same-player tokens exist somewhere on the row. Checking only one direction can also miss a new token that completes the middle of a line.
Copy a prompt for this example
Make a complete single-file HTML gravity game for two local players, P1 and P2. Display six rows and seven columns, with seven clearly labeled column-drop buttons. Show P1 or P2 inside occupied cells as well as different token colors, and keep the current turn, accepted move count, and result visible.
Start with an empty forty-two-cell board and P1 to move. A column action places that player's token in the lowest empty slot. Reject a full column without changing the board, turn, or move count, and tell the same player to choose another column.
After a legal placement, count contiguous matching tokens through the new token on horizontal, vertical, and both diagonal axes, checking both directions. Four or more wins. Check for a win before declaring a full-board draw. A nonterminal valid drop changes players; an invalid action does not. Ignore further drops after a win or draw.
From an empty board, columns 1, 7, 2, 7, 3, 6, 4 must give P1 the bottom-row win on move seven. A separate six-drop fill of one column must reject the seventh attempt. Include a text representation of the rows, stating that its first listed row is the bottom.
Reset empties the board, clears feedback, and restores P1. Keep controls usable by keyboard and make the entire board fit a narrow screen without sideways scrolling. Return the HTML, CSS, and JavaScript together.
Keep a legal move trace beside your source when changing the board styling or win detector. Preview the prepared HTML in NOS for a source-review session, then compare each accepted drop with its landing cell. Bring separate diagonal and draw positions into that review rather than inferring them from the horizontal example.