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. I was the primary lead on Expectimax AI, heuristic implementation, and performance optimization, while my teammates worked on game logic / implementation, UI, Monte Carlo & MinMax, and heuristic tuning. NB! Time between moves has a floor of 5 ms for UI functionality, to see proper speed you'll have to clone the repo.

AI Types:

Random: This takes a pseudorandomly selected valid move at each step
Expectimax: Uses heuristics to look ahead a set number of moves and guess at the best outcome.

The Depth setting for the Expectimax AI controls how far it looks into the future. A higher depth results in stronger play but requires more computation, especially for board states with many empty tiles.

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()