Loading AI Environment...

AI Type

Random

Expectimax

Depth

2048 AI

SCORE: 0

Select AI and Depth, then press Start.

About This Project

This interactive web application demonstrates an AI game engine that was designed from scratch by myself and some teammates to quickly solve the game 2048. All of the game logic and AI calculations run directly in your browser using Python, powered by PyScript and WASM.

AI Types:

Random: This takes a pseudorandomly selected valid move at each step.
Expectimax: Searches the game tree by alternating between MAX nodes (the AI's move, maximizing heuristic value) and CHANCE nodes (the random tile spawn, computed as a probability-weighted average over all empty cells — 90% for a 2-tile, 10% for a 4-tile). Board states are scored on monotonicity, empty tile count, and adjacent mergeable pairs, normalized and combined with tuned weights. Optimizations include transposition-table caching, adaptive search depth, and empty-cell subsampling to bound the branching factor on open boards.

The Depth setting controls the look-ahead horizon. Higher depth = stronger play at the cost of more computation, particularly when many tiles are empty. Moves are throttled to a 5ms floor for UI responsiveness — clone the repo to benchmark full speed.

packages = ["numpy"] [[fetch]] from = "/static/" to = "." files = [ "Action.py", "Ai.py", "game2048.py", "heuristic.py", "MinMaxAI.py", "Optimizations.py", "State.py" ]

import asyncio import numpy as np from js import document from pyodide.ffi import create_proxy import time from game2048 import Game2048 from Ai import AIExpectimaxOptimized, AIRandom from heuristic import weighted_heuristic game_running = False def draw_board(board_data, score_data): board_element = document.getElementById("board") score_element = document.getElementById("score") board_element.innerHTML = '' score_element.innerText = str(score_data) for tile_value in board_data.flatten(): tile = document.createElement('div') tile.className = 'tile' if tile_value > 0: tile.innerText = str(tile_value) tile.classList.add(f"tile-{int(tile_value)}") board_element.appendChild(tile) async def start_game(event): global game_running if game_running: return game_running = True status_element = document.getElementById("status") document.getElementById("start-button").disabled = True document.getElementById("stop-button").disabled = False document.getElementById("reset-button").disabled = True ai_type = document.querySelector('input[name="ai_type"]:checked').value depth = int(document.getElementById("depth-select").value) document.getElementById("game-title").innerText = f"2048 - {ai_type}" status_element.innerText = f"Running {ai_type} with depth {depth}..." game = Game2048() if ai_type == 'Expectimax': weights = np.array([9, 9, 11, 15, 50]) ai = AIExpectimaxOptimized(game=game, depth=depth, heuristic=weighted_heuristic, weights=weights) else: ai = AIRandom(game=game) MINIMUM_MOVE_TIME = 0.05 while game_running and not game.gameOver: draw_board(game.state.board, game.score) start_time = time.monotonic() state = game.getState() action = ai.decideAction(state=state) end_time = time.monotonic() ai_think_time = end_time - start_time sleep_duration = max(0, MINIMUM_MOVE_TIME - ai_think_time) await asyncio.sleep(sleep_duration) if action is None: break game.makeMove(action=action) if game_running: status_element.innerText = f"Game Over! Final Score: {game.score}" game_over_div = document.createElement('div') game_over_div.className = 'game-over-overlay' game_over_div.style.display = 'flex' game_over_div.innerHTML = f'

Game Over!

' document.getElementById('board').appendChild(game_over_div) else: status_element.innerText = "Game stopped by user." game_running = False document.getElementById("start-button").disabled = False document.getElementById("stop-button").disabled = True document.getElementById("reset-button").disabled = False def stop_game(event): global game_running game_running = False def reset_game(event): global game_running game_running = False draw_board(np.zeros((4, 4)), 0) document.getElementById("status").innerText = "Select AI and Depth, then press Start." document.getElementById("game-title").innerText = "2048 AI" document.getElementById("start-button").disabled = False document.getElementById("stop-button").disabled = True document.getElementById("reset-button").disabled = False def setup(): """Initializes the page and sets up all event listeners.""" start_proxy = create_proxy(start_game) stop_proxy = create_proxy(stop_game) reset_proxy = create_proxy(reset_game) document.getElementById("start-button").addEventListener("click", start_proxy) document.getElementById("stop-button").addEventListener("click", stop_proxy) document.getElementById("reset-button").addEventListener("click", reset_proxy) reset_game(None) # 4. REVEAL THE MAIN CONTENT WHEN PYTHON IS READY loader = document.getElementById("loader") main_content = document.getElementById("main-content") loader.style.display = "none" main_content.style.display = "flex" setup()