3D-like Ping Pong

0 : 0

Move mouse or touch to control paddle. Press Space to serve.

:root { --bg: #0b1622; --table-left: #1e7a4a; --table-right: #10603a; --accent: #ffd166; --ui-bg: rgba(255,255,255,0.04); --glass: rgba(255,255,255,0.02); --text: #e6f0f2; } html, body { height: 100%; margin: 0; font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial; background: radial-gradient(circle at 10% 10%, #071018 0%, var(--bg) 40%, #031018 100%); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #game-canvas { width: 100%; height: 100vh; display: block; } #ui { position: absolute; top: 18px; left: 18px; z-index: 10; display: flex; gap: 12px; align-items: center; pointer-events: none; } #score { pointer-events: auto; background: var(--ui-bg); padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.4); display: flex; gap: 8px; align-items: center; } #controls { pointer-events: auto; display: flex; gap: 8px; align-items: center; } button { pointer-events: auto; background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.06); color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease; } button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } #hints { pointer-events: none; color: rgba(230,240,242,0.8); font-size: 13px; margin-left: 6px; } @media (max-width: 640px) { #score { font-size: 16px; } #hints { display: none; } } export function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); } export function lerp(a, b, t) { return a + (b - a) * t; } export function easeOutQuad(t) { return t * (2 - t); } import { clamp, lerp } from './utils.js'; export default class Paddle { constructor(side, table) { this.side = side; // 'player' or 'opponent' this.table = table; this.width = table.width * 0.18; this.height = table.height * 0.02; this.depthZ = side === 'player' ? 0 : table.depth; this.x = table.centerX; this.targetX = this.x; this.color = side === 'player' ? '#ffd166' : '#7fd1b9'; this.speed = 18; // responsiveness } setTargetX(x) { this.targetX = clamp(x, this.table.left + this.width/2, this.table.right - this.width/2); } update(dt) { // smooth movement toward target this.x = lerp(this.x, this.targetX, 1 - Math.exp(-this.speed * dt)); } draw(ctx, projection) { // projection: {scale, ox, oy, z} const z = this.depthZ; const s = projection.scaleForZ(z); const screenX = projection.projectX(this.x, z); const screenY = projection.projectY(0, z); const w = this.width * s; const h = this.height * s; // paddle face (slightly rotated perspective rectangle) ctx.save(); ctx.translate(screenX, screenY); ctx.fillStyle = this.color; ctx.strokeStyle = 'rgba(0,0,0,0.35)'; ctx.beginPath(); ctx.roundRect(-w/2, -h/2, w, h, Math.max(2, 6 * s)); ctx.fill(); ctx.lineWidth = Math.max(1, 2 * s); ctx.stroke(); ctx.restore(); // subtle shadow ctx.save(); ctx.globalAlpha = 0.08; ctx.fillStyle = '#000'; ctx.beginPath(); ctx.ellipse(screenX, screenY + h*1.6, w*0.9, h*0.6, 0, 0, Math.PI*2); ctx.fill(); ctx.restore(); } } import { clamp } from './utils.js'; export default class Ball { constructor(table) { this.table = table; this.reset(); } reset(serveTo = 'player') { this.x = this.table.centerX; this.y = 0.08 * this.table.height; // small vertical lift this.z = serveTo === 'player' ? this.table.depth * 0.3 : this.table.depth * 0.7; this.vx = 0; this.vy = 0; this.vz = serveTo === 'player' ? -6 : 6; this.radius = this.table.width * 0.018; this.inPlay = false; } launch(initialSpeed = 8) { this.inPlay = true; // small random offset to start this.vx += (Math.random() - 0.5) * 1.8; this.vz = this.vz < 0 ? -initialSpeed : initialSpeed; this.vy = 1.6 + Math.random() * 1.2; } update(dt) { // gravity like effect on y const gravity = 12; this.vy -= gravity * dt; // apply velocities this.x += this.vx * dt; this.y += this.vy * dt; this.z += this.vz * dt; // bounce on table surface (y below 0) if (this.y <= 0) { if (this.vy < 0) { // lose some energy on bounce this.vy = -this.vy * 0.75; this.vx *= 0.98; this.vz *= 0.99; this.y = 0; } } // x bounds if (this.x - this.radius < this.table.left) { this.x = this.table.left + this.radius; this.vx = -this.vx * 0.9; } if (this.x + this.radius > this.table.right) { this.x = this.table.right - this.radius; this.vx = -this.vx * 0.9; } // clamp z within slightly beyond this.z = clamp(this.z, -this.table.depth*0.1, this.table.depth * 1.1); } draw(ctx, projection) { const s = projection.scaleForZ(this.z); const screenX = projection.projectX(this.x, this.z); const screenY = projection.projectY(this.y, this.z); const r = this.radius * s; // ball glow and shading const grad = ctx.createRadialGradient(screenX - r*0.35, screenY - r*0.45, r*0.1, screenX, screenY, r*1.6); grad.addColorStop(0, '#fffde7'); grad.addColorStop(0.35, '#fff1b8'); grad.addColorStop(1, '#ffd166'); ctx.save(); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(screenX, screenY, Math.max(1, r), 0, Math.PI*2); ctx.fill(); // small specular ctx.fillStyle = 'rgba(255,255,255,0.9)'; ctx.beginPath(); ctx.arc(screenX - r*0.35, screenY - r*0.45, Math.max(0.8, r*0.3), 0, Math.PI*2); ctx.fill(); ctx.restore(); } } import Paddle from './paddle.js'; import Ball from './ball.js'; import { clamp, lerp, easeOutQuad } from './utils.js'; export default class Game { constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d', { alpha: false }); this.pixelRatio = Math.min(window.devicePixelRatio || 1, 2); this.lastTime = performance.now(); this.running = false; this.table = { width: 4.2, // meters-like units for proportions depth: 7.5, height: 1.0, left: -2.1, right: 2.1, centerX: 0, }; this.projection = this._createProjection(); this.player = new Paddle('player', this.table); this.opponent = new Paddle('opponent', this.table); this.ball = new Ball(this.table); this.playerScore = 0; this.opponentScore = 0; this._setupInput(); this._resize(); window.addEventListener('resize', () => this._resize()); // AI parameters this.ai = { reaction: 0.12, maxSpeed: 6.5 }; } _createProjection() { const ctx = this.ctx; const table = this.table; return { fov: 800, ox: () => this.canvas.width / 2, oy: () => this.canvas.height * 0.62, projectX: (x, z) => { const s = this.scaleForZ(z); return this.canvas.width / 2 + x * s * (this.canvas.width / 600); }, projectY: (y, z) => { const s = this.scaleForZ(z); // invert y so positive y is up on screen return this.canvas.height * 0.62 - ((y) * s * (this.canvas.width / 600)); }, scaleForZ: (z) => { const f = 900; const s = f / (f + z * 120); return s; } }; } _setupInput() { this.pointerX = this.table.centerX; const onMove = (clientX) => { const rect = this.canvas.getBoundingClientRect(); const px = (clientX - rect.left - rect.width/2) / (rect.width/2); // -1..1 const worldX = px * (this.table.width/2); this.pointerX = worldX; this.player.setTargetX(this.pointerX); }; window.addEventListener('mousemove', (e) => { onMove(e.clientX); }); window.addEventListener('touchmove', (e) => { if (e.touches.length) { onMove(e.touches[0].clientX); e.preventDefault(); } }, { passive: false }); window.addEventListener('keydown', (e) => { if (e.code === 'Space') { if (!this.ball.inPlay) { this.ball.launch(8.2); } } if (e.code === 'ArrowLeft') { this.player.setTargetX(this.player.targetX - 0.3); } if (e.code === 'ArrowRight') { this.player.setTargetX(this.player.targetX + 0.3); } }); // buttons (UI) const startBtn = document.getElementById('start-btn'); const resetBtn = document.getElementById('reset-btn'); startBtn.addEventListener('click', () => { if (!this.running) { this.start(); } else { // serve if (!this.ball.inPlay) this.ball.launch(8.2); } }); resetBtn.addEventListener('click', () => { this.resetMatch(); }); } _resize() { const w = Math.max(800, Math.floor(window.innerWidth)); const h = Math.max(520, Math.floor(window.innerHeight)); this.canvas.width = Math.floor(w * this.pixelRatio); this.canvas.height = Math.floor(h * this.pixelRatio); this.canvas.style.width = w + 'px'; this.canvas.style.height = h + 'px'; this.ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); this.projection = this._createProjection(); } start() { this.running = true; this.ball.reset('player'); this.ball.inPlay = false; this.lastTime = performance.now(); requestAnimationFrame((t) => this._loop(t)); } resetMatch() { this.playerScore = 0; this.opponentScore = 0; this._updateScoreUI(); this.ball.reset('player'); this.ball.inPlay = false; } _loop(now) { const dt = Math.min(0.033, (now - this.lastTime) / 1000); this.lastTime = now; this.update(dt); this.render(); if (this.running) requestAnimationFrame((t) => this._loop(t)); } update(dt) { // update paddles this.player.update(dt); // simple AI: move toward ball x when ball heading toward opponent const desiredX = lerp(this.opponent.x, this.ball.x, 0.5); const d = desiredX - this.opponent.x; const step = clamp(d, -this.ai.maxSpeed * dt, this.ai.maxSpeed * dt); this.opponent.setTargetX(this.opponent.x + step); this.opponent.update(dt); // update ball if (this.ball.inPlay) { this.ball.update(dt); } else { // keep ball near server zone this.ball.x = lerp(this.ball.x, this.ball.x + 0, 0.12); // floating effect this.ball.y = Math.abs(Math.sin(performance.now() * 0.003)) * 0.03 + 0.06; } // collisions with paddles this._checkPaddleCollision(this.player); this._checkPaddleCollision(this.opponent); // scoring when ball goes beyond back z if (this.ball.z < -0.5) { // player missed? ball passed player's side -> opponent scores this.opponentScore++; this._updateScoreUI(); this.ball.reset('opponent'); } else if (this.ball.z > this.table.depth + 0.5) { this.playerScore++; this._updateScoreUI(); this.ball.reset('player'); } // small speed cap const maxSpeed = 35; const speed = Math.hypot(this.ball.vx, this.ball.vy, this.ball.vz); if (speed > maxSpeed) { const m = maxSpeed / speed; this.ball.vx *= m; this.ball.vy *= m; this.ball.vz *= m; } } _checkPaddleCollision(paddle) { // collision if z within paddle zone and ball touches in x and low y const zone = 0.18; // reach zone in depth const dz = Math.abs(this.ball.z - paddle.depthZ); if (dz < zone && this.ball.y < 0.18) { // horizontal overlap const dx = Math.abs(this.ball.x - paddle.x); const hitRadius = paddle.width * 0.5 + this.ball.radius; if (dx < hitRadius && ((paddle.side === 'player' && this.ball.vz < 0) || (paddle.side === 'opponent' && this.ball.vz > 0))) { // bounce const offset = (this.ball.x - paddle.x) / (paddle.width * 0.5); // tweak velocities based on hit offset and spin-like effect this.ball.vz = -this.ball.vz * 1.02; this.ball.vx += offset * 6.4; this.ball.vy = Math.max(this.ball.vy, 1.8 + Math.abs(offset) * 1.8); // ensure ball moves away from paddle if (paddle.side === 'player') this.ball.z = paddle.depthZ + zone; else this.ball.z = paddle.depthZ - zone; // small sound-like feedback stub via flash (visual) this._hitFlash = { t: 0.08 }; } } } _updateScoreUI() { document.getElementById('player-score').textContent = this.playerScore; document.getElementById('opponent-score').textContent = this.opponentScore; } render() { const ctx = this.ctx; const w = parseInt(this.canvas.style.width, 10); const h = parseInt(this.canvas.style.height, 10); // clear ctx.fillStyle = '#071718'; ctx.fillRect(0, 0, w, h); // draw table trapezoid for perspective const proj = this.projection; const left = this.table.left; const right = this.table.right; const nearZ = 0; const farZ = this.table.depth; const nearScale = proj.scaleForZ(nearZ); const farScale = proj.scaleForZ(farZ); const nearLeftX = proj.projectX(left, nearZ); const nearRightX = proj.projectX(right, nearZ); const nearY = proj.projectY(0, nearZ); const farLeftX = proj.projectX(left, farZ); const farRightX = proj.projectX(right, farZ); const farY = proj.projectY(0, farZ); // table base const gradient = ctx.createLinearGradient(0, farY, 0, nearY); gradient.addColorStop(0, '#073a29'); gradient.addColorStop(1, '#145a3f'); ctx.save(); ctx.beginPath(); ctx.moveTo(nearLeftX, nearY); ctx.lineTo(nearRightX, nearY); ctx.lineTo(farRightX, farY); ctx.lineTo(farLeftX, farY); ctx.closePath(); ctx.fillStyle = gradient; ctx.fill(); // center line ctx.save(); ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 2; ctx.beginPath(); const midLeftX = lerp(nearLeftX, farLeftX, 0.5); const midRightX = lerp(nearRightX, farRightX, 0.5); const midY = lerp(nearY, farY, 0.5); ctx.moveTo((nearLeftX + nearRightX)/2, nearY); ctx.lineTo((farLeftX + farRightX)/2, farY); ctx.stroke(); ctx.restore(); // net (simple) ctx.save(); ctx.strokeStyle = 'rgba(255,255,255,0.14)'; ctx.lineWidth = 2; ctx.beginPath(); const netTopY = lerp(nearY, farY, 0.5) - 6; const netX = (nearLeftX + nearRightX + farLeftX + farRightX) / 4; ctx.moveTo(netX, nearY - 8); ctx.lineTo(netX, farY + 10); ctx.stroke(); ctx.restore(); // subtle vignette ctx.save(); ctx.globalCompositeOperation = 'multiply'; const vignette = ctx.createRadialGradient(w/2, h*0.4, Math.min(w,h)/3, w/2, h*0.4, Math.max(w,h)/1.1); vignette.addColorStop(0, 'rgba(0,0,0,0)'); vignette.addColorStop(1, 'rgba(0,0,0,0.35)'); ctx.fillStyle = vignette; ctx.fillRect(0, 0, w, h); ctx.restore(); // draw paddles (far first) this.opponent.draw(ctx, this.projection); this.player.draw(ctx, this.projection); // draw ball this.ball.draw(ctx, this.projection); // transient hit flash if (this._hitFlash && this._hitFlash.t > 0) { ctx.save(); ctx.globalAlpha = this._hitFlash.t * 0.8; ctx.fillStyle = '#ffd166'; ctx.fillRect(0, 0, w, h); ctx.restore(); this._hitFlash.t -= 0.016; } // scores and hints are in DOM; no overlay drawing necessary } } import Game from './game.js'; const canvas = document.getElementById('game-canvas'); const game = new Game(canvas); // start automatically so user can press space to serve game.start(); // serve on initial click to start play canvas.addEventListener('click', () => { if (!game.ball.inPlay) game.ball.launch(8.2); }); // Expose for debug in console window.__game = game;