šŸ  Home šŸ† My Progress šŸŽ® Games
šŸ¤–

Learn to Code — It's Fun! šŸŽ‰

Pick a topic and start building cool stuff today!

ā–¶ Start Learning

🌟 Choose a Topic

Tap any topic to begin your coding adventure!

🌐

HTML

Build web pages!

Beginner
šŸŽØ

CSS

Style your pages!

Beginner
⚔

JavaScript

Add interactivity!

Medium
šŸ

Python

Write programs!

Beginner
🧩

Scratch

Drag & drop code!

Easy
šŸ—ƒļø

Git

Save your code!

Medium
Lesson 1 of 3

šŸ† My Progress

Keep going — every lesson makes you a better coder! šŸš€

Level 1
🌱 Coding Seedling
0 XP
0
Lessons Done
0
Quizzes Aced āœ…
0
Topics Done
0
Games Played šŸŽ®

šŸ“š Topic Progress

šŸŽ–ļø Badges

šŸŽ® Game Zone!

Play games AND see how they're coded! 🧠

āŒā­•

Tic-Tac-Toe

Classic game! Get 3 in a row! šŸŽÆ

šŸš—

Car Race

Dodge traffic & survive! šŸ

🫧

Bubble Shooter

Match 3 bubbles to pop! šŸ’„

āŒā­• Tic-Tac-Toe

šŸ“± Tap a cell to place your mark | šŸ‘„ 2 Players or šŸ¤– vs CPU
āŒ P1
0
Draw
0
ā­• P2
0
Player āŒ's turn!
/* === TIC TAC TOE - MINIMAX AI === */ const board = ['','','','','','','','','']; let currentPlayer = 'X'; const winCombos = [ [0,1,2],[3,4,5],[6,7,8], // rows [0,3,6],[1,4,7],[2,5,8], // cols [0,4,8],[2,4,6] // diagonals ]; function checkWinner(b) { for (let [a,bx,c] of winCombos) if (b[a] && b[a]===b[bx] && b[a]===b[c]) return b[a]; return b.every(c=>c) ? 'Draw' : null; } // Minimax AI - tries all moves recursively function minimax(b, isMax) { const w = checkWinner(b); if (w==='O') return +10; if (w==='X') return -10; if (b.every(c=>c)) return 0; let best = isMax ? -Infinity : Infinity; for (let i=0; i<9; i++) { if (!b[i]) { b[i] = isMax ? 'O' : 'X'; const score = minimax(b, !isMax); b[i] = ''; best = isMax ? Math.max(best,score) : Math.min(best,score); } } return best; } function cpuMove() { let best = -Infinity, move = -1; for (let i=0; i<9; i++) { if (!board[i]) { board[i] = 'O'; const s = minimax(board, false); board[i] = ''; if (s > best) { best=s; move=i; } } } board[move] = 'O'; }

šŸš— 2D Car Race

ā¬…ļøāž”ļø Arrow Keys / A D to steer | Dodge red cars! | Collect šŸ’° coins!
/* === 2D CAR GAME ENGINE === */ // Player object const player = { x: canvas.width/2 - 20, y: canvas.height - 110, w: 40, h: 70, speed: 5 }; // Enemy cars array let enemies = []; let score = 0, gameSpeed = 3; // Spawn enemy in random lane function spawnEnemy() { const lanes = [60, 140, 220, 300]; const lane = lanes[Math.floor(Math.random() * lanes.length)]; enemies.push({ x: lane, y: -80, w: 40, h: 70, spd: gameSpeed + Math.random() * 2, color: `hsl(${Math.random()*40},80%,55%)` }); } // AABB Collision detection function collides(a, b) { return a.x < b.x+b.w && a.x+a.w > b.x && a.y < b.y+b.h && a.y+a.h > b.y; } // Game loop function loop() { ctx.clearRect(0, 0, W, H); drawRoad(); movePlayer(); // arrow keys / touch enemies.forEach(e => { e.y += e.spd; if (collides(player, e)) gameOver(); }); score++; if (score % 400 === 0) gameSpeed += 0.4; requestAnimationFrame(loop); }

🫧 Bubble Shooter

šŸ–±ļø Move mouse to aim | Click to shoot | Match 3+ to pop! šŸ’„
/* === BUBBLE SHOOTER CORE === */ const COLORS = ['#e17055','#0984e3','#00b894', '#fdcb6e','#a29bfe','#fd79a8']; const R = 19; // bubble radius // Hex grid layout function getBubbleX(row, col) { return col * R*2 + R + (row%2===0 ? 0 : R) + 10; } function getBubbleY(row) { return row * R*1.8 + R + 28; } // Shoot bubble at angle toward mouse function shoot(angle) { bullet = { x: canvas.width/2, y: canvas.height - 38, dx: Math.cos(angle) * 9, dy: Math.sin(angle) * 9, color: currentColor }; } // Flood-fill to find connected matches function findMatches(r, c, color, visited=[]) { const key = `${r},${c}`; if (visited.includes(key)) return []; if (!grid[r] || grid[r][c] !== color) return []; visited.push(key); const matches = [{r, c}]; for (const [nr, nc] of getNeighbors(r, c)) matches.push(...findMatches(nr, nc, color, visited)); return matches; } // Pop if 3+ connected same-color bubbles function tryPop(row, col) { const matches = findMatches(row, col, grid[row][col]); if (matches.length >= 3) { matches.forEach(({r,c}) => grid[r][c] = null); score += matches.length * 10; } }