• Meeting AP CSP College Board Requirements
    • Input (Big Idea 3)
    • Persistent Data Storage (Big Idea 3)
    • Sequencing (Big Idea 3)
    • Selection (Big Idea 3)
    • Iteration (Big Idea 3)
    • Lists / Collections (Big Idea 3)
    • Procedures / Functions (Big Idea 3)
    • Algorithms (Big Idea 3)
    • The Internet (Big Idea 4)
    • Impact of Computing (Big Idea 5)
  • Individual AP CSP Requirements by Team Member
    • Akhil — AP CSP Alignment
    • Moiz — AP CSP Alignment
    • Samarth — AP CSP Alignment
    • Arnav — AP CSP Alignment
    • Ethan — AP CSP Alignment
    • Aneesh — AP CSP Alignment
  • Create Performance Task Alignment

    • How the Game Works

    Our Snakes and Ladders game is a gamified educational platform that teaches AP Computer Science Principles through an interactive board game. Players learn CS concepts by progressing through the board — and the knowledge they gain directly translates into firepower for the final battles.

    Game Flow

    Login / Guest Mode
    →
    Character Select
    →
    Lessons (1-5)
    →
    Questions (7-56)
    →
    Mode Selection
    →
    Boss Battle / PvP Arena
    →
    Victory Page
    →
    Hall of Champions

    Six Sections of the Board

    Section 1 — Lessons (Squares 1–6)

    Five interactive lessons covering programming basics, data structures, networking, cybersecurity, and data ethics. Each completed lesson awards bullets that carry over to the boss fight.

    Section 2 — Question Gauntlet (Squares 7–56)

    Players roll a dice to advance across 50 squares, each containing a multiple-choice question from one of five CS topics. Correct answers earn additional bullets. Wrong answers? No penalty, but no ammo either.

    Section 3 — Mode Selection Hub

    After completing enough questions, players reach the Mode Selection page (mode-selection.html) where they choose between cooperative Boss Battle or competitive PvP Arena. Real-time Socket.IO updates show current player counts in each mode.

    Section 4 — Boss Battle (Co-op Multiplayer)

    Up to 10 players cooperate in real-time via WebSockets to defeat a dragon boss. The boss has complex AI with multiple movement patterns (dash, zigzag, chase, circle). Powerups spawn every 5 seconds, and a group chat allows coordination. Notifications appear on-screen for player joins, powerup pickups, and defeats.

    Section 5 — PvP Arena (1v1 Competitive)

    Two players battle head-to-head in a real-time duel. Players are separated by a center wall barrier, using earned bullets as ammo. Movement via WASD/arrows, mouse aiming, and click/spacebar to shoot. Lives tracked with health bars, chat system for communication, and auto-matchmaking when opponents join.

    Section 6 — Victory Page & Hall of Champions

    Winners are directed to victory.html with animated confetti, player stats summary (bullets earned, time played, win mode), and the Hall of Champions leaderboard showing all game completers. Players can cement their victory or reset progress to play again.

    Characters & Powerups

    Players choose from four pixel-art characters, each with a unique visual identity:

    Character Icon Color
    Knight Shield Blue
    Wizard Magic Purple
    Archer Bow Green
    Warrior Sword Orange

    During the boss battle, four powerup types spawn on the arena:

    • Damage Boost — 2x damage for 8 seconds
    • Speed Boost — 1.5x movement speed for 10 seconds
    • Rapid Fire — +15 bullets instantly
    • Health Restore — Recover 1 life (or +10 bullets if full)

    Technical Architecture & Transactional Data

    The system uses a Jekyll static frontend communicating with a Flask (Python) backend via REST APIs and WebSocket connections.

    File Structure

    LayerFilePurpose
    Frontendgame-board-part1.htmlLessons, character selection, login
    game-board-part2.htmlQuestion board with dice rolling
    mode-selection.htmlBattle mode hub (Boss vs PvP)
    boss-battle.htmlCo-op boss arena with canvas rendering
    pvp-arena.html1v1 competitive arena with center wall
    victory.htmlVictory celebration, Hall of Champions
    Shared JSsnakes-game.jsCore game logic, API calls, autosave
    questions_bank.js50 questions across 5 CS topics
    Backend APIapi/snakes_game.pyCRUD, leaderboard, champions, reset
    api/snakes_extended.pyLessons, questions, unlock endpoints
    api/boss_battle.pyBattle room creation/joining
    WebSocketsocketio_handlers/boss_battle.pyBoss + PvP sync, chat, powerups
    Modelsmodel/snakes_game.pySnakesGameData (progress, bullets, lives)
    model/boss_room.pyBossRoom, BossPlayer, BossBattleStats

    How Transactional Data Flows

    Every user action triggers a backend transaction. Here are the key data flows:

    Lesson Completion:

    Complete Lesson
    →
    POST /api/snakes/complete-lesson
    →
    Server updates completed_lessons[] & total_bullets
    →
    Unlock next section

    Answering Questions:

    Answer Question
    →
    POST /api/snakes/answer-question
    →
    Update current_square, visited_squares[]
    →
    Award bullets if correct

    Autosave (Every 10 seconds):

    Timer fires
    →
    PUT /api/snakes/
    →
    Save full state (square, bullets, lives, time, lessons, sections)

    Boss Battle (Real-time):

    POST /api/boss/join
    →
    Get room_id
    →
    WebSocket connect
    →
    Position sync (50ms) + Powerup spawn (5s)

    Key API Transactions

    Action Method & Endpoint Payload Server Response
    Load progress GET /api/snakes/ — Full game state
    Complete lesson POST /api/snakes/complete-lesson {lesson_number, bullets_earned} Updated totals
    Answer question POST /api/snakes/answer-question {square, bullets_earned, correct} Updated position
    Join boss battle POST /api/boss/join {bullets, lives, character} {room_id, players}
    Get leaderboard GET /api/snakes/leaderboard — Top 10 by bullets

    Authentication Flow

    All API calls are secured with JWT tokens stored in HttpOnly cookies. The @token_required() decorator extracts the user ID from the token payload and associates all game data with the correct SnakesGameData database record. Guest/demo mode uses sessionStorage as a fallback with no server persistence.

    Team Work Split

    Akhil

    Scrum Master / Multiplayer & Victory System Developer
    ⚡ Real-time Multiplayer Sync — connects players across the world in milliseconds
    • Project coordination, sprint planning, and stand-ups
    • WebSocket handler (socketio_handlers/boss_battle.py)
    • Real-time player sync for both Boss Battle and PvP
    • Group chat system (lobby + in-battle messaging)
    • victory.html with confetti animation and Hall of Champions
    • Leaderboard API, Champions API, game completion endpoints
    • Autosave mechanism (10s interval) and demo/guest mode
    Code Snippet ```python # WebSocket player sync (socketio_handlers/boss_battle.py) @socketio.on('boss_player_move') def handle_player_move(data): room_id = data.get('room_id') boss_battles[room_id]['players'][request.sid]['x'] = data['x'] boss_battles[room_id]['players'][request.sid]['y'] = data['y'] emit('boss_player_position', {'sid': request.sid, 'x': data['x'], 'y': data['y']}, room=room_id, include_self=False) ```

    Moiz

    DevOps / Authentication Lead
    🔐 Secure Sessions — JWT tokens keep your game data safe across devices
    • Backend deployment: Dockerfile, docker-compose, Nginx
    • Production environment variables and CORS config
    • JWT authentication system (api/jwt_authorize.py)
    • Cookie management and @token_required() decorator
    • Demo/Guest mode with sessionStorage fallback
    • Flask application factory and server configuration
    Code Snippet ```python # JWT token validation (api/jwt_authorize.py) def token_required(): def decorator(f): @wraps(f) def decorated(*args, **kwargs): token = request.cookies.get('jwt') if not token: return {"message": "Token missing"}, 401 data = jwt.decode(token, SECRET_KEY, algorithms=["HS256"]) g.current_user = User.query.get(data['user_id']) return f(*args, **kwargs) return decorated return decorator ```

    Samarth

    Lesson System Developer
    📚 Progressive Learning — turns CS education into unlockable game achievements
    • Five interactive lesson pages (lessons/lesson1-5.html)
    • Arcade-style lesson CSS and UI animations
    • POST /api/snakes/complete-lesson endpoint
    • Section unlocking logic (half1 → half2 → boss)
    • Lesson completion tracking and bullet rewards
    • Progress persistence across sessions
    Code Snippet ```javascript // Lesson completion (lessons/lesson1.html) async function completeLesson(lessonNum) { const res = await fetch(API + '/snakes/complete-lesson', { method: 'POST', credentials: 'include', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({lesson_number: lessonNum, bullets_earned: 10}) }); if (res.ok) unlockNextSection(); } ```

    Arnav

    Boss Battle & PvP Developer
    🐉 Combat Systems — brings intense boss AI and competitive PvP to educational gaming
    • Full boss-battle.html with canvas-based rendering
    • Pixel-art character sprites and boss AI movement patterns
    • Bullet physics and collision detection (Math.hypot)
    • pvp-arena.html with center wall and 1v1 mechanics
    • Powerup spawning/collection system (damage, speed, heal)
    • Database models: BossRoom, BossPlayer, BossBattleStats
    Code Snippet ```javascript // Boss AI movement patterns (boss-battle.html) function updateBossPosition() { if (pattern === 'chase') { const dx = targetPlayer.x - boss.x; const dy = targetPlayer.y - boss.y; boss.x += dx * 0.02; boss.y += dy * 0.02; } else if (pattern === 'zigzag') { boss.x += Math.sin(Date.now() / 200) * 5; boss.y += bossSpeed; } } ```

    Ethan

    Question System Developer
    🧠 Knowledge Testing — 50 unique questions that make learning feel like a game
    • 50-question bank across 5 CS topics (questions_bank.js)
    • Question modal template and answer validation
    • POST /api/snakes/answer-question endpoint
    • Bullet-awarding logic for correct answers
    • Square visit tracking to prevent re-answering
    • Visual feedback for correct/incorrect answers
    Code Snippet ```javascript // Question bank structure (questions_bank.js) const QUESTIONS = [ {square: 7, topic: "Programming Basics", question: "What keyword declares a variable in Python?", options: ["var", "let", "def", "None of these"], correct: 3, bullets: 5}, // ... 49 more questions ]; ```

    Aneesh

    Game Board Lead
    🎲 User Experience — smooth navigation and satisfying dice mechanics that make the game addictive
    • Main game board UI and dice-rolling mechanics
    • Character selection carousel with pixel-art sprites
    • Mode Selection hub page (mode-selection.html)
    • Frontend navigation flow between all game pages
    • game-board-part1.html, game-board-part2.html
    • Board square rendering and progression visualization
    Code Snippet ```javascript // Dice roll animation (game-board-part2.html) function rollDice() { const roll = Math.floor(Math.random() * 6) + 1; diceElement.classList.add('rolling'); setTimeout(() => { diceElement.textContent = roll; movePlayer(currentSquare + roll); }, 800); } ```

    Meeting AP CSP College Board Requirements

    Our game directly addresses multiple College Board AP CSP requirements through its design and implementation:

    Input (Big Idea 3)

    Users provide input through HTML form elements (character selection clicks, question answer buttons, chat text input) and JavaScript event listeners (keyboard WASD/arrows for movement, mouse position for aiming, spacebar/click for shooting).

    Persistent Data Storage (Big Idea 3)

    Game state is stored in a relational database (SQLite/MySQL) via Flask-SQLAlchemy. Player progress (current_square, total_bullets, completed_lessons, visited_squares) persists across sessions through authenticated API calls.

    Sequencing (Big Idea 3)

    The game enforces ordered execution: lessons must complete before questions unlock, questions must be answered before the boss section unlocks. API calls execute sequentially (fetch progress → validate → update → respond).

    Selection (Big Idea 3)

    Conditionals drive game logic throughout: if (correct) awards bullets, if (lives <= 0) triggers death, if (square >= 56) unlocks boss, if (bossHealth <= 0) ends the battle. The backend validates conditions before granting access.

    Iteration (Big Idea 3)

    Loops run the game: requestAnimationFrame drives the render loop, setInterval handles autosave (10s), position broadcasting (50ms), and powerup spawning (5s). The question system iterates through visited_squares to track progress.

    Lists / Collections (Big Idea 3)

    Arrays and JSON objects store structured data: visited_squares[], completed_lessons[], unlocked_sections[], powerups[], otherPlayers{}. The backend manages lists of players per room and leaderboard rankings.

    Procedures / Functions (Big Idea 3)

    Modular functions with parameters and return values: applyPowerup(type), shoot(), loadPlayerData(), sendChatMessage(), spawn_powerup_for_room(room_id). Backend uses decorated route handlers with request parsing.

    Algorithms (Big Idea 3)

    The boss AI implements pathfinding algorithms with pattern switching (normal, dash, zigzag, chase, circle). Collision detection uses the distance formula (Math.hypot). The leaderboard uses sorting algorithms to rank players by score.

    The Internet (Big Idea 4)

    The game operates over HTTP/HTTPS with RESTful APIs (GET, POST, PUT) and WebSocket connections for real-time multiplayer. JWT tokens authenticate requests, CORS headers control access, and Nginx handles reverse proxying.

    Impact of Computing (Big Idea 5)

    The game itself teaches CS ethics and data privacy concepts through its lesson content. Guest mode demonstrates data minimization principles — no personal data is collected for unauthenticated users.

    Individual AP CSP Requirements by Team Member

    Each team member’s contribution demonstrates specific College Board requirements:

    Akhil — AP CSP Alignment

    Multiplayer & Victory
    • The Internet: WebSocket events (emit/on) for real-time sync across clients
    • Iteration: setInterval broadcasts position every 50ms; autosave every 10s
    • List: boss_battles[room_id]['players'] dict; champions[] for leaderboard
    • Procedure: handle_player_move(data) with room_id parameter and broadcast
    • Data Storage: ChampionsAPI queries completed games; ResetProgressAPI clears state

    Moiz — AP CSP Alignment

    Authentication & DevOps
    • The Internet: JWT tokens over HTTPS, CORS configuration, cookie security flags
    • Selection: if not token returns 401, if token_expired returns 403
    • Procedure: @token_required() decorator with nested function and return
    • Data Storage: User credentials hashed with bcrypt, stored in SQLAlchemy
    • Impact: Guest mode protects privacy; no data stored without authentication

    Samarth — AP CSP Alignment

    Lesson System
    • Sequencing: Lessons 1-5 must complete in order; each unlocks the next section
    • Selection: if (lessonCompleted) awards bullets and updates unlocked_sections
    • List: completed_lessons[] array tracks which lessons are done
    • Procedure: completeLesson(num) with parameter and async API call
    • Data Storage: Lesson progress persists via PUT to /api/snakes/

    Arnav — AP CSP Alignment

    Boss Battle & PvP
    • Algorithm: Boss AI uses distance formula Math.hypot(dx,dy) for chase pattern
    • Iteration: requestAnimationFrame game loop at 60fps; bullet array updates
    • Selection: if (pattern === 'zigzag') changes movement; if (collision) damages
    • List: playerBullets[], opponentBullets[], powerups[] arrays
    • Procedure: checkCollisions() iterates bullets, uses selection for hit detection

    Ethan — AP CSP Alignment

    Question System
    • List: QUESTIONS[] array of 50 objects with topic, options, correct index
    • Iteration: forEach to render answer options; filter to find unvisited squares
    • Selection: if (selectedAnswer === correct) awards bullets
    • Procedure: checkAnswer(square, answer) validates and updates state
    • Algorithm: Binary search through visited_squares to check completion

    Aneesh — AP CSP Alignment

    Game Board & Navigation
    • Input: Click handlers for dice rolls, character selection buttons, navigation links
    • Selection: if (roll + currentSquare > 56) redirects to mode selection
    • Iteration: for loop renders 56 board squares with dynamic CSS classes
    • Procedure: rollDice() function with animation timing and state updates
    • List: Character array ['knight','wizard','archer','warrior'] for carousel

    Create Performance Task Alignment

    The project structure maps directly to the CPT requirements:

    • Program Purpose: Educate users on AP CSP concepts through gamified learning
    • Program Function: Interactive game board with progression, questions, multiplayer boss battle, and PvP arena
    • Input → Output: User answers (input) → bullet rewards and progression (output); keyboard/mouse (input) → character movement and shooting (output)
    • List Usage: visited_squares array stores/retrieves which questions have been answered, iterated to show progress
    • Procedure with Parameter: applyPowerup(type) takes a powerup type, applies the corresponding buff using selection logic, and modifies game state
    • Algorithm with Sequencing + Selection + Iteration: Boss AI movement function sequences through pattern selection (if patternTimer > threshold), iterates to calculate new positions, and selects behavior based on player proximity