import React, { useEffect, useRef, useState } from "react" import { useFireproof } from "use-fireproof" export default function App() { const [isMobile, setIsMobile] = useState(false) const canvasRef = useRef(null) const gameStateRef = useRef({ mode: 'RANKED', level: 1, score: 0, cubeCount: 0, coins: 0, combo: 0, maxCombo: 0, selectedBall: 'default', unlockedBalls: ['default'], backgroundHue: 220, timeLeft: 60 }) const [menuActive, setMenuActive] = useState('MAIN') const [score, setScore] = useState(0) const [level, setLevel] = useState(1) const [cubeCount, setCubeCount] = useState(0) const [coins, setCoins] = useState(0) const [combo, setCombo] = useState(0) const [highScore, setHighScore] = useState(0) const [isMuted, setIsMuted] = useState(false) const [slowmoPercent, setSlowmoPercent] = useState(0) const [unlockedBalls, setUnlockedBalls] = useState(['default']) const [bgHue, setBgHue] = useState(220) const [timeLeft, setTimeLeft] = useState(60) const audioContextRef = useRef(null) const musicNodesRef = useRef([]) const gameLoopRef = useRef(null) const { database, useLiveQuery } = useFireproof("menja-pro-final") useEffect(() => { const checkMobile = () => { const mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 1024 setIsMobile(mobile) } checkMobile() window.addEventListener('resize', checkMobile) return () => window.removeEventListener('resize', checkMobile) }, []) const ballTypes = { default: { name: 'Plasma', price: 0, color: '#70d6ff', trailColor: 'rgba(112, 214, 255, 0.6)', emoji: '💎' }, fire: { name: 'Fire', price: 150, color: '#ff9770', trailColor: 'rgba(255, 151, 112, 0.7)', emoji: '🔥' }, ice: { name: 'Ice', price: 200, color: '#70fff7', trailColor: 'rgba(112, 255, 247, 0.6)', emoji: '❄️' }, star: { name: 'Star', price: 350, color: '#ffd670', trailColor: 'rgba(255, 214, 112, 0.8)', emoji: '⭐' }, galaxy: { name: 'Galaxy', price: 500, color: '#ff70a6', trailColor: 'rgba(255, 112, 166, 0.7)', emoji: '🌌' } } const { docs: progressDocs } = useLiveQuery("type", { key: "progress" }) const { docs: scoreHistory } = useLiveQuery("type", { key: "score", descending: true, limit: 10 }) useEffect(() => { if (progressDocs.length > 0) { const progress = progressDocs[0] setCoins(progress.coins || 0) setUnlockedBalls(progress.unlockedBalls || ['default']) gameStateRef.current.coins = progress.coins || 0 gameStateRef.current.unlockedBalls = progress.unlockedBalls || ['default'] gameStateRef.current.selectedBall = progress.selectedBall || 'default' } }, [progressDocs]) useEffect(() => { if (scoreHistory.length > 0) { setHighScore(scoreHistory[0].score) } }, [scoreHistory]) const initAudio = () => { if (!audioContextRef.current) { audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)() } if (audioContextRef.current.state === 'suspended') { audioContextRef.current.resume() } } const startMusic = () => { if (isMuted || !audioContextRef.current) return stopMusic() const ctx = audioContextRef.current const masterGain = ctx.createGain() masterGain.gain.value = 0.08 masterGain.connect(ctx.destination) const bassPattern = [ { freq: 110, time: 0, dur: 0.4 }, { freq: 110, time: 0.5, dur: 0.4 }, { freq: 146.83, time: 1.0, dur: 0.4 }, { freq: 130.81, time: 1.5, dur: 0.4 } ] const melodyPattern = [ { freq: 440, time: 0, dur: 0.2 }, { freq: 554.37, time: 0.25, dur: 0.2 }, { freq: 659.25, time: 0.5, dur: 0.3 }, { freq: 880, time: 0.85, dur: 0.15 }, { freq: 659.25, time: 1.0, dur: 0.2 }, { freq: 554.37, time: 1.25, dur: 0.2 }, { freq: 493.88, time: 1.5, dur: 0.3 }, { freq: 440, time: 1.85, dur: 0.15 } ] const playPattern = () => { const now = ctx.currentTime bassPattern.forEach(note => { const osc = ctx.createOscillator() const gain = ctx.createGain() const filter = ctx.createBiquadFilter() osc.type = 'sawtooth' osc.frequency.value = note.freq filter.type = 'lowpass' filter.frequency.value = 300 gain.gain.setValueAtTime(0.15, now + note.time) gain.gain.exponentialRampToValueAtTime(0.01, now + note.time + note.dur) osc.connect(filter) filter.connect(gain) gain.connect(masterGain) osc.start(now + note.time) osc.stop(now + note.time + note.dur) musicNodesRef.current.push(osc) }) melodyPattern.forEach(note => { const osc = ctx.createOscillator() const gain = ctx.createGain() osc.type = 'triangle' osc.frequency.value = note.freq gain.gain.setValueAtTime(0.08, now + note.time) gain.gain.exponentialRampToValueAtTime(0.01, now + note.time + note.dur) osc.connect(gain) gain.connect(masterGain) osc.start(now + note.time) osc.stop(now + note.time + note.dur) musicNodesRef.current.push(osc) }) setTimeout(() => { if (!isMuted && menuActive === null) playPattern() }, 2000) } playPattern() } const stopMusic = () => { musicNodesRef.current.forEach(node => { try { node.stop(); node.disconnect() } catch(e) {} }) musicNodesRef.current = [] } useEffect(() => { if (menuActive === null && !isMuted) { startMusic() } else { stopMusic() } return () => stopMusic() }, [menuActive, isMuted]) const playSound = (frequency, duration, type = 'sine', volume = 0.3) => { if (isMuted || !audioContextRef.current) return const ctx = audioContextRef.current const osc = ctx.createOscillator() const gain = ctx.createGain() osc.connect(gain) gain.connect(ctx.destination) osc.frequency.value = frequency osc.type = type gain.gain.setValueAtTime(volume, ctx.currentTime) gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + duration) osc.start(ctx.currentTime) osc.stop(ctx.currentTime + duration) } const playSliceSound = () => { if (isMuted || !audioContextRef.current) return const ctx = audioContextRef.current const bufferSize = ctx.sampleRate * 0.12 const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate) const data = buffer.getChannelData(0) for (let i = 0; i < bufferSize; i++) { data[i] = (Math.random() * 2 - 1) * (1 - i / bufferSize) } const noise = ctx.createBufferSource() noise.buffer = buffer const filter = ctx.createBiquadFilter() filter.type = 'highpass' filter.frequency.value = 3000 const gain = ctx.createGain() gain.gain.value = 0.5 noise.connect(filter) filter.connect(gain) gain.connect(ctx.destination) noise.start() noise.stop(ctx.currentTime + 0.12) playSound(2200, 0.04, 'sine', 0.3) } const playBreakSound = (comboLevel = 1) => { const baseFreq = 400 + (comboLevel * 50) playSound(baseFreq, 0.25, 'square', 0.4) setTimeout(() => playSound(baseFreq * 0.75, 0.2, 'square', 0.35), 80) setTimeout(() => playSound(baseFreq * 0.5, 0.18, 'sawtooth', 0.3), 170) if (comboLevel > 5) { setTimeout(() => playSound(1200, 0.15, 'sine', 0.25), 100) setTimeout(() => playSound(1600, 0.12, 'sine', 0.2), 180) } } const playComboSound = (comboNum) => { const freq = 800 + (comboNum * 100) playSound(freq, 0.15, 'square', 0.35) setTimeout(() => playSound(freq * 1.5, 0.12, 'sine', 0.3), 60) } const playLevelUpSound = () => { [600, 750, 900, 1200].forEach((freq, i) => { setTimeout(() => playSound(freq, 0.2, 'sine', 0.4), i * 80) }) } const playUISound = () => { playSound(900, 0.08, 'sine', 0.25) } const playCoinSound = () => { playSound(1100, 0.1, 'triangle', 0.3) setTimeout(() => playSound(1400, 0.08, 'triangle', 0.25), 60) } const cloneVertices = (vertices) => vertices.map(v => ({ x: v.x, y: v.y, z: v.z })) const transformVertices = (vertices, target, tX, tY, tZ, rX, rY, rZ, sX, sY, sZ) => { const sinX = Math.sin(rX), cosX = Math.cos(rX) const sinY = Math.sin(rY), cosY = Math.cos(rY) const sinZ = Math.sin(rZ), cosZ = Math.cos(rZ) vertices.forEach((v, i) => { const targetVertex = target[i] const x1 = v.x const y1 = v.z * sinX + v.y * cosX const z1 = v.z * cosX - v.y * sinX const x2 = x1 * cosY - z1 * sinY const y2 = y1 const z2 = x1 * sinY + z1 * cosY const x3 = x2 * cosZ - y2 * sinZ const y3 = x2 * sinZ + y2 * cosZ const z3 = z2 targetVertex.x = x3 * sX + tX targetVertex.y = y3 * sY + tY targetVertex.z = z3 * sZ + tZ }) } const shadeColor = (color, lightness) => { let other, mix if (lightness < 0.5) { other = 0 mix = 1 - (lightness * 2) } else { other = 255 mix = lightness * 2 - 1 } const lerp = (a, b, m) => (b - a) * m + a return '#' + (lerp(color.r, other, mix) | 0).toString(16).padStart(2, '0') + (lerp(color.g, other, mix) | 0).toString(16).padStart(2, '0') + (lerp(color.b, other, mix) | 0).toString(16).padStart(2, '0') } const makeCubeModel = (scale = 1) => ({ vertices: [ { x: -scale, y: -scale, z: scale }, { x: scale, y: -scale, z: scale }, { x: scale, y: scale, z: scale }, { x: -scale, y: scale, z: scale }, { x: -scale, y: -scale, z: -scale }, { x: scale, y: -scale, z: -scale }, { x: scale, y: scale, z: -scale }, { x: -scale, y: scale, z: -scale } ], polys: [ { vIndexes: [0, 1, 2, 3] }, { vIndexes: [7, 6, 5, 4] }, { vIndexes: [3, 2, 6, 7] }, { vIndexes: [4, 5, 1, 0] }, { vIndexes: [5, 6, 2, 1] }, { vIndexes: [0, 3, 7, 4] } ] }) const mengerSpongeSplit = (o, s) => [ { x: o.x + s, y: o.y - s, z: o.z + s }, { x: o.x + s, y: o.y - s, z: o.z + 0 }, { x: o.x + s, y: o.y - s, z: o.z - s }, { x: o.x + 0, y: o.y - s, z: o.z + s }, { x: o.x + 0, y: o.y - s, z: o.z - s }, { x: o.x - s, y: o.y - s, z: o.z + s }, { x: o.x - s, y: o.y - s, z: o.z + 0 }, { x: o.x - s, y: o.y - s, z: o.z - s }, { x: o.x + s, y: o.y + s, z: o.z + s }, { x: o.x + s, y: o.y + s, z: o.z + 0 }, { x: o.x + s, y: o.y + s, z: o.z - s }, { x: o.x + 0, y: o.y + s, z: o.z + s }, { x: o.x + 0, y: o.y + s, z: o.z - s }, { x: o.x - s, y: o.y + s, z: o.z + s }, { x: o.x - s, y: o.y + s, z: o.z + 0 }, { x: o.x - s, y: o.y + s, z: o.z - s }, { x: o.x + s, y: o.y + 0, z: o.z + s }, { x: o.x + s, y: o.y + 0, z: o.z - s }, { x: o.x - s, y: o.y + 0, z: o.z + s }, { x: o.x - s, y: o.y + 0, z: o.z - s } ] const makeRecursiveCubeModel = (recursionLevel, scale = 40) => { const getScaleAtLevel = level => 1 / (3 ** level) let cubeOrigins = [{ x: 0, y: 0, z: 0 }] for (let i = 1; i <= recursionLevel; i++) { const s = getScaleAtLevel(i) * 2 const cubeOrigins2 = [] cubeOrigins.forEach(origin => { cubeOrigins2.push(...mengerSpongeSplit(origin, s)) }) cubeOrigins = cubeOrigins2 } const finalModel = { vertices: [], polys: [] } const cubeModel = makeCubeModel(1) const scaleVector = s => v => { v.x *= s; v.y *= s; v.z *= s } cubeModel.vertices.forEach(scaleVector(getScaleAtLevel(recursionLevel))) cubeOrigins.forEach((origin, cubeIndex) => { finalModel.vertices.push( ...cubeModel.vertices.map(v => ({ x: (v.x + origin.x) * scale, y: (v.y + origin.y) * scale, z: (v.z + origin.z) * scale })) ) finalModel.polys.push( ...cubeModel.polys.map(poly => ({ vIndexes: poly.vIndexes.map(vi => vi + cubeIndex * 8) })) ) }) return finalModel } class Entity { constructor(model, color) { this.model = model this.vertices = cloneVertices(model.vertices) this.shadowVertices = cloneVertices(model.vertices) this.color = color this.polys = model.polys.map(p => ({ vIndexes: p.vIndexes, vertices: p.vIndexes.map(vIndex => this.vertices[vIndex]), color: color, depth: 0, middle: { x: 0, y: 0, z: 0 }, normalWorld: { x: 0, y: 0, z: 0 }, normalCamera: { x: 0, y: 0, z: 0 } })) this.shadowPolys = model.polys.map(p => ({ vIndexes: p.vIndexes, vertices: p.vIndexes.map(vIndex => this.shadowVertices[vIndex]), normalWorld: { x: 0, y: 0, z: 0 } })) this.reset() } reset() { this.x = 0; this.y = 0; this.z = 0 this.xD = 0; this.yD = 0; this.zD = 0 this.rotateX = 0; this.rotateY = 0; this.rotateZ = 0 this.rotateXD = 0; this.rotateYD = 0; this.rotateZD = 0 this.scaleX = 1; this.scaleY = 1; this.scaleZ = 1 this.projected = { x: 0, y: 0 } } transform() { transformVertices( this.model.vertices, this.vertices, this.x, this.y, this.z, this.rotateX, this.rotateY, this.rotateZ, this.scaleX, this.scaleY, this.scaleZ ) this.vertices.forEach((v, i) => { this.shadowVertices[i].x = v.x this.shadowVertices[i].y = v.y this.shadowVertices[i].z = v.z }) } project() { const focalLength = 900 const depth = focalLength / (900 - this.z) this.projected.x = this.x * depth this.projected.y = this.y * depth } } class SliceLine { constructor(x1, y1, x2, y2, color) { this.x1 = x1 this.y1 = y1 this.x2 = x2 this.y2 = y2 this.life = 20 this.maxLife = 20 this.color = color } update() { this.life-- } draw(ctx) { const alpha = this.life / this.maxLife const gradient = ctx.createLinearGradient(this.x1, this.y1, this.x2, this.y2) const baseColor = this.color.match(/\d+/g) gradient.addColorStop(0, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, 0)`) gradient.addColorStop(0.5, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${alpha})`) gradient.addColorStop(1, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, 0)`) ctx.strokeStyle = gradient ctx.lineWidth = 5 * alpha ctx.lineCap = 'round' ctx.shadowBlur = 15 * alpha ctx.shadowColor = this.color ctx.beginPath() ctx.moveTo(this.x1, this.y1) ctx.lineTo(this.x2, this.y2) ctx.stroke() ctx.shadowBlur = 0 } } class Particle { constructor(x, y, color) { const angle = Math.random() * Math.PI * 2 const speed = 8 + Math.random() * 10 this.x = x this.y = y this.xD = Math.cos(angle) * speed this.yD = Math.sin(angle) * speed this.life = 40 + Math.random() * 30 this.maxLife = this.life this.color = color this.size = 3 + Math.random() * 4 } update() { this.life-- this.x += this.xD this.y += this.yD this.yD += 0.4 this.xD *= 0.98 this.yD *= 0.98 } draw(ctx) { const alpha = this.life / this.maxLife const baseColor = this.color.match(/\d+/g) ctx.fillStyle = `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${alpha})` ctx.shadowBlur = 10 * alpha ctx.shadowColor = this.color ctx.beginPath() ctx.arc(this.x, this.y, this.size * alpha, 0, Math.PI * 2) ctx.fill() ctx.shadowBlur = 0 } } useEffect(() => { if (!isMobile || menuActive !== null) return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') const dpr = window.devicePixelRatio || 1 let width = window.innerWidth let height = window.innerHeight let viewScale = height / 1000 canvas.width = width * dpr canvas.height = height * dpr canvas.style.width = width + 'px' canvas.style.height = height + 'px' const COLORS = [ { r: 0x70, g: 0xd6, b: 0xff }, { r: 0xff, g: 0x97, b: 0x70 }, { r: 0xa6, g: 0xe0, b: 0x2c }, { r: 0xff, g: 0xd6, b: 0x70 }, { r: 0xff, g: 0x70, b: 0xa6 } ] const targets = [] const fragments = [] const particles = [] const touchPoints = [] const sliceLines = [] let pointerDown = false let pointerX = 0, pointerY = 0 let lastPointerX = 0, lastPointerY = 0 let spawnTime = 1200 let slowmoRemaining = 0 let gameSpeed = 1 let lastTime = 0 let currentCombo = 0 let lastHitTime = 0 let gameTimer = 0 const targetRadius = 40 const gravity = 0.35 const cameraDistance = 900 const getCubeHealth = () => { if (gameStateRef.current.mode === 'ZEN') return 1 return Math.min(2 + Math.floor(gameStateRef.current.level / 4), 4) } const getMaxCubes = () => { if (gameStateRef.current.mode === 'ZEN') return 2 if (gameStateRef.current.mode === 'TIME_ATTACK') return 3 return Math.min(2 + Math.floor(gameStateRef.current.level / 6), 4) } const model = makeRecursiveCubeModel(1, targetRadius) const ballConfig = ballTypes[gameStateRef.current.selectedBall] const computePolyNormal = (poly, normalName) => { const v1 = poly.vertices[0] const v2 = poly.vertices[1] const v3 = poly.vertices[2] const ax = v1.x - v2.x, ay = v1.y - v2.y, az = v1.z - v2.z const bx = v1.x - v3.x, by = v1.y - v3.y, bz = v1.z - v3.z const nx = ay * bz - az * by const ny = az * bx - ax * bz const nz = ax * by - ay * bx const mag = Math.hypot(nx, ny, nz) const polyNormal = poly[normalName] polyNormal.x = nx / mag polyNormal.y = ny / mag polyNormal.z = nz / mag } const computePolyMiddle = (poly) => { const v = poly.vertices if (v.length === 3) { poly.middle.x = (v[0].x + v[1].x + v[2].x) / 3 poly.middle.y = (v[0].y + v[1].y + v[2].y) / 3 poly.middle.z = (v[0].z + v[1].z + v[2].z) / 3 } else { poly.middle.x = (v[0].x + v[1].x + v[2].x + v[3].x) / 4 poly.middle.y = (v[0].y + v[1].y + v[2].y + v[3].y) / 4 poly.middle.z = (v[0].z + v[1].z + v[2].z + v[3].z) / 4 } } const computePolyDepth = (poly) => { computePolyMiddle(poly) const dX = poly.middle.x const dY = poly.middle.y const dZ = poly.middle.z - cameraDistance poly.depth = Math.hypot(dX, dY, dZ) } const createTarget = () => { const color = COLORS[Math.floor(Math.random() * COLORS.length)] const target = new Entity(model, color) target.x = Math.random() * 600 - 300 target.y = height / (2 * viewScale) + targetRadius * 2 target.z = Math.random() * targetRadius * 2 - targetRadius target.xD = Math.random() * (target.x * -2 / 120) if (gameStateRef.current.mode === 'ZEN') { target.yD = -12 } else if (gameStateRef.current.mode === 'TIME_ATTACK') { target.yD = -22 } else { target.yD = -16 - (gameStateRef.current.level * 0.3) } target.rotateXD = (Math.random() - 0.5) * 0.15 target.rotateYD = (Math.random() - 0.5) * 0.15 target.rotateZD = (Math.random() - 0.5) * 0.15 target.health = getCubeHealth() target.maxHealth = target.health target.hit = false target.flashTime = 0 return target } const createFragments = (target, count = 12) => { const frags = [] for (let i = 0; i < count; i++) { const angle = (Math.PI * 2 * i) / count const speed = 6 + Math.random() * 5 const frag = new Entity(makeCubeModel(targetRadius / 4), target.color) frag.x = target.x frag.y = target.y frag.z = target.z frag.xD = Math.cos(angle) * speed + target.xD frag.yD = Math.sin(angle) * speed + target.yD frag.zD = (Math.random() - 0.5) * 5 frag.rotateX = target.rotateX frag.rotateY = target.rotateY frag.rotateZ = target.rotateZ frag.rotateXD = (Math.random() - 0.5) * 0.3 frag.rotateYD = (Math.random() - 0.5) * 0.3 frag.rotateZD = (Math.random() - 0.5) * 0.3 frag.life = 70 frags.push(frag) } return frags } const createParticles = (x, y, color, count = 20) => { const colorStr = `rgba(${color.r}, ${color.g}, ${color.b}, 1)` for (let i = 0; i < count; i++) { particles.push(new Particle(x, y, colorStr)) } } const updateCombo = () => { const now = Date.now() if (now - lastHitTime > 1500) { currentCombo = 0 } currentCombo++ lastHitTime = now gameStateRef.current.combo = currentCombo if (currentCombo > gameStateRef.current.maxCombo) { gameStateRef.current.maxCombo = currentCombo } setCombo(currentCombo) if (currentCombo > 1) { playComboSound(currentCombo) } } const checkLevelUp = () => { const targetScore = gameStateRef.current.level * 100 if (gameStateRef.current.score >= targetScore) { gameStateRef.current.level++ gameStateRef.current.coins += 50 setLevel(gameStateRef.current.level) setCoins(gameStateRef.current.coins) playLevelUpSound() gameStateRef.current.backgroundHue = (gameStateRef.current.backgroundHue + 60) % 360 setBgHue(gameStateRef.current.backgroundHue) } } const gameLoop = (timestamp) => { const deltaTime = timestamp - lastTime lastTime = timestamp if (menuActive !== null) return if (gameStateRef.current.mode === 'TIME_ATTACK') { gameTimer += deltaTime const remaining = Math.max(0, 60 - Math.floor(gameTimer / 1000)) gameStateRef.current.timeLeft = remaining setTimeLeft(remaining) if (remaining === 0) { saveScore() setMenuActive('SCORE') return } } ctx.clearRect(0, 0, canvas.width, canvas.height) const drawScale = dpr * viewScale ctx.save() ctx.scale(drawScale, drawScale) ctx.translate(width / (2 * viewScale), height / (2 * viewScale)) const simTime = deltaTime * gameSpeed const simSpeed = gameSpeed if (slowmoRemaining > 0) { slowmoRemaining -= deltaTime if (slowmoRemaining < 0) slowmoRemaining = 0 gameSpeed = pointerDown ? 0.1 : 0.4 setSlowmoPercent(slowmoRemaining / 1500) } else { gameSpeed += (1 - gameSpeed) / 20 setSlowmoPercent(0) } const maxCubes = getMaxCubes() let spawnDelay = 1800 if (gameStateRef.current.mode === 'TIME_ATTACK') { spawnDelay = 900 } else if (gameStateRef.current.mode === 'ZEN') { spawnDelay = 2500 } else { spawnDelay = Math.max(1500 - (gameStateRef.current.level * 40), 800) } spawnTime -= simTime if (spawnTime <= 0 && targets.length < maxCubes) { targets.push(createTarget()) spawnTime = spawnDelay } const pointerSceneX = (pointerX / viewScale) - width / (2 * viewScale) const pointerSceneY = (pointerY / viewScale) - height / (2 * viewScale) const pointerDX = pointerSceneX - lastPointerX / viewScale const pointerDY = pointerSceneY - lastPointerY / viewScale const pointerSpeed = Math.hypot(pointerDX, pointerDY) if (pointerDown) { touchPoints.push({ x: pointerSceneX, y: pointerSceneY, life: 150 }) if (touchPoints.length > 1) { const prev = touchPoints[touchPoints.length - 2] sliceLines.push(new SliceLine(prev.x, prev.y, pointerSceneX, pointerSceneY, ballConfig.trailColor)) } } touchPoints.forEach(p => p.life -= simTime) while (touchPoints[0] && touchPoints[0].life <= 0) touchPoints.shift() sliceLines.forEach(line => line.update()) for (let i = sliceLines.length - 1; i >= 0; i--) { if (sliceLines[i].life <= 0) sliceLines.splice(i, 1) } const centerY = height / (2 * viewScale) for (let i = targets.length - 1; i >= 0; i--) { const target = targets[i] target.x += target.xD * simSpeed target.y += target.yD * simSpeed target.z += target.zD * simSpeed target.yD += gravity * simSpeed target.rotateX += target.rotateXD * simSpeed target.rotateY += target.rotateYD * simSpeed target.rotateZ += target.rotateZD * simSpeed if (target.flashTime > 0) { target.flashTime -= simTime } target.transform() target.project() if (target.y > centerY + targetRadius * 2) { targets.splice(i, 1) if (gameStateRef.current.mode === 'RANKED') { saveScore() setMenuActive('SCORE') } currentCombo = 0 setCombo(0) continue } const distance = Math.hypot(pointerSceneX - target.projected.x, pointerSceneY - target.projected.y) if (pointerDown && !target.hit && distance < 55 && pointerSpeed > 2) { target.hit = true target.flashTime = 100 playSliceSound() target.health-- const hitScore = 5 * (1 + currentCombo * 0.2) gameStateRef.current.score += Math.floor(hitScore) setScore(gameStateRef.current.score) createParticles(target.projected.x, target.projected.y, target.color, 8) if (target.health <= 0) { playBreakSound(currentCombo) updateCombo() const breakScore = 15 * (1 + currentCombo * 0.3) gameStateRef.current.cubeCount++ gameStateRef.current.score += Math.floor(breakScore) gameStateRef.current.coins += (2 + Math.floor(currentCombo / 3)) setScore(gameStateRef.current.score) setCubeCount(gameStateRef.current.cubeCount) setCoins(gameStateRef.current.coins) fragments.push(...createFragments(target)) createParticles(target.projected.x, target.projected.y, target.color, 25) targets.splice(i, 1) if (gameStateRef.current.mode !== 'TIME_ATTACK' && gameStateRef.current.mode !== 'ZEN') { checkLevelUp() } } } else if (!pointerDown) { target.hit = false } } for (let i = fragments.length - 1; i >= 0; i--) { const frag = fragments[i] frag.life-- if (frag.life <= 0) { fragments.splice(i, 1) continue } frag.x += frag.xD * simSpeed frag.y += frag.yD * simSpeed frag.z += frag.zD * simSpeed frag.yD += gravity * simSpeed frag.xD *= 0.97 frag.yD *= 0.97 frag.rotateX += frag.rotateXD * simSpeed frag.rotateY += frag.rotateYD * simSpeed frag.rotateZ += frag.rotateZD * simSpeed frag.transform() frag.project() } for (let i = particles.length - 1; i >= 0; i--) { particles[i].update() if (particles[i].life <= 0) { particles.splice(i, 1) } } const allShadowPolys = [...targets, ...fragments].flatMap(e => e.shadowPolys) ctx.fillStyle = 'rgba(0, 0, 0, 0.3)' allShadowPolys.forEach(p => { ctx.beginPath() const { vertices } = p ctx.moveTo(vertices[0].x, vertices[0].y) for (let i = 1; i < vertices.length; i++) { ctx.lineTo(vertices[i].x, vertices[i].y) } ctx.closePath() ctx.fill() }) const allPolys = [...targets, ...fragments].flatMap(e => e.polys) allPolys.forEach(p => { computePolyNormal(p, 'normalWorld') computePolyNormal(p, 'normalCamera') }) allPolys.forEach(computePolyDepth) allPolys.sort((a, b) => b.depth - a.depth) allPolys.forEach(p => { if (p.normalCamera.z < 0) return const normalLight = p.normalWorld.y * 0.5 + p.normalWorld.z * -0.5 const lightness = normalLight > 0 ? 0.15 : ((normalLight ** 32 - normalLight) / 2) * 0.85 + 0.15 let flashBoost = 0 targets.forEach(t => { if (t.flashTime > 0) { const dist = Math.hypot(t.x - p.middle.x, t.y - p.middle.y, t.z - p.middle.z) if (dist < targetRadius * 2) { flashBoost = (t.flashTime / 100) * 0.3 } } }) ctx.fillStyle = shadeColor(p.color, Math.min(lightness + flashBoost, 1)) ctx.shadowBlur = flashBoost * 20 ctx.shadowColor = shadeColor(p.color, 0.8) ctx.beginPath() const { vertices } = p ctx.moveTo(vertices[vertices.length - 1].x, vertices[vertices.length - 1].y) for (let v of vertices) { ctx.lineTo(v.x, v.y) } ctx.closePath() ctx.fill() ctx.shadowBlur = 0 }) particles.forEach(p => p.draw(ctx)) sliceLines.forEach(line => line.draw(ctx)) ctx.strokeStyle = ballConfig.trailColor for (let i = 1; i < touchPoints.length; i++) { const current = touchPoints[i] const prev = touchPoints[i - 1] const scale = current.life / 150 ctx.lineWidth = scale * 8 ctx.shadowBlur = 15 ctx.shadowColor = ballConfig.color ctx.lineCap = 'round' ctx.beginPath() ctx.moveTo(prev.x, prev.y) ctx.lineTo(current.x, current.y) ctx.stroke() } ctx.shadowBlur = 0 ctx.restore() gameLoopRef.current = requestAnimationFrame(gameLoop) } const handlePointerDown = (e) => { initAudio() pointerDown = true const rect = canvas.getBoundingClientRect() pointerX = e.clientX - rect.left pointerY = e.clientY - rect.top lastPointerX = pointerX lastPointerY = pointerY } const handlePointerMove = (e) => { const rect = canvas.getBoundingClientRect() lastPointerX = pointerX lastPointerY = pointerY pointerX = e.clientX - rect.left pointerY = e.clientY - rect.top } const handlePointerUp = () => { pointerDown = false } canvas.addEventListener('mousedown', handlePointerDown) canvas.addEventListener('mousemove', handlePointerMove) canvas.addEventListener('mouseup', handlePointerUp) canvas.addEventListener('touchstart', (e) => { e.preventDefault() const touch = e.touches[0] handlePointerDown({ clientX: touch.clientX, clientY: touch.clientY }) }) canvas.addEventListener('touchmove', (e) => { e.preventDefault() const touch = e.touches[0] handlePointerMove({ clientX: touch.clientX, clientY: touch.clientY }) }) canvas.addEventListener('touchend', handlePointerUp) gameLoopRef.current = requestAnimationFrame(gameLoop) return () => { if (gameLoopRef.current) cancelAnimationFrame(gameLoopRef.current) canvas.removeEventListener('mousedown', handlePointerDown) canvas.removeEventListener('mousemove', handlePointerMove) canvas.removeEventListener('mouseup', handlePointerUp) } }, [menuActive, isMuted, isMobile]) const saveScore = async () => { if (gameStateRef.current.score > 0) { await database.put({ type: 'score', score: gameStateRef.current.score, level: gameStateRef.current.level, cubes: gameStateRef.current.cubeCount, maxCombo: gameStateRef.current.maxCombo, mode: gameStateRef.current.mode, timestamp: Date.now() }) if (gameStateRef.current.score > highScore) { setHighScore(gameStateRef.current.score) } } await saveProgress() } const saveProgress = async () => { const existing = progressDocs[0] await database.put({ _id: existing?._id, type: 'progress', coins: gameStateRef.current.coins, unlockedBalls: gameStateRef.current.unlockedBalls, selectedBall: gameStateRef.current.selectedBall }) } const unlockBall = async (ballKey) => { const ball = ballTypes[ballKey] if (gameStateRef.current.coins >= ball.price && !unlockedBalls.includes(ballKey)) { playCoinSound() gameStateRef.current.coins -= ball.price gameStateRef.current.unlockedBalls.push(ballKey) setCoins(gameStateRef.current.coins) setUnlockedBalls([...gameStateRef.current.unlockedBalls]) await saveProgress() } else { playUISound() } } const selectBall = async (ballKey) => { if (unlockedBalls.includes(ballKey)) { playUISound() gameStateRef.current.selectedBall = ballKey await saveProgress() } } const startGame = (mode) => { playUISound() gameStateRef.current.mode = mode gameStateRef.current.level = 1 gameStateRef.current.score = 0 gameStateRef.current.cubeCount = 0 gameStateRef.current.combo = 0 gameStateRef.current.maxCombo = 0 gameStateRef.current.timeLeft = 60 setScore(0) setLevel(1) setCubeCount(0) setCombo(0) setTimeLeft(60) setMenuActive(null) } const bgStyle = { background: `radial-gradient(circle at 50% 120%, hsl(${bgHue}, 60%, 15%) 0%, hsl(${(bgHue + 40) % 360}, 50%, 12%) 50%, #0a0a0a 100%)` } if (!isMobile) { return (

📱

MENJA PRO

Mobile Uniquement

Ce jeu est optimisé exclusivement pour les appareils mobiles et tablettes.

Scannez ce lien avec votre mobile pour jouer

) } return (

) }

MENJA PRO

Mobile Uniquement

MENJA PRO

À PROPOS

LE JEU

MODES

CRÉATEUR

CARACTÉRISTIQUES

PAUSE

{gameStateRef.current.mode === 'TIME_ATTACK' ? '⏱️ TEMPS ÉCOULÉ' : '💥 GAME OVER'}

BOUTIQUE

{ball.name}

💰 GAGNER DES COINS