Ship It to the Browser: 2048 as a Web App

By the end of this lesson, you will:

• Treat your Python 2048 code as a game engine spec.

• Use a carefully-designed AI prompt to translate the logic into vanilla JavaScript.

• Build a single-file HTML web app that:

  • Implements the same 4×4 board logic,

  • Maps W/A/S/D and the arrow keys to moves,

  • Looks and feels like the classic 2048 game.

• Run and tweak your game in the browser using a sandpack HTML/JS environment.

• Reflect on what you handed to AI (architecture, contracts) vs. what AI handled (boilerplate, DOM, CSS).

Step 0: Your starter code

From the previous lesson, you now have a clean, modular Python engine:

• Board: 4×4 list of lists of ints, 0 means empty.

• Core functions:

  • create_initial_board()

  • add_random_tile(board)

  • move_board(board, direction) → (new_board, gained_score, moved)

  • check_game_state(board, target) → 'ongoing' | 'won' | 'lost'

• Helpers:

  • compress_row, merge_row, move_left, transpose, reverse_rows

• Constants:

  • TARGET_TILE = 2048

  • KEY_TO_DIRECTION = {"w": "up", "a": ...