Ship It to the Browser: 2048 as a Web App

Explore how to transform your modular Python 2048 game engine into an interactive web app. Learn to translate game logic to JavaScript, implement user controls, update scores, and manage game states. This lesson guides you step-by-step to build a fully functional 2048 game playable in the browser while leveraging AI for code generation and integration.

We'll cover the following...

Step 0: Your starter code
Step 1: Transform the Python code into a web app with AI
Wrap up

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 ...