42 Abu Dhabi

ft_transcendence

Interactive Secure Pong Game Website

3 months

Team Project

JavaScriptHTML5CSS3DjangoPostgreSQLOAuth 2.0JWT

An innovative single-page application that combines classic Pong gameplay with modern web technologies, focusing on real-time multiplayer functionality, robust security features, and microservices architecture.

Live Demo Source Code

Key Features

Interactive Pong Game

Classic Pong game with smooth gameplay mechanics, responsive controls, and engaging visual effects for an immersive gaming experience.

AI-Driven Gameplay

Advanced AI opponent system that provides challenging and adaptive gameplay, allowing users to practice and improve their skills against intelligent bots.

Enhanced Security

Comprehensive security implementation with OAuth 2.0, Two-Factor Authentication (2FA), JWT tokens, and robust user authentication mechanisms.

Microservices Architecture

Backend built using microservices architecture ensuring scalability, maintainability, and efficient resource management for enterprise-level applications.

Multi-language Support

Internationalization features supporting multiple languages to provide accessibility to a diverse global user base with localized experiences.

Cross-Browser Compatibility

Responsive design with broad browser compatibility ensuring seamless user experience across different devices and platforms.

Development Journey

Phase 1

Architecture & Planning

Designed the microservices architecture, defined security requirements, and established the technology stack. Created wireframes for the single-page application interface.

Phase 2

Backend Development

Built the Django backend with PostgreSQL database, implemented OAuth 2.0 authentication, JWT tokens, and RESTful API endpoints for game functionality.

Phase 3

Frontend & Game Engine

Developed the responsive frontend interface, implemented the Pong game logic with Canvas API, and created AI opponent algorithms with smooth animation systems.

Phase 4

Security & Deployment

Implemented Two-Factor Authentication, conducted security testing, optimized performance, and deployed the application with multi-language support.

Challenges & Solutions

Smooth Game Performance

Problem:

Ensuring consistent frame rates and smooth gameplay across different devices while maintaining responsive controls and fluid animations.

Solution:

Implemented efficient game loop using requestAnimationFrame, optimized Canvas rendering, and added performance monitoring to maintain 60fps gameplay.

Security & Authentication

Problem:

Implementing comprehensive security measures including OAuth 2.0, 2FA, and JWT while maintaining user-friendly experience and preventing common vulnerabilities.

Solution:

Developed layered security approach with OAuth 2.0 integration, JWT token management, CSRF protection, input validation, and rate limiting for robust protection.

Microservices Complexity

Problem:

Managing communication between microservices, ensuring data consistency, and handling service failures in a distributed architecture.

Solution:

Implemented proper service discovery, API gateways, database per service pattern, and circuit breaker patterns for resilient microservices architecture.

game_engine.js

javascript

// Pong game engine with AI opponent
class PongGame {
    constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.gameState = 'waiting';
    this.player = { y: 200, score: 0 };
    this.ai = { y: 200, score: 0, difficulty: 0.1 };
    this.ball = { x: 400, y: 200, dx: 5, dy: 3 };
    this.paddleHeight = 80;
    this.paddleWidth = 10;
    
    this.bindEvents();
    this.gameLoop();
    }
    
    update() {
    if (this.gameState !== 'playing') return;
    
    // Update ball position
    this.ball.x += this.ball.dx;
    this.ball.y += this.ball.dy;
    
    // AI paddle movement with difficulty scaling
    export const aiCenter = this.ai.y + this.paddleHeight / 2;
    export const ballCenter = this.ball.y;
    export const diff = ballCenter - aiCenter;
    
    this.ai.y += diff * this.ai.difficulty;
    this.ai.y = Math.max(0, Math.min(this.canvas.height - this.paddleHeight, this.ai.y));
    
    // Ball collision detection
    this.checkCollisions();
    this.checkScore();
    }
    
    checkCollisions() {
    // Ball collision with top/bottom walls
    if (this.ball.y <= 0 || this.ball.y >= this.canvas.height) {
        this.ball.dy = -this.ball.dy;
    }
    
    // Paddle collision detection
    if (this.ball.x <= this.paddleWidth && 
        this.ball.y >= this.player.y && 
        this.ball.y <= this.player.y + this.paddleHeight) {
        this.ball.dx = -this.ball.dx;
        this.ball.x = this.paddleWidth + 1;
    }
    }
    
    render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // Draw paddles and ball
    this.ctx.fillStyle = '#ffffff';
    this.ctx.fillRect(0, this.player.y, this.paddleWidth, this.paddleHeight);
    this.ctx.fillRect(this.canvas.width - this.paddleWidth, this.ai.y, this.paddleWidth, this.paddleHeight);
    this.ctx.fillRect(this.ball.x, this.ball.y, 10, 10);
    
    // Draw score
    this.ctx.font = '24px Arial';
    this.ctx.fillText(this.player.score, 100, 50);
    this.ctx.fillText(this.ai.score, this.canvas.width - 120, 50);
    }
    
    gameLoop() {
    this.update();
    this.render();
    requestAnimationFrame(() => this.gameLoop());
    }
}

Previous Next