گوکو در برابر سایتاما | نبرد افسانه‌ها

The user is asking in Persian (Farsi) to make a game of Goku vs Saitama. They want it to be a really good game and to not make any mistakes. Let's build a fighting game — Goku vs Saitama. Make it a 2D fighting game with HTML5 Canvas, with the following features: - Character select screen (Goku or Saitama) - AI opponent battle - Health bars - Special moves (Goku: Kamehameha, Saitama: Serious Punch) - Movement, jumping, punching, ki blasts - Visual effects: auras, particles, screen shake - RTL Persian UI text Design considerations: - Fighting game aesthetic — Dragon Ball Z style energy, One Punch Man style - Distinctive display font — for Persian, we can use fonts like "Lalezar" (display) and "Vazirmatn" (body) from Google Fonts. These support Persian/Arabic script. - Animated background: sky, clouds, rocky battlefield, ki particles - Since it's RTL, dir="rtl" Game mechanics: - Player picks Goku or Saitama, opponent is the other (AI) - Controls: arrow keys / WASD for movement, jump; keys for punch/kick/special - Health bar, ki bar (energy) - Hit effects, damage numbers, screen shake - Round system (best of 3?) - Victory screen Let's carefully design so it works without bugs. Controls (keyboard): - A/D or arrow left/right: movement - W or up: jump - S or down: guard (block) - J or Z: punch (light attack) - K or X: kick (heavy attack) - L or C: special move (uses ki) — Goku: Kamehameha beam; Saitama: Serious Punch (dashing mega punch) - Shift or space for dash? Keep it manageable: - ←→ movement, ↑ jump, ↓ guard - Z / J: punch - X / K: heavy attack - C / L: special move - A / ; or V: ki charge (to build up ki) Actually, let's simplify: - Arrow keys: movement/jump/guard - Z: light attack - X: heavy attack - C: special move (needs ki) - V: ki charge (hold to charge) AI opponent: simple state machine — approach, attack when close, sometimes guard, sometimes jump, sometimes fire ki blast, use special move when ki is full. Both characters drawn on Canvas (stylized sprites made of shapes): - Goku: orange gi, blue undershirt, black spiky hair (maybe make Super Saiyan when low HP or on special activation — hair turns gold, aura gold) - Saitama: yellow suit, white cape, red gloves, shiny bald head Visuals: - Background: dusk sky gradient, distant city/mountains, moving clouds, floating particles - Ground: rocky arena with a platform - Aura particles around characters - Kamehameha: blue beam with charge animation - Serious Punch: Saitama dashes forward with a giant fist, screen shake - Hit sparks, damage numbers - Screen shake on heavy attacks UI: - Title screen: "گوکو در برابر سایتاما" big display font, animated - Character select: two cards - HUD: health bars at top, ki bars, names, round indicators - Victory/defeat screen with restart Since it's a fighting game, everything fits in one HTML file with Canvas. Include Google Fonts link for Lalezar (Persian display) and Vazirmatn. Sound: we could use WebAudio API for synthesized sounds (punch thuds, beam sounds) — no external files needed. Simple oscillator-based SFX. Make it optional with a mute button. Add simple WebAudio sounds: hit, jump, special, charge. Need to handle user gesture requirement — initialize audio on first keydown/click. Let's write the code carefully to avoid bugs. Structure: ```html meta, title Google fonts: Lalezar, Vazirmatn style

overlays handled by drawing on Canvas?

``` Draw menus on Canvas or HTML? HTML overlays are easier for RTL Persian text and look better. Use HTML overlay divs for: 1. Title screen (start) 2. Character select 3. Battle HUD (health bars etc. — could be Canvas, but HTML is cleaner; however syncing every frame with DOM is… can update DOM bars via style width — that's fine) 4. Round announce ("راند ۱... مبارزه!") 5. Result screen Persian numerals: use toLocaleString('fa-IR') or manual conversion. Nice touch: Persian numerals. Let's define the game engine: ```js const W = 960, H = 540; canvas fixed logical size, scale to window with CSS (preserve aspect ratio). ``` Fighter class: - properties: x, y, vx, vy, facing (1/-1), hp (max 100), ki (max 100), state: 'idle','walk','jump','attack','special','hurt','block','charge','ko' - attack data: punch (fast, 8 damage, range 70), heavy (slower, 14 damage, range 90), special move - Hitboxes: body rect ~ width 60 height 110 Attack system: when attack key is pressed and state is idle/walk, enter attack state with timer; at specific frame "active window" — check hit rect overlap with opponent; apply damage once (flag to prevent multi-hit). Guard: hold down to reduce damage to 20%, no knockback… guard only works when facing the opponent. Ki: gain over time when attacking/getting hit, charge (hold V) charges it faster. Special moves consume: Goku Kamehameha 40 ki, Saitama Serious Punch 50 ki? Goku special: Kamehameha — charge stance for 0.6s, then beam extends for 0.8s, does continuous damage while overlapping; beam is a big rect. Blue beam with core. Saitama special: Serious Punch — dashes forward at high speed with big fist; 35 damage on hit, huge knockback and screen shake. Nearly unblockable (or reduced by guard). Also give both a ki blast projectile as heavy attack? Let's differentiate: - Goku heavy = ki blast projectile (small energy ball) - Saitama heavy = heavy punch Goku light = fast punch combo; Saitama light = fast punch. Hmm, projectiles add complexity but make it richer. Let's include one projectile type used by Goku heavy and also as AI attack. Manageable. Super Saiyan: when Goku HP < 35%, aura turns gold, hair gold, +20% damage. Nice touch. Saitama "Serious Series" mode similarly? Saitama could have red aura when low HP. Keep: Goku SSJ visual; Saitama's cape flutters. AI logic (each frame): - distance = |opp.x - ai.x| - if special ready & random < small chance & distance appropriate → special - if projectile coming → guard or jump - if distance > 250 → approach, sometimes ki blast (if AI is Goku) or dash - if distance < 100 → attack (random light/heavy), sometimes guard - Sometimes charge ki when far - Reaction randomness by difficulty Round system: best of 3 (first to 2 wins). Round announce text overlay, reset positions, hp full, keep ki? Keep ki for continuity? Simpler: reset ki to 30. Timer: 60 seconds per round; on timeout the one with more HP wins the round. Screen shake: shakeTime, shakeMag; apply random offset in render. Hit pause (freeze frame) for punch feel: on hit, freeze both for 60-100ms — adds punchiness. Implement hitStop timer that skips update but keeps drawing. Particles: - Hit sparks (yellow/white star bursts) - Aura particles (rising flames around fighters) - Dust when landing/dashing - Beam particles Damage numbers float up. Background: - Sky gradient (dusk orange to purple? for a daytime canyon: bright blue at top → warm horizon) - Sun - Parallax mountains / rocky pillars (Dragon Ball style canyon) - Clouds drifting - Ground with cracks - Floating ambient particles (dust/ki motes) Title screen: big animated title "گوکو در برابر سایتاما" with VS, animated energy in background. The opening should be distinctive: two silhouettes facing each other, lightning. Title screen is rendered in HTML with CSS-animated energy rings and portraits drawn on Canvas behind? Simpler: Canvas keeps running "attract mode" background, HTML overlay for title. Actually, we can render a Canvas scene of both fighters standing facing each other on the title — that's very distinctive for a fighting game! So the game loop is always running; state machine: TITLE → SELECT → FIGHT_INTRO → FIGHT → ROUND_END → MATCH_END. During TITLE and SELECT, Canvas draws the arena with both fighters in idle animation (a nice living backdrop). HTML overlays: - #screen-title: title, tagline, "شروع بازی" button, controls hint - #screen-select: two character cards (drawn portrait? Use Canvas mini-portraits — can use two small canvases for portraits and draw fighters there). Card click to select; hover effect. Button to confirm? Clicking card directly starts battle: "قهرمان خود را انتخاب کن". - #hud: health/ki bars, names, round pips, timer - #announce: round text (CSS animation triggered) - #screen-result: winner text, rematch button, character select button - Pause? Maybe Esc to pause. Add: Escape toggles pause overlay. Nice-to-have; keep simple: Esc pauses with overlay. Touch controls? Not required; keyboard focused. But adding simple on-screen note. User probably is on desktop. Include a controls list on title/select screens. Mobile buttons: could add but risks clutter; skip but note keyboard is required. Actually "make a really good game" — desktop keyboard is enough. Maybe add basic touch buttons anyway… let's skip for scope management; instead show keys prominently. OK, character rendering — this is the core. Need decent stylized drawing via Canvas shapes. Fighter dimensions: about 46 wide, 110 tall. Draw functions: drawGoku(ctx, f): - Pose based on state & animation timer - Orange gi: torso rect (rounded), blue belt sash, blue wristbands and boots, black spiky hair (draw with spiky triangles), skin head - When SSJ: hair fill gold + gold aura particles - Arms/legs as capsules, rotate based on state: - idle: slight bob, arms in guard stance - walk: legs scissor - punch: front arm extended - heavy: ki blast hand forward - special (kamehameha): both hands at side (charge) then forward - hurt: leaning back - block: arms crossed in front - charge: arms down, aura burst To keep code manageable and rich, build fighters from parametric pose data: compute offsets for limbs by state, then draw. Write a general "drawHumanoid" with color scheme and per-character differences (hair: spikes vs bald; outfit: gi vs suit + cape). Simplify: write drawFighter(f) with branches per state per character. Will be long but okay. Let's define geometry per fighter: feet at f.y (ground), body upward. Local coordinates: translate(f.x, f.y), scale(f.facing, 1) to mirror so drawing always faces +x. Then draw: - Legs: two from hip (-?) to foot positions - Torso - Head above - Arms Use simple shapes with lineWidth strokes for limbs (round caps) — will give a decent stylized look. Colors: Goku: skin #f2c088, gi orange #f57f17 / #ef6c00, blue #1565c0 (undershirt? actually blue wristbands/boots/belt? Classic Goku: orange gi with blue undershirt, blue wristbands, blue boots, blue sash). Hair black #111 or gold #ffd54f SSJ. Saitama: suit #fdd835 yellow, cape white #fafafa, gloves/boots red #d32f2f, head skin shiny #ffcc80 with shine highlight, face simple (draw simple face: two eyes, mouth; for fun "Serious mode" face on special: serious brows). Face: keep simple cartoon: dot eyes. Saitama's iconic blank face → serious face on special (angled brows). Goku determined face. Hair spikes (Goku): draw polygon spikes: series of triangles around head. Precompute spike array. Cape (Saitama): flowing behind — bezier with wave animation based on time and vx. Aura: for Goku idle (low intensity), draw soft radial gradient oval behind body; on charge/special/SSJ, stronger + flame particles. Saitama: on special, brief red flash aura. Beam (Kamehameha): from hand position, width grows, layered: outer glow (light blue), core (white). Slightly wave the beam edges. Hit sparks at tip where enemy is inside. Projectile (ki blast): glowing ball with trail particles. Serious Punch: Saitama dashes; giant fist drawn larger in front; add speedlines behind; on hit: big white flash + shockwave ring + huge shake. OK, now let's code carefully. Key parts: 1. Utilities: clamp, lerp, rand, rectsOverlap. 2. Persian numerals: const FA = '۰۱۲۳۴۵۶۷۸۹'; function faNum(n){ return String(n).replace(/\d/g, d=>FA[d]); } 3. Audio: simple SFX via WebAudio: ```js const AudioSys = { ctx: null, muted:false, init(){ if(!this.ctx){ try{ this.ctx = new (window.AudioContext||window.webkitAudioContext)(); }catch(e){} } if(this.ctx&&this.ctx.state==='suspended') this.ctx.resume(); }, play(type){ if(!this.ctx||this.muted) return; ... oscillator/noise envelopes } } ``` Sounds: 'punch' (low square blip + noise), 'heavy', 'hurt', 'beam' (long sawtooth sweep), 'charge' (rising), 'ko', 'jump', 'select', 'round'. Implement compactly with helper tone(freq, dur, type, vol, slideTo). Noise via buffer. 4. Input: keydown/keyup maps. Prevent default for arrows/space. Track pressed set and "justPressed" consumed per frame. Keys: - ArrowLeft/ArrowRight: movement - ArrowUp: jump - ArrowDown: guard - KeyZ or KeyJ: light - KeyX or KeyK: heavy - KeyC or KeyL: special - KeyV or KeyI: hold to charge? Actually let's map charge to a separate key: KeyV. Persian users also… keys are fine. - Escape: pause - Enter/Space: confirm on menus Also support A/D/W/S as second scheme? Maybe both WASD+JKL? Two schemes may conflict. Let's support arrows + ZXC V as primary, and mention it. Also add: KeyA/KeyD movement, KeyW jump, KeyS guard, and attacks J/K/L, charge ;? Too many. Just keep: arrows or WASD for movement; Z/J light; X/K heavy; C/L special; V charge. Flexible good mapping. 5. Fighter update physics: - gravity 2400 px/s², jump velocity -900, ground y = GROUND = 470 - walk speed 260 (Goku) 240 (Saitama)? Saitama slightly slower walking but dash is fast. Balance: Goku faster movement and faster light attack; Saitama stronger damage, higher HP? Stats: - Goku: hp 100, speed 270, light 7 damage fast, heavy ki blast 12, Kamehameha total ~30, jump -950 - Saitama: hp 110, speed 240, light 9, heavy 16, Serious Punch 32 big knockback - Facing: always face opponent unless in special. States with timers: - attack state: {move:'light'|'heavy'|'special', t, dur, activeFrom, activeTo, hasHit} - For beam: phase 'charge' 0.5s then 'fire' 0.9s. - Hurt state 0.35s stun, knockback vx. - Guard: while grounded & holding down & not attacking: state block; chip damage 15%, no stun (except small pushback). - KO: fall down, round ends after 1s. Collision: fighters push each other apart when overlapping (no full pass-through — or allow crossing jump). Simple horizontal separation when body rects overlap. Projectiles array: {x,y,vx,owner,dmg,r,life}. Update, collision with opponent rect (unless owner), on hit → damage & spark. Removed off-screen. Goku heavy spawns projectile from hand. AI Goku too. Saitama heavy = heavy punch (no projectile). AI Saitama doesn't need projectiles; instead occasional jump-in. Kamehameha beam: represented as active hitbox during fire: rect from x+facing*30 to x+facing*(30+len), len grows fast to 700, height ~40. Damage 2/tick with small stun? Continuous: apply dps if not hit recently (store lastBeamHitTime on target). Beam is blocked? Guard reduces to 30%. Beam pushes target (vx in beam direction). Serious Punch: state special, duration 0.5s; vx = facing*900 during it; fist hitbox in front 90x90; if hits once: 30 damage, knockback 800, launch vy -300, shake 20, flash, hitstop 120ms. Recovery 0.4s after. AI thinking every frame with cooldown timers: ``` ai.think -= dt; if(ai.think<=0){ decide(); ai.think = 0.15+rand*0.2 } ``` Decision making: set ai intent flags (moveDir, wantJump, wantBlock, wantAttack...) for a duration. Keep virtual input approach: AI writes to same input structure as player. Clean: fighters have an "input" object {left,right,up,down,light,heavy,special,charge}, player input from keys, AI input from AI controller. AI difficulty scales per round? Keep constant medium. AI behavior details: - If opponent attacking & close & random → guard chance 0.5 (hold down for 0.4s) - If Goku AI & ki>=40 & dist>260 & random<0.12 → special (Kamehameha) - If Saitama AI & ki>=50 & dist in 150..400 & random<0.15 → special - If dist>320: approach; if Goku & ki>=15 & random<0.2 → heavy ki blast; if random<0.1 → jump in approach - If dist<110: random: light 0.5 / heavy 0.25 / retreat 0.1 / guard 0.15 - If ki<30 & dist>350 & random<0.2 → charge for 0.8s (hold charge) - Random hop Also AI avoids spamming: cooldowns on attacks. 6. HUD DOM updates: - Health bar width %, color shifts to red when low; ki bar; names; timer seconds; round pips (dots). Direction: RTL layout: player side right, enemy side left (in RTL, reading direction, player on right feels natural? Fighting games typically P1 left. In RTL, mirror: P1 right). Keep player right side, enemy left side; fighters spawn accordingly: player x=W*0.7 facing left(-1)? Wait facing: player at x=670 facing left toward enemy at 290. Hmm, in a typical fight: P1 left facing right. With RTL, mirror: player right facing left. Draw with scale(facing) so fine. Timer in middle top. Announce text: "راند ۱" then "مبارزه!" animated (scale in, fade). Use CSS classes toggled by JS with timeouts. 7. Round flow: - startMatch(): score 0-0, round 1, startRound() - startRound(): reset fighters (position, hp full, ki=30), clear projectiles/particles, state='intro'; announce "راند X"; after 1.2s announce "مبارزه!" enable controls (state='fight') after 0.8s more. - During fight: check KO or timer 0 → endRound(winner) → announce winner ("گوکو برنده راند شد" / "سایتاما..." or "DRAW"); after 2s next round or match end. - matchEnd → show result screen with winner name + stats (max combo? keep simple: rounds). Buttons: "مبارزه دوباره", "انتخاب شخصیت". Combo counter: track consecutive hits by player without being hit & within 1.2s window → show "کمبو x۳!" floating. Nice touch, adds punchiness. Implement per fighter: comboCount, comboTimer. Display on HUD side with pulse. 8. Particle system: array of {x,y,vx,vy,life,maxLife,size,color,type:'spark'|'aura'|'dust'|'ring'|'text'} with update/draw. Damage numbers as particles of type text. 9. Ambient background elements: drifting clouds (parallax), floating dust motes, occasional birds? Keep clouds + motes + subtle sun rays. Now for title/select screens: draw both fighters on Canvas in idle facing each other as backdrop. Fighters exist only during battle… let's create persistent "demo" fighters for menu: always keep two fighter objects p1,p2; during menu they just idle-animate at menu positions; during battle they're placed in battle. Simplest: always keep fighters; game.phase controls updates (menu: only idle animation + facing each other). Character select: two big cards with mini-Canvas portraits (draw fighter close-up). Portrait draw: call same draw function scaled/cropped — draw fighter to a small Canvas (like 200x240) with translate/scale. Portrait Canvases rendered once (+ maybe animate aura with rAF). Animate at low cost: redraw portrait each frame with time — okay. Card content: name "گوکو", epithet "سایان افسانه‌ای", stats bar (قدرت/سرعت/انرژی) small bars, signature move name. Hover: lift + aura glow. Selected card highlighted; click starts battle. Also allow choosing difficulty? Scope management: skip. Actually easy difficulty add: add 3 difficulty buttons — "مبتدی / جنگجو / افسانه‌ای" — affects AI reaction. Cheap to add: ai.skill multiplier. Add to select screen. OK — the code will be large, but let's write it carefully. Let's carefully write the drawing functions. Coordinate system: y downward; ground GROUND_Y = 470 (Canvas H=540). Fighter f.y = feet y. Body: feet (0,0), hips -48, shoulder -86, head center -100, head radius 16 → top ~-116. Total height ~116. drawFighter(f, t): ``` ctx.save(); ctx.translate(f.x + shakeless?, f.y); // Shadow drawn separately before translate? Draw shadow at ground beneath fighter: ellipse at (f.x, GROUND_Y+6) ctx.scale(f.facing, 1); // Now +x is forward pose computation... draw order: cape (Saitama, behind), back arm, back leg, torso, front leg, head + hair, front arm, effects ``` Pose parameters computed from f.state & f.animT: - bob = sin(t*4)*2 idle - Walking: legs swing with sin - Punch: extend arm: forearm hand position (armLen reach 46 → 70 during active) - etc. To avoid over-engineering, I'll hardcode per-state drawing with small helpers: Helpers: ``` function limb(x1,y1,x2,y2,w,color){ ctx.strokeStyle=color; ctx.lineWidth=w; ctx.lineCap='round'; line } function capsule/torsoRounded(x,y,w,h,color,r) ``` Goku drawing specifics: - Boots: dark blue; draw legs as orange pants? Goku gi pants are orange down with blue boots. Legs: hip to knee orange, knee to feet blue boots (two segments). - Torso: orange gi with blue undershirt at chest (draw orange rect + blue inner triangle at collar?). Keep: orange torso, dark blue belt band at waist, blue wrist circles. - Arms: skin color with orange short sleeve at shoulder; wristbands blue. - Head: skin circle; hair: spikes. Draw hair as filled path: series of triangles around top back of head. Precompute spike array: [{angle, len}] then draw polygon with point at head center. SSJ → gold + glowing. Saitama: - Suit yellow everywhere; gloves red; boots red; cape white behind (draw wavy shape with bezier anchored at shoulders, length ~60, wave sin(t*6 + ...), amplitude bigger when moving). - Head: skin circle, small shine white oval; face: draw simple face: eyes as two dots (when facing: only show one eye front). Keep both eyes but scaled by facing? Since we've scaled ctx, we draw face in profile: eyes near forward edge. Face: keep simple cartoon: dot eyes. Saitama's iconic blank face → serious face on special (angled brows). Goku determined face. Hair spikes (Goku): draw polygon spikes: series of triangles around head. Precompute spike array. Aura draw: function drawAura(f, color, intensity): layered oval flame shapes with flicker: draw 3 bezier flame silhouettes behind fighter with sin(t*30+i) jitter, alpha by intensity; also emit aura particles in update. Kamehameha pose: hands together at side (charge) — draw both arms pulled to hip with glowing blue orb between hands growing; on fire: both arms extended forward, beam. Beam stored in fighter: f.beam = {len, maxLen, t}. Draw from hand (local x 40, y -80) to world direction: since we've scaled, we can draw beam inside local transform: rect from 30 to 30+len, height around y -80 center ±20. Add waviness: draw as path with sin offset. Serious Punch pose: forward lean, big fist in front: draw forearm extra thick, fist circle radius 22 (normal 9), red glove, speedlines behind (draw in world space before fighter? Draw lines behind in local negative x). Hit flash: f.flashT > 0 → draw white overlay: use ctx.globalCompositeOperation trick; simpler: draw fighter normally then overlay a translucent white rect on fighter area? Better: composite 'source-atop' needs off-screen. Simplest robust: if f.flashT>0, after drawing fighter, draw a white silhouette approximation — or skip silhouette flash; instead add white spark particles + shake on hit; visually sufficient. Alternative: draw fighter twice with ctx.filter = 'brightness(3)' — filter is expensive but ok with just 2 fighters and is supported in modern browsers. Use ctx.filter='brightness(2.2)' when flash — easy. Let's do that. Screen flash on big hits: white overlay alpha decaying (screenFlash variable). OK AI & input mapping to a fighter.update(f, input, dt). Fighter update pseudocode: ``` f.animT += dt if(f.state==='ko'){ physics only, lying; return } facing: if(state not special) f.facing = opp.x >= f.x ? 1 : -1 // timers decay attackTimer etc. switch state: 'idle','walk','block','charge': can transition by input if input.down && grounded && canAct → state='block' else if input.charge && grounded && canAct → state='charge', ki += 30*dt (cap), aura particles, charge sound occasionally attacks: if input.light/h/special pressed (edge) && canAct → startAttack movement: if canMove(state idle/walk/jump): vx = dir*speed; state walk/idle by dir and grounded jump: if input.upEdge && grounded → vy=-jumpV, state jump, dust gravity when not grounded clamp x in arena [40, W-40] ground: if y>=GROUND: y=GROUND vy=0; if was airborne → dust land push-apart with opponent projectile & beam handled in global update combo timer decay ``` canAct = state in [idle,walk] (block can be cancelled by releasing down; charge cancelable by release). Attack start: ``` f.state='attack'; f.attack={kind, t:0, dur, from,to, hit:false} light: dur 0.28 (goku 0.24), active .08–.16 heavy goku: dur .5, at t .18 spawn projectile heavy saita: dur .45, active .12–.24, dmg 16 special goku: state 'special', phase charge .55 then fire .9; ki-=40 special saita: state 'special', dash: vx=facing*950 for t<.4; fist active .05–.4; recovery until dur .75; ki-=50 ``` During attack, movement restricted (vx *= 0.8 decay). Hit detection for melee: compute fist rect: forward in world: x + facing*(range/2+offset)... rect: cx = f.x + f.facing*(reach), cy=f.y-80; rect width reach*? Let's define: attackBox(f, reach, h=60, cy=f.y-78): {x: f.facing>0? f.x+10 : f.x-10-reach, y:cy-h/2, w:reach, h}. If overlaps opp body rect & !opp... apply. Body rect: {x:f.x-23, y:f.y-115, w:46, h:115}. applyHit(att, def, dmg, kb, opts): ``` if def is blocking && facing attacker && grounded && blockable: dmg*=0.15, kb*=0.3, blue sparks, block sound, small pushback else: def.hp-=dmg; def.state='hurt'; def.hurtT=.35; def.vx = kb*att.facing; if heavy def.vy=-250; flash; sparks; damage text; hitstop; shake; sound; combo for att if def.hp<=0 → KO sequence ki gain: att.ki+=6, def.ki+=4 per hit ``` Beam continuous: if beam active and rect overlaps opponent: if opp guarding → dps small; else dps 45*dt? Over 0.9s ≈ 40 damage — too much; let's do dps 34 → ~30 total. Plus pushback keeps them at beam tip. Add hit sparks at contact point. Sound loop during fire (oscillator start/stop). Manage beam sound node start at fire begin, stop at end — keep reference. Projectile vs opponent: overlap → applyHit(dmg, kb 300), remove projectile, explode particles. KO: def.hp=0 → def.state='ko', vy=-500, vx=att.facing*400; slow-mo? hitstop 250ms + big shake + announce KO. After 1.4s → endRound. Timer: roundTime 60; if 0 → winner = higher hp (tie → 'draw' round: no score? award both? make it "مساوی" and re-play round without score. Keep simple: award round to whoever has more HP; if equal nobody, next round). Edge cases: guard key only meaningful grounded; AI shouldn't jump-spam. Pause: only during fight; overlay div; Escape toggles; timer paused too since update skipped. Now DOM structure & CSS: Fonts: ```html ``` Lalezar for display (very punchy Persian display), Vazirmatn body. Palette: fighting-game dusk: deep blue-black around arena; UI accents: Goku orange #ff7a1a, Saitama yellow #ffd23f, energy cyan #52d8ff, red #ff3b3b. Page background: dark charcoal-blue #0d1117 with subtle radial glows (orange one side, yellow other) — two opposing energy glows representing the VS theme, a fighting-game signature. Plus animated floating ki motes in the page background via CSS? Canvas fills frame; around it, the page has subtle animated gradient. Keep body background dark with two radial glows (orange right, yellow left). Frame the Canvas with styled border: bold, with corner brackets? Give Canvas a 3px border + glow shadow. HUD design: top bar with two angled health bars (skewed parallelograms), names in Lalezar, ki bars below thinner, round pips, big timer center. Skew direction mirrored. CSS clip-path polygon for angle. Health bar fill gradient: green→? orange gradient #ffd23f→#ff5a1f? Keep: green (#5ee85e→#2fae4a) typical fighter, shifts to red on low via class. Actually make it character-colored: player bar orange? Fighting games use yellow/green health. Keep health fill yellowish gradient (#ffe95e→#ff9d1f) — classic. Ki bar cyan for Goku / red for Saitama. Announce center: Lalezar 90px with stroke/shadow, pop animation. Result screen: winner name huge, subtext, buttons styled as bold slanted. Buttons: skewX(-8deg) with thick border, hover: shift + glow, active: press. Persian text within Lalezar. Title screen: big "نبرد نابودی" as small kicker? Main title: "گوکو ⚡ برابر ⚡ سایتاما"? Title text: "گوکو در برابر سایتاما" with "در برابر" small and "VS" styled. Add tagline: "نبرد خدایان سایان در برابر قهرمان تک‌ضربه". Controls hint chip. Start button: "🔥 شروع نبرد". Also add mute button top-right (🔊/🔇) and pause hint. Select screen: heading "قهرمانت را انتخاب کن", two cards, difficulty segmented control, and a controls legend at bottom. Result: "پیروزی!" / "شکست!" big + character name + buttons. OK let's code. Let's be systematic. Also let's ensure RTL: Canvas drawing unaffected. HUD RTL layout: DOM flex with RTL: first child (player) appears right. Good: player right. But fighter spawn: player right → p1.x = W*0.72 facing -1, p2.x=W*0.28 facing 1. Now let's write update loop with fixed dt clamp (dt=min(0.033, real)). hitStop: if(hitStopT>0){ hitStopT-=realDt; skip world updates except particles slightly? Freeze everything including particles for impact feel — but beam looks weird freeze; okay, it's classic hitstop. Shake decays with real dt.} Let's define classes as plain objects + functions to keep it simple. Let's now write the code mentally and verify the tricky parts: - keydown e.code; also prevent default for arrows & space. - justPressed: maintain a set `pressed` added on keydown (if !repeat), consumed in update: helper jp(code) checks set presence; clear set after each frame update. Input mapping: ``` moveLeft: ArrowLeft or KeyA moveRight: ArrowRight or KeyD up: ArrowUp or KeyW down: ArrowDown or KeyS light: KeyZ or KeyJ heavy: KeyX or KeyK special: KeyC or KeyL charge: KeyV ``` Player input builder: ``` {left: key(ArrowLeft)||key(KeyA), ..., upEdge: jp(...), lightEdge: jp(...), ...} ``` AI input builder returns same shape with ai controller state. Fighter factory: ``` function makeFighter(charId, x, facing){ return {char:charId, x, y:GROUND_Y, vx:0, vy:0, facing, hp:100, hpMax, ki:30, state:'idle', animT:rand*10, attack:null, special:null, hurtT:0, flashT:0, combo:0, comboT:0, blockHeld:false, koT:0, beam:null, chargeSnd:0, aiMemory:{...}} } ``` Stats per character: ``` STATS = { goku: {hp:100, speed:280, jump:940, lightDmg:7, heavyDmg:12, spCost:40, name:'گوکو', title:'سایان افسانه‌ای'}, saita:{hp:115, speed:245, jump:880, lightDmg:9, heavyDmg:17, spCost:50, name:'سایتاما', title:'قهرمان تک‌ضربه'} } ``` Special goku flow: ``` startSpecial(f): if ki=1.45, then shrink & end at 1.6. While beam active: hitbox rect: startX=f.x+f.facing*40, endX=startX+f.facing*beam.len → normalize rect. Overlaps opponent body: apply beam damage. After t>1.6: f.special=null, f.beam=null, state idle, stop sound. saitama: t+=dt; during t<0.42: vx=facing*980 (override), y grounded; fist hitbox active; on hit → apply, hit=true, add recovery: continue until t=0.8. During t .42–.8: decelerate vx *= 0.85. At t>0.8 → idle. Also spawn dust trail during dash. ``` Beam sound: create oscillator with gain; store in f.beamSound; stop on end. Wrap in try. Melee hit check timing: inside update after t advancement: if attack && t in active window && !hit → compute box, test. applyHit(att, def, {dmg, kb, up, heavy, blockable=true}): ``` if(def.state==='ko') return blocked = def.state==='block' && def.facing===-att.facing && def grounded... facing check: def faces attacker: (att.x - def.x)*def.facing > 0 if blocked: dmg*=0.15... def.vx = att.facing*kb*0.4; blue sparks at contact point; sound 'block'; def.ki+=3 else: def.hp = max(0, def.hp-dmg); def.state='hurt'; def.hurtT = heavy?0.45:0.3; def.vx=att.facing*kb; def.vy = up||0 (if up → airborne); def.flashT=0.12; att.ki=min(100,att.ki+7); def.ki=min(100,def.ki+5); combo: att.combo++; att.comboT=1.3; if combo>=2 show combo text particle at def pos particles: sparks; damage number faNum(round dmg) hitStop( heavy?0.09:0.05 ); shake(heavy?10:5); sound heavy?'heavy':'hit' if def.hp<=0 → doKO(att,def) ``` doKO: def.state='ko'; def.vy=-520; def.vx=att.facing*420; big shake; white screen flash; slow? set phase to 'koWait' with timer 1.6 then endRound(att). Also stop any beams. Round timer only during 'fight'. Combo display: also DOM element near player side showing "کمبو ×۳" pulsing. Use particle text in Canvas instead (simpler): draw text "×۳ کمبو" floating. Hmm Persian combo text on Canvas: ctx.font with Lalezar, ctx.fillText works with RTL — Canvas text supports shaping via browser. Direction: set ctx.direction='rtl' for safety on mixed strings; simple Persian-only strings fine. AI controller: ``` function aiUpdate(f, opp, dt, skill){ const m=f.ai; m.t-=dt; m.blockT-=dt; m.atkCd-=dt; const inp={left:0,right:0,down:0,upE:0,light:0,heavy:0,special:0,charge:0}; if(f.state==='hurt'||f.state==='ko'||phase!=='fight') return inp; const dist=Math.abs(opp.x-f.x), dir = opp.x>f.x?1:-1; // guard incoming projectile const proj = projectiles.find(p=>p.owner!==f && Math.abs(p.x-f.x)<220 && Math.sign(f.x-p.x)===Math.sign(p.vx)); if(proj && m.blockT<=0 && Math.random()0){ m.modeT-=dt; apply mode } else if(m.t<=0){ choose new mode based on dist/skill; m.t=0.12+Math.random()*0.25 } apply mode: approach → inp[dir]; attackL/H if dist<110 && atkCd<=0 → edge press + atkCd=0.4+...; charge → inp.charge; special → inp.special; retreat; jumpin: upE once + approach. // opportunistic special if(f.ki>=cost && dist in appropriate range && Math.random()340): f.char==='goku'&&ki>=15&&r<0.35→'shoot' (approach briefly then heavy) hmm; pick: 0.5 approach, 0.15 jumpin, goku 0.2 'blast', 0.15 charge else if(dist>120): 0.6 approach, 0.2 retreat? no—mostly approach, 0.1 jumpin, saita 0.15 'dashsp'? Saitama special is dash — good at mid range; goku kamehameha at long range. else: 0.45 attackL, 0.25 attackH, 0.15 block, 0.15 retreat Also override: if opp.state==='attack' && dist<140 && rand=cost: goku & dist>240 & r1.6 → endRound(winner). endRound: score++, if wins==2 → phase='matchend', show result overlay; else phase='roundend' announce "برنده راند: X" → after 2.2s startRound(round+1). Timer expiry: endRound directly with "وقت تمام شد!" announce then winner by hp. Result screen content: big "پیروزی 🏆" or "شکست 💥" based on player win; sub: "گوکو با نتیجه ۲ بر ۱ ..." faNum for scores. Buttons: rematch (same char), character select, title? Two buttons enough. OK let's code it up. Write clean sections with comments. Need to double-check all function refs exist. Let me draft the main code in my head as I write. Also remember: lang="fa" dir="rtl". CSS plan: ```css :root{ --orange:#ff7a1c; --yellow:#ffd23f; --cyan:#5ad7ff; --red:#ff4747; --bg:#0b0e1a; } body: margin 0, background: #080a12 with radial glows via body::before/::after (orange right, yellow left), font Vazirmatn, color #eee, min-height 100vh, display grid place-items center, overflow hidden? allow. Add animated motes: body background with a fixed .bg-motes div containing a few spans animating upward. Cheap. #stage: position relative; width min(96vw, calc(92vh*16/9)); aspect-ratio 16/9. canvas: width100%, height100%, display block; border-radius 14px; border:3px solid #2a2f45; box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.6), 0 0 80px rgba(255,122,28,.15), 0 0 80px rgba(90,215,255,.12). Overlays: position absolute inset 0, display flex center; hidden class → opacity 0 pointer-events none, transition. ``` HUD: absolute top, padding 10px 14px; grid: [player block][timer center][enemy block]. In RTL the first element (player) goes right. Each side block: name row + hp bar + ki bar + pips. Bars with clip-path polygon skew; mirrored per side via scaleX(-1)? Keep simple: player bar fills from right (RTL width auto-anchors right? Width% anchor in RTL: element aligned inline-start = right, in RTL. Fill div width% → anchored right. Good for player side. For enemy side want fill anchored left → set direction ltr on that container. Set .side.enemy{direction:ltr} and reorder internal text to RTL. Manageable. Health bar container: height 22px, skewX(-14deg)? For mirrored sides skew opposite: player skew(14deg)? Visual: classic angled bars slanting toward center. Player (right side): skewX(12deg); enemy: skewX(-12deg). Inner fill same skew (inherited). Border 2px #111 + inner glow. Fill: linear-gradient(#ffe95e,#ff9d1f); low → (#ff7b7b,#d92626) + pulse animation. Ki bar: height 9px cyan/char-colored fill. Timer: big Lalezar 44px, boxed with angled border; <=10 add red pulse. Combo popup: absolute per side "کمبو ×N" flashing — do via Canvas particle; skip DOM. Announce: absolute center; font Lalezar; font-size clamp(40px, 8vw, 96px); text-shadow layered; transform-origin center; .show animation: slam: scale(3)→1 with blur; class 'gold' color var(--yellow) glow, 'red'. Controls bar bottom: small chips row; absolute bottom 8px center; bg rgba(10,12,20,.55); border-radius 999px; font 12px; kbd styling. Title screen: - Center column; kicker "نبرد افسانه‌ای" small wide-tracked (letter-spacing works for Persian? letter-spacing on Arabic-script is bad — avoid; use size/color instead). - Title: three spans: "گوکو" (orange, Lalezar huge), "VS" styled box (skew, dark w/ cyan), "سایتاما" (yellow). Below: sub line. - Start button big. - Controls hint. - Small credit line. Select screen: - Heading "قهرمانت را انتخاب کن" - Row of cards (flex, gap). Each card: Canvas portrait 180x200, name, epithet, stat bars (3 rows label + bar), signature move row, hover: translateY(-6px) scale, aura box-shadow char color; .picked outline. - Difficulty segment. - Legend at bottom. Result: - Big word, name, score, buttons. Pause: - "توقف" + ادامه / خروج به انتخاب. Now let's write JS. Carefully; long. Let me write the final code directly and double-check references. Constants: ```js const W=960,H=540,GROUND=470,GRAV=2300; ``` Game object: ```js const G={phase:'title', round:1, scores:[0,0], time:60, introT:0, endT:0, koT:0, hitStop:0, shake:0, shakeX:0, shakeY:0, flash:0, winner:null, roundWinner:null, paused:false, skill:'normal', playerChar:'goku', enemyChar:'saita', timeAccum... }; ``` Fighters P (player) and E (enemy) — create placeholders for menus: ```js let P=makeFighter('goku', W*0.72, -1); let E=makeFighter('saita', W*0.28, 1); ``` Menu uses these. startMatch(playerChar): G.playerChar=c; enemy = other. P=makeFighter(c, W*0.72,-1); E=makeFighter(other, W*0.28,1); scores reset; round=1; startRound(); startRound(): resetFighters(positions, hp full, ki=30? ki=40 to allow specials soon), projectiles=[], particles=[], G.time=60, phase='intro', introT=0, flags. resetRound(f,x,facing): f.hp=f.hpMax; f.x=x; f.y=GROUND; vx=vy=0; state idle; attack null; special null; beam null; combo=0. Input handling: ```js const keys=new Set(), pressedSet=new Set(); window.addEventListener('keydown',e=>{ if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space'].includes(e.code)) e.preventDefault(); if(e.repeat) return; keys.add(e.code); pressedSet.add(e.code); AudioSys.init(); handleMenuKeys(e.code); }); keyup → keys.delete. function kd(...cs){return cs.some(c=>keys.has(c))} function kp(...cs){return cs.some(c=>pressedSet.has(c))} ``` handleMenuKeys: title: Enter/Space start → select. select: none (mouse). result: Enter rematch. pause: Esc to resume. Fight: Esc toggles pause. Also click on Canvas anywhere in title → go select? Button is enough. Main loop: ```js let last=performance.now(); function loop(now){ const dt=Math.min(0.033,(now-last)/1000); last=now; update(dt); render(now/1000); requestAnimationFrame(loop);} ``` update(dt): ```js // real-time decays if(G.flash>0) G.flash-=dt*2.5; if(G.shake>0){G.shake-=dt*30; } compute shakeX/Y each render from shake & random. if(G.paused) return; if(G.hitStop>0){G.hitStop-=dt; return;} // freeze world tickParticles(dt); // allow particles during hitstop? freeze for punch. Place after hitstop return → freeze. But menu aura needs to always tick. Move particle tick below but menus have no hitstop. OK place after. switch(G.phase){ title/select: idle fighters anim: P.animT+=dt; E.animT+=dt; spawn aura occasionally; clouds update. intro: introT+=dt; at .1 announce راند (once); at 1.15 announce مبارزه!; at 1.9 → phase='fight'; fighters idle anim only. fight: updateTime; updateFight(P, playerInput(), dt); updateFight(E, aiInput(E,P,dt), dt); separate(); projectiles(dt); beams(dt); particles(dt); timer-=dt; if timer<=0 → timeUp(); ko: keep physics updating for both fighters (loser flies, winner idle) with zero input; koT+=dt; at 1.7 endRound(winner) roundend: endT+=dt; anim only; at 2.0 → round++, startRound() matchend: do nothing (overlay shown) } pressedSet.clear() at end of frame. ``` Also in fight check KO: applyHit triggers doKO sets phase='ko'. Beam updates in fight phase only (clear on round reset). updateFight(f, inp, dt, opp): Need opp reference — pass opponent. ```js function updateFight(f, inp, dt){ const opp = f===P?E:P; if phase title/select → skip f.animT+=dt; f.flashT=max(0,f.flashT-dt); f.comboT-=dt; if comboT<=0 combo=0; if(f.state==='ko'){ physics(f,dt); return; } // facing if(!f.special) f.facing = opp.x>=f.x?1:-1; // hurt if(f.state==='hurt'){ f.hurtT-=dt; physics; if(hurtT<=0&&grounded) state='idle'; return-ish } Actually integrate: big switch. ``` Let's structure updateFight: ```js const st=STATS[f.char]; const grounded=f.y>=GROUND-0.5; // state timers if(f.state==='attack'){ f.attack.t+=dt; const a=f.attack; // move forward slightly? keep drift if(f.char==='goku'&&a.kind==='heavy'&&!a.spawned&&a.t>=0.2){a.spawned=true; spawnProjectile(f);} if(a.kind!=='heavy-goku'... melee check: if(!a.hit && a.t>=a.from && a.t<=a.to){ const box=meleeBox(f,a.reach); if(overlap(box,bodyBox(opp))) {a.hit=true; applyHit(f,opp,a);} } if(a.t>=a.dur){f.state='idle';f.attack=null;} } else if(f.state==='special'){ updateSpecial(f,dt,opp); } else if(f.state==='hurt'){ f.hurtT-=dt; if(f.hurtT<=0&&grounded){f.state='idle';} } else { // idle/walk/block/charge/jump-aircontrol if(f.state==='charge'){ f.ki=Math.min(100,f.ki+26*dt); aura particles; if(!inp.charge||!grounded){f.state='idle';} } else if(f.state==='block'){ if(!inp.down||!grounded) f.state='idle'; } const canAct = grounded && (f.state==='idle'||f.state==='walk'||f.state==='block'||f.state==='charge'); if(canAct){ if(inp.light){startAttack(f,'light');} else if(inp.heavy){startAttack(f,'heavy');} else if(inp.special){startSpecial(f);} else if(inp.down){ f.state='block'; f.vx=0; } else if(inp.charge){ f.state='charge'; f.vx=0; } else if(inp.up){ f.vy=-st.jump; f.state='jump'; dust; sound jump; } } // movement const move=(inp.right?1:0)-(inp.left?1:0); if(f.state==='idle'||f.state==='walk'||f.state==='jump'){ if(move!==0){ f.vx=move*st.speed; if(grounded) f.state='walk'; } else { f.vx=0; if(grounded&&f.state==='walk') f.state='idle'; } if(move===0&&grounded&&f.state==='idle') f.vx=0; } // air attacks? allow light in air? skip. } // friction during attack/hurt if(f.state==='attack'||f.state==='hurt'||f.state==='ko'){ f.vx*= (grounded? 0.86:0.99); } // decay per frame — frame dependent but fine at ~60fps; better: f.vx *= Math.pow(0.0001,dt)? Use exponential: f.vx *= Math.exp(-6*dt) for attack/hurt grounded. physics(f,dt): vy+=GRAV*dt (if airborne? even on ground keep y=GROUND), x+=vx*dt, y+=vy*dt; clamp x [50,W-50]; if y>GROUND: y=GROUND; if vy>0: landing dust if was falling fast; vy=0; if state==='jump' → 'idle'. // aura particles for SSJ/charge ``` Note: jump state exists; landing handled in physics → idle. Also allow block only grounded. startAttack: ```js function startAttack(f,kind){ const st=STATS[f.char]; let a; if(kind==='light') a={kind, t:0, dur: f.char==='goku'?0.26:0.3, from:0.07, to:0.16, reach:78, dmg:st.lightDmg, kb:190, heavy:false}; else { // heavy if(f.char==='goku') a={kind, t:0, dur:0.5, from:9,to:9, reach:0, dmg:0, spawned:false}; // projectile else a={kind, t:0, dur:0.46, from:0.14, to:0.26, reach:95, dmg:st.heavyDmg, kb:420, heavy:true, up:-260}; } f.attack=a; f.state='attack'; sound 'swing' } ``` Light jab dmg 7 vs saita 9. startSpecial with insufficient ki → feedback: kiFail sound + small gray text particle "کی کافی نیست!". updateSpecial: ```js function updateSpecial(f,dt,opp){ const s=f.special; s.t+=dt; if(s.kind==='kame'){ if(s.t<0.55){ // charge: gather particles at hand pulled in if(Math.random()<0.6) particles.push(gather particle toward hand) charge sound occasionally } else if(!f.beam){ f.beam={t:0,len:0}; beam sound start; } if(f.beam){ f.beam.t+=dt; f.beam.len=Math.min(760, f.beam.len+3800*dt); // damage const bx=beamBox(f); if(overlap(bx, bodyBox(opp))) beamHit(f,opp,dt); if(s.t>1.5){ f.beam.dying=true } if(s.t>1.7){ end: f.beam=null; f.special=null; f.state='idle'; stop beam sound } } } else if(s.kind==='spunch'){ if(s.t<0.42){ f.vx=f.facing*1000; if grounded spawn dust; fist box active: if(!s.hit){ box=meleeBox(f,120); if overlap → s.hit=true; applyHit custom big: dmg 32 kb 700 up -420 heavy, extra shake 18, flash 0.5, hitstop 0.13 } } else f.vx*=Math.exp(-4*dt); if(s.t>0.85){f.special=null;f.state='idle';} } } ``` beamHit(f,opp,dt): if opp guarding & facing: opp.hp -= 8*dt… small pushback; else opp.hp -= 34*dt; opp state hurt continuous? Set opp.state='hurt', hurtT=0.2 each tick; push opp.vx = f.facing*240; sparks at contact point; if hp<=0 doKO. Throttle sound (sound exists already). Small hitStop too? no. Prevent opp stuck in hurt loop — okay. Beambox: ```js function beamBox(f){ const len=f.beam?f.beam.len:0; const x0=f.x+f.facing*45; const x1=x0+f.facing*len; return {x:Math.min(x0,x1), y:f.y-100, w:Math.abs(x1-x0), h:44}; } ``` y centered around -78: y=f.y-100, h=44 → covers -100..-56. ok. Meleebox: ```js function meleeBox(f,reach){ return {x: f.facing>0? f.x+12 : f.x-12-reach, y:f.y-105, w:reach, h:70}; } ``` bodyBox(f): {x:f.x-24,y:f.y-118,w:48,h:118} overlap(a,b): a.xb.x && a.yb.y applyHit(f,opp,a): ```js let dmg=a.dmg; const facingAtt = (f.x-opp.x)*opp.facing>0? wait, opponent must face attacker: attacker f at some side: direction from opp to attacker: dirToAtt = Math.sign(f.x-opp.x); facing = opp.facing===dirToAtt. const blocked = opp.state==='block' && opp.facing===Math.sign(f.x-opp.x||1); if(blocked){ dmg=Math.max(1,Math.round(dmg*0.15)); opp.vx=Math.sign(f.x>opp.x?1:-1)*a.kb*0.35... wait, knockback direction: away from attacker = sign(opp.x-f.x). Use dirAway=Math.sign(opp.x-f.x)||1. opp.vx=dirAway*a.kb*0.3; cyan sparks; sound block; } else { opp.vx=dirAway*a.kb; if(a.up){opp.vy=a.up; } opp.state='hurt'; opp.hurtT=a.heavy?0.5:0.32; } opp.hp-=dmg; opp.flashT=blocked?0:0.12; f.ki=min(100,f.ki+(blocked?3:7)); opp.ki=min(100,opp.ki+4); particles sparks at contact point; damage text faNum(dmg) if(!blocked){ f.combo++; f.comboT=1.4; if(f.combo>=2) combo text; hitstop a.heavy?0.09:0.045; shake add; sound } if(opp.hp<=0){opp.hp=0; doKO(f,opp);} ``` doKO(att,def): if(G.phase!=='fight') return; G.phase='ko'; G.koT=0; G.roundWinner=att; def.state='ko'; def.vy=-520; def.vx=dirAway*430; clear beams/projectiles? Keep projectiles but owner check ok; stop beam sound if any; announce('ضربه فنی!','red'); big shake; flash 0.8; sound 'ko'; hitStop 0.2. endRound(): ```js const w=G.roundWinner; if(w){ (w===P?G.scores[0]++:G.scores[1]++) } update pips. if(G.scores[0]>=2||G.scores[1]>=2){ G.phase='matchend'; showResult(); } else { G.phase='roundend'; G.endT=0; announce('برنده راند: '+name(w),'gold'); } ``` roundend→ after 2.1s: G.round++; startRound(). timeUp(): winner = hp compare; if equal → announce 'مساوی!' then re-play round without score: handle: G.roundWinner=null; go through endRound without score increment; if both >=2 impossible. ok. showResult(): fill DOM: title win/lose, name, score faNum(s0)+' - '+faNum(s1) (in RTL display player first right). Buttons wired once. Projectile update: ```js for p: p.x+=p.vx*dt; p.life-=dt; trail particles; if overlap with opponent body → applyHit simplified: applyHit with fake attack object {dmg:p.dmg,kb:320,heavy:false}; explode; remove. If owner is... only one kind. Also remove if x<-50||x>W+50||life<=0. ``` Store p.owner reference. Separation between fighters: ```js const overlapX = 48 - Math.abs(P.x-E.x); if(overlapX>0 && Math.abs(P.y-E.y)<100){ push each apart by overlapX/2 (respect walls) } ``` Particle system: ```js const parts=[]; function addP(o){ if(parts.length<400) parts.push(o) } Update: p.t+=dt; x+=vx*dt; vy+=p.grav? ...; remove if t>p.life Types drawn: spark (line streak), orb (glow circle), ring (expanding circle stroke), text (rising), auraflame. ``` Implement draw switch. Damage text: {type:'text', txt:'۱۲', color:'#fff', x,y, vy:-60, life:0.8, size:22} Combo text: {type:'text', txt:'کمبو ×'+faNum(n), color:'#ffd23f', size:26, life:1} Clouds: array of {x,y,scale,speed} drift leftward and wrap. Ambient motes: spawn randomly. Render: ```js function render(t){ // shake offsets let sx=0,sy=0; if(G.shake>0){ sx=(Math.random()*2-1)*G.shake; sy=(Math.random()*2-1)*G.shake*0.7; } ctx.save(); ctx.translate(sx,sy); drawSky(t); drawClouds(t); drawMountains(t); drawGround(t); // shadows drawShadow(P); drawShadow(E); // fighters: draw enemy first then player drawFighter(E,t); drawFighter(P,t); drawProjectiles(t); drawBeam(P,t); drawBeam(E,t); drawParticles(); // foreground rocks? maybe some small silhouette at bottom corners ctx.restore(); // flash overlay if(G.flash>0){ctx.fillStyle=`rgba(255,255,255,${Math.min(0.9,G.flash)})`;ctx.fillRect(0,0,W,H);} // vignette static } ``` Shake decay in update real-time: G.shake=Math.max(0,G.shake-dt*40). addShake(m){G.shake=Math.min(26,G.shake+m)}. drawSky: gradient top #1a2a6c? Let's go dusk arena: top #2b1a4d? Dragon Ball canyon feel warm: top '#3a1f5d'? Let's do: gradient: 0:'#241a4a' (dusk purple) 0.55:'#7a2d5e' 0.8:'#e0653a' 1:'#ffb347' warm horizon. Big sun circle near horizon behind mountains (#ffd77a glow). Stars up top (small dots, twinkle). This warm dusk palette fits the battle vibe. Mountains: two-layer silhouettes: far '#4a2450', near '#33182f' rocky spikes (triangles) pre-computed array. Ground: from GROUND to H: dark gradient '#2a1626'→'#160b14'; top edge highlight line '#ff9d5c33'; cracks: precomputed random polylines '#00000055'. Also small stones. Clouds: fluffy round blobs '#ffffff22' drifting. drawFighter specifics — write per character: Common skeleton helper: ```js function limbDraw(x1,y1,x2,y2,w,col){ctx.strokeStyle=col;ctx.lineWidth=w;ctx.lineCap='round';ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();} ``` drawFighter(f,t): ```js const st=STATS[f.char]; // Shadow separately ctx.save(); ctx.translate(f.x,f.y); // ko rotate: if ko, rotate to fall backward: angle = min(1, koProgress)*... simpler: draw laying: rotate -90*facing? Use ctx.rotate(f.koAng). Track f.koAng increasing in ko state toward 90deg backward. ctx.scale(f.facing,1); // state pose offsets let bob=Math.sin(f.animT*3.2)*2.5; if(f.state==='walk') bob=Math.sin(f.animT*11)*2; ... if(f.char==='goku') drawGoku(f,t,bob); else drawSaita(f,t,bob); ctx.restore(); ``` KO laying: rotate around feet: ctx.rotate((f.facing===1?1:1)*koAng)? Since we've scaled, backward is -x; rotate positive z rotates x toward y (down) → tips forward. We want to fall backward: rotate negative. Set koAng grows to -1.4 rad. Add koAng update in updateFight when ko: f.koAng approaches -1.35. Apply after scale? Rotation under scale mirrors correctly: rotate(koAng) under scale(facing) will mirror too. Good. DrawGoku(f): ```js const ssj = f.hp < f.hpMax*0.35 || f.special|| (f.state==='charge'&&f.ki>70); // mostly when low hp Colors: skin '#f6c894', giA '#ff8c1a', giB '#e56b00', blue '#2b5bd7', hair = ssj? '#ffd94a':'#1b1b22', boots/gloves blue. Pose: let lean=0, armF={x:30,y:-70}, armB={x:-16,y:-66}, legF={x:14,y:0}, legB={x:-14,y:0}; walk: legF.x=14+sin(a*11)*14; legB opposite; arms swing. punch: armF.x=70 (extend during active, else 40), lean 0.1 heavy goku: both hands forward slightly up, projectile on spawn. block: arms crossed: armF={x:18,y:-88}, armB={x:16,y:-70} charge: arms down outward: {x:24,y:-40},{x:-24,y:-40}, slight crouch (y offset +6) hurt: lean -0.25, arms flail kame charge: hands at side: {x:-18,y:-52} both kame fire: both arms forward {x:52,y:-80} jump: legs tuck. Draw order: back arm, back leg, torso, front leg, head/hair, front arm. Legs: hip(0,-46) to knee, then foot; simplified single limb hip→foot slightly curved: use quadratic? Or straight limb with width 13 pants color + boots: draw small blue circle/rect at foot. Torso: rounded rect -18..18 x, -92..-44, orange with gi, blue belt band at -52..-46, collar: blue inner V: small triangle at top center. Arms: shoulder (±14,-84) to hand pos, skin stroke w 11; sleeve: short orange segment from shoulder w 13 length 14; wristband blue circle w at hand. Head at (2,-104) r 15 skin; hair spikes: polygon: spikes defined by array angles from -200°..60°? Precompute GOKU_SPIKES = [[ang,len]...] draw path around center (2,-110) with radius base 13: points alternate outer/inner. Then front small bangs triangles. Eyes: small white + dark pupil at (8,-106); brows. SSJ: hair gold, glow shadowBlur gold; also lightning occasionally: draw 2 jagged lines near body, random. Aura (when ssj or charge or special): drawAura('#ffd94a', intensity). ``` DrawSaita(f): ```js Colors: suit '#ffd23f' shade '#e0a800', glove '#e23b3b', cape '#f5f2ea', head skin '#ffd9a0'. Same pose machine; heavy = big overhead? Straight punch with armF extend 80 thick. special spunch: armF extend 100 with fist r 20 red; forward lean 0.2; speed lines. Cape: from shoulder (-10,-88) back: bezier to (-38 - wave, -30) etc; fill. Head: circle r16 (0,-104); shine: white arc highlight; ears? skip; face: eye at (7,-106) small dot; mouth line (4,-96); serious mode (special): draw angry brows + clenched mouth, head slight red? Classic deadpan. ``` drawAura(f,color,power): behind fighter: flame shapes: ```js for i in 0..2: ctx.beginPath(); wob = sin(t*22+i*2)*4; oval-ish path from (-26,0) to (0,-130-power*20) to (26,0) with quadratic; fill with gradient alpha 0.12-0.2 color. ``` Simpler: radial gradient oval at (0,-55), radius 60+power*30, flicker scale. Use ctx.globalAlpha. Also emit aura particles from update for ssj: every few frames addP orb rising. Beam draw: ```js function drawBeam(f,t){ if(!f.beam) return; const b=f.beam; const x0=f.x+f.facing*42, y=f.y-80; const len=b.len*(b.dying? max(0,1-(b.t... manage)) ... Actually manage dying by shrinking len in update: if dying, len-=3000*dt until 0 then null. Layers: outer glow: lineWidth 46 stroke 'rgba(90,200,255,.35)' line from x0 to x0+facing*len, lineCap round; middle 30 'rgba(120,220,255,.8)'; core 14 '#eaffff'; also wobble: draw as slight sine path. Add muzzle ball circle r 22+flicker at x0. Add tip sparks spawned in update. shadowBlur for glow. } ``` Projectile draw: circle radial gradient white→color; trail via particle spawn. Portrait draw for cards: ```js function drawPortrait(cv,char,t){ const c=cv.getContext('2d'); clear; scale to show bust: translate(w/2, h*0.92); scale(1.6); draw fake fighter head + shoulders: easiest: create temp fighter obj {char, state:'idle', animT:t, facing:1, hp:100,hpMax:100,...} and call drawGoku/drawSaita directly (they use local coords around feet at 0,0) — draw full body but Canvas will crop top? We want bust: position so head/torso visible: translate(w/2, h+40) scale(1.5) → head at local y=-104*1.5=-156 → h+40-156 = 240+40-156 ≈ 124 (if h=240)... Let's do: translate(w/2, h*1.35), scale(1.55): head y ≈ 1.35h -161 ≈ 324-161=163 for h=240 → visible mid. Feet offscreen below. Fine — draw whole figure, top part visible. Add aura behind. Also facing -1? Facing right (facing 1), though RTL... portraits either way fine; keep facing 1, or for mirror symmetry: goku faces left? Both facing 1. } ``` drawGoku needs ctx — pass ctx as param. Restructure: drawCharBody(ctx, f, t) with ctx param so we can draw portraits to another context. Main render: drawCharBody(ctx,...). Portrait: drawCharBody(pctx,...). Note that drawCharBody assumes current transform includes translate/scale — we do transform in drawFighter, and portrait wrapper does its own transform. Also flash filter: apply in drawFighter before calling body. SSJ in portrait: fake hp full → not ssj. ok. Aura in portrait: draw radial gradient behind. Portrait Canvases rendered each frame while select shown, in main render loop (light: 2 small canvases). HUD DOM update each frame (cheap property sets). Announce impl: ```js const annEl=..., annTimer; function announce(txt, cls='', hold=1.1){ annEl.textContent=txt; annEl.className='show '+cls; void annEl.offsetWidth; // restart anim? Setting class same… force restart: remove, reflow, add. clearTimeout(annTimer); annTimer=setTimeout(()=>annEl.className='', hold*1000); } ``` CSS .show animation: slam 0.45s cubic + fade handled by timeout? On class remove → immediate disappear. Add CSS transition opacity on base .announce {opacity:0}. .show{opacity:1; animation: slam...}. Class removed → opacity transitions to 0 quickly (transition .3s). Good. Round intro sequence uses timeout chain stored to clear on restart — use phaseTimer in update loop instead of setTimeout — deterministic. Phase: 'intro' with introT: 0–1.1 "راند N", 1.1–1.9 "مبارزه!" then phase='fight'. Announce triggers at boundary via flags. Round end: phase 'roundend', endT counting, announce winner text once; when done → next round intro or matchend. KO: phase 'ko' similar, announce "ضربه فنی!" / "K.O.". Let's unify: on hp<=0 → phase='ko', koT=0, announce('ضربه فنی!'). During ko: continue physics (loser flies). At koT>1.6 → endRound(winner). endRound: score++, if wins==2 → phase='matchend', show result overlay; else phase='roundend' announce "برنده راند: X" → after 2.2s startRound(round+1). Timer expiry: endRound directly with "وقت تمام شد!" announce then winner by hp. Result screen content: big "پیروزی 🏆" or "شکست 💥" based on player win; sub: "گوکو با نتیجه ۲ بر ۱ ..." faNum for scores. Buttons: rematch (same char), character select, title? Two buttons enough. Audio design (WebAudio): ```js const AC={ctx:null,on:true}; function audioInit(){ if(!AC.ctx){ try{AC.ctx=new (AudioContext||webkitAudioContext)()}catch(e){}} if(AC.ctx&&AC.ctx.state==='suspended')AC.ctx.resume(); } function tone(f0,f1,dur,type='square',vol=0.15,delay=0){ if(!AC.ctx||!AC.on)return; const t0=AC.ctx.currentTime+delay; const o=AC.ctx.createOscillator(),g=AC.ctx.createGain(); o.type=type; o.frequency.setValueAtTime(f0,t0); o.frequency.exponentialRampToValueAtTime(Math.max(30,f1),t0+dur); g.gain.setValueAtTime(vol,t0); g.gain.exponentialRampToValueAtTime(0.0001,t0+dur); o.connect(g).connect(AC.ctx.destination); o.start(t0);o.stop(t0+dur+.02);} function noise(dur,vol,fq=800){ white noise buffer through bandpass } SFX = { hit(){tone(220,90,.12,'square',.18); noise(.08,.12)}, heavy(){tone(140,50,.2,'sawtooth',.22); noise(.15,.18)}, block(){tone(600,300,.08,'triangle',.12)}, swing(){noise(.06,.05,2000)}, jump(){tone(200,420,.15,'sine',.1)}, charge(){tone(160,520,.4,'sine',.08)}, ki(){tone(500,180,.2,'sawtooth',.12)}, ko(){tone(90,30,.6,'sawtooth',.3); noise(.4,.25)}, select(){tone(520,760,.12,'triangle',.15)}, round(){tone(330,330,.15,'square',.15); tone(440,440,.15,'square',.15,.15)}, beamStart/beamStop: persistent oscillator: save node. } ``` Beam sound: ```js let beamNode=null; function beamStart(){ if(!AC.ctx||!AC.on)return; beamStop(); o=saw 90→? plus lfo? keep: osc saw 70 with gain .12 + second sine 1200 shimmer; save {o,g,o2,g2}; ramp freq 60→90. } function beamStop(){ if(beamNode){ stop & disconnect; beamNode=null } } ``` Simplify with single osc + gain; stop at round reset too. Mute toggle button toggles AC.on; if muting, stop beam. Now let's write the HTML overlays text (Persian): Title: - Kicker: "نبرد افسانه‌ای ژاپنی" hmm: "مصاف دو افسانه" - Title: گوکو | VS | سایتاما - Sub: "سایان بی‌مرز در برابر قهرمان تک‌ضربه؛ کی، مشت، و انفجار انرژی!" - Start: "شروع نبرد" - Hint chips: "حرکت: جهت‌نما", "Z/X/C: حملات", "V: شارژ انرژی" Select: - h2: "قهرمانت را انتخاب کن" - Card Goku: name گوکو, epithet "جنگجوی سایان • شاگرد کایو", stats: قدرت 88? show bars: قدرت/سرعت/تکنیک. Signature: "موج کامه‌هامه‌ها" - Card Saitama: سایتاما, "قهرمان کچل برای تفریح", قدرت 100 سرعت 70?, signature "مشت جدی" - Difficulty: سختی حریف: مبتدی/جنگجو/افسانه‌ای - Note: with chosen character, fight against the other one with AI. Battle HUD names: use chosen char names; tag "شما"/"هوش مصنوعی". Result: victory "پیروزی شد!" defeat "شکست خوردی!" sub line "گوکو ۲ – ۱ سایتاما برنده میدان شد", buttons "نبرد دوباره", "انتخاب دوباره". Pause: "مکث" buttons "ادامه", "تغییر قهرمان". Bottom controls bar during battle: chips: "← → حرکت" "↑ پرش" "↓ دفاع" "Z سریع" "X قدرتی" "C ویژه" "V شارژ" "Esc مکث". Font sizes strong contrast. Buttons with skewed chunky style. Edge considerations for correctness: - Reset pressedSet each frame after update — but handleMenuKeys runs on keydown event (outside loop) so fine. - Timer display uses Math.ceil. - Ensure no NaN: beam len etc. - Portrait loop: only draw portraits when select screen visible (check via classList / G.phase==='select'). - rAF runs always. AI input also needs edge presses: since ai decides actions as one-shot, set inp.light=1 only on the decision frame. Implement decision inside aiInput: on mode select → set m.action='light' flag; build inp: if m.action → inp.light=1; m.action=null. Good. Also AI should not act during intro — gate aiInput on phase==='fight'. Player input also gated: updateFight is called only in fight phase (plus ko physics). During intro fighters idle anim: handle in phase intro update: P.animT+=dt etc. Charge input: hold V → state charge; ki builds; release → idle. AI also. One more mechanic for richness: Goku's dash? skip. Fine. Special availability UI: when ki=cost. Implement: span.readyP/E toggle class. Round pips: 2 per side; update via class. Now double-check beam vs guard too: blocked beam reduces damage and no pushback? Keep pushback small. Serious Punch on guard: guard-break! dmg*0.5 & big pushback — Saitama's signature. Implement: in applyHit if a.guardBreak && blocked → dmg*0.5, opp stays block but slides; add note. OK now let's write final code. Careful with syntax. JS is large but we go through. Also include small "VS flash" transition on battle start? announce covers. Additional juiciness: hitstop, screen flash, speed lines during serious punch (draw white streaks over screen when spunch active). Add: if any fighter in spunch dash → draw radial speed lines overlay. Low HP heartbeat vignette? skip. Ambient dust motes: spawn drifting particles occasionally upward. Cloud array init; mountain spikes init; crack init. Let's write all concretely. Precomputed scenery: ```js const stars=[...Array(60)].map(()=>({x:Math.random()*W,y:Math.random()*H*0.45,r:Math.random()*1.4+0.4, tw:Math.random()*6})); const clouds=[...Array(7)].map((_,i)=>({x:Math.random()*W,y:40+Math.random()*140,s:0.6+Math.random()*1.2,v:6+Math.random()*12})); const farSpikes=makeSpikes(9, 120, 210); // {x,h} function makeSpikes(n,hmin,hmax){const a=[];let x=-30;for(i...){const w=60+Math.random()*90; a.push({x,w,h:hmin+Math.random()*(hmax-hmin)}); x+=w*0.8;} return a;} const nearSpikes=makeSpikes(7,70,130); const cracks=[...Array(8)].map(...polyline points on ground) ``` Mountain draw: fill path: start at (0, GROUND) up to spike apex triangle chain… simpler: for each spike draw triangle from base y=GROUND to apex. Color far '#3d1e4e' near '#2a1233'. Draw far before sun? Sun behind far. Order: sky→stars→sun→far clouds→far spikes→near spikes→ground. Sun: x=W*0.5? Place x=170,y=210 r=70 '#ffcf6e' with glow + slight pulse. Behind mountains partially. Ground details: base rect GROUND..H '#241226'→'#120812'; top edge highlight '#ff8c4a' alpha .5 line 3px; cracks darker strokes; pebbles. Also floating rings/platforms? no. Foreground dust layer after fighters. drawShadow: ellipse at (f.x, GROUND+8) rx=30*(1 - height/400 clamp .4), alpha .35. HUD DOM structure: ```html ``` RTL: .me first → shows right. .foe container direction ltr for left-anchored fills; but keep name row RTL? Just direction:ltr the entire foe side flips it. Wrap foe internals: keep text rtl with nested span direction rtl. Simpler: don't mirror enemy fill direction — in RTL, both bars drain toward… actually classic look: bars mirror (fill from outer edges to center, or from center to outer). In RTL: player bar anchored right (outer edge right) fills from right — fill div width% anchors right in RTL. Enemy side: we want anchored left → set .foe .hpbar{direction:ltr}. Fill inside inherits ltr anchoring left. Names: put .foe{direction:ltr} then .foe .namerow{direction:rtl} to keep text rtl? In a flex row direction rtl on namerow will show reversed order but okay since we define order for ltr… getting fiddly; simplest: only set direction:ltr on the .hpbar/.kibar elements inside foe side. Do that. Skew: .hpbar{transform:skewX(14deg)}? For foe: skewX(-14deg)? Player bar is on right side, want left edge slanted toward center: skewX(-14deg)? Not too critical; pick player skewX(-12deg), foe skewX(12deg) with direction ltr — looks mirror. Test mentally: skewX(-12) shifts top edge to right relative to bottom? Either way, looks mirror-ish. Fine. Timer box: diamond via rotate 45? Use clip-path polygon hexagon. Big Lalezar digits. Pips: circles; .on → filled with character color glow. Ready badge: hidden unless ki≥cost: class show. Combo shown in Canvas already. CSS animations: - @keyframes slam {0%{transform:scale(2.6);opacity:0;filter:blur(8px)}60%{transform:scale(.95);opacity:1;filter:blur(0)}100%{transform:scale(1)}} - pulse for ready & low hp. - Card hover. - Button hover shift. - Title VS pulse. - Background motes on body: .mote spans with float anim. Some absolute positioned dots (page background). Since stage occupies most, keep motes subtle around edges. Title layout: overlay covers Canvas; show Canvas behind (arena + fighters) so make overlay semi-transparent bg: rgba(8,8,16,.45) + radial darken. Title text on top. Ensure Canvas font: 'Lalezar' loaded via Google Fonts; Canvas usage: ctx.font='700 26px Lalezar, Vazirmatn'. Should work once loaded; use document.fonts.ready? Just use; fallback ok. Persian numeral function handles '×' etc too. OK — also handle window blur → auto pause during battle (nice touch): window.addEventListener('blur', if fight → pause). Let me count features and code it. Also ensure "no mistakes": double-check variable names. Let me write the script section by section: 1. Helpers & constants 2. Audio 3. Input 4. Scenery precompute 5. Fighter make/stats 6. Combat functions (box, applyHit, doKO, projectiles, beams) 7. updateFight + specials 8. AI 9. Flow (startMatch, startRound, endRound, timeUp, result, pause) 10. Particles 11. Render (scenery, fighters, beams, particles, portraits) 12. HUD sync 13. Loop 14. UI wiring (buttons) Let me write out code now… (composing carefully) Potential pitfalls to verify at the end: - All getElementById ids match HTML. - No use of undeclared vars (use const/let). - Reset beam sound on round reset: beamStop(). - Pause overlay toggling. - pressedSet cleared at end of every update call. - During matchend, fighters frozen: update only in fight/ko phases. - During 'roundend', keep drawing scene; fighters idle anim: also advance animT. - HUD updates only during battle phases. AI detail final: ```js function aiInput(f,opp,dt){ const inp={left:0,right:0,down:0,up:0,light:0,heavy:0,special:0,charge:0}; if(G.phase!=='fight'||f.state==='ko') {return inp;} const sk=SKILLS[G.skill]; const m=f.ai; m.think-=dt; m.modeT-=dt; m.cd-=dt; m.blockCd-=dt; const dist=Math.abs(opp.x-f.x); const dir=opp.x>f.x?1:-1; // reaction to attacks/projectiles if(m.blockCd<=0 && Math.random()p.owner!==f&&Math.abs(p.x-f.x)<240); if(threat){m.mode='block';m.modeT=0.45;m.blockCd=1.2;} } if(m.modeT<=0 || m.mode==='done'){ m.modeT=0.15+Math.random()*0.25; const r=Math.random(); const cost=STATS[f.char].spCost; if(f.ki>=cost && r330){ m.mode= r<0.55?'approach': r<0.7?'jumpin': r<0.85&&f.char==='goku'?'blast':'charge'; m.modeT= r<0.85?0.5:0.8;} else if(dist>120){ m.mode= r<0.7*sk.aggr?'approach': r<0.8?'jumpin':'approach'; } else { m.mode= r<0.42?'attackL': r<0.66?'attackH': r<0.8?'block':'retreat'; m.modeT=0.3; } } switch(m.mode){ case 'approach': if(dir<0)inp.left=1;else inp.right=1; break; case 'retreat': if(dir<0)inp.right=1;else inp.left=1; break; case 'jumpin': if(m.modeT>0.35&&once)... set inp.up on first frame: use m.jumped flag; if(!m.jf){inp.up=1;m.jf=true;} dir move; reset jf when mode changes. case 'block': inp.down=1; break; case 'charge': inp.charge=1; break; case 'blast': if(dist>260&&m.cd<=0){inp.heavy=1;m.cd=0.8;m.mode='approach';} else approach; break; case 'attackL': if(m.cd<=0&&dist<120){inp.light=1;m.cd=0.35+Math.random()*0.3;} else approach; break; case 'attackH': if(m.cd<=0&&dist<130){inp.heavy=1;m.cd=0.6;} else approach; break; case 'special': if(m.cd<=0){inp.special=1;m.cd=1.5;m.mode='approach';} break; } return inp; } ``` Note: inp.up should be edge — our updateFight uses inp.up directly as press (treated as edge because jump only from grounded states and sets jump; holding up would re-jump on land — acceptable? Player holding up would bunny-hop; okay for AI). Similarly for player: use keys for up (hold). Fine. Light/heavy/special edge in updateFight: they're fired only from canAct states; hold would re-fire each frame after recovery — for AI one-shot; for player holding Z → autofire jabs: acceptable (combos!). ok. Special for goku AI at close range is wasted (beam pushes them away) — gate: only if goku && dist>200, saita 100=cost && r100&&dist<420): dist>200)) special ``` SKILLS values: ``` easy:{block:.25,sp:.05,aggr:.7} normal:{block:.45,sp:.1,aggr:.85} legend:{block:.7,sp:.17,aggr:1} ``` Player fighter should also gain ki on dealing damage — handled. Passive ki gain: +4/sec during fight to both: f.ki=min(100,f.ki+4*dt) in updateFight — good pacing. Round timer 60 → G.time. Now the result overlay also shows character portraits? Text is enough. Let's write CSS classes: .screen (overlay base), .hidden. Also add a small "بازی با کیبورد" notice on title. Time to write the final artifact. Aim for clean, working code. Let me write it out fully, checking as I go. Also for Canvas text direction: set ctx.direction='rtl' globally once? For mixed short Persian strings it's fine; set on draw when using fillText: ctx.direction='rtl' is persistent on context setting. textAlign center mostly. Numbers faNum everywhere for UI. Let me write drawCharBody for Goku with poses — implement pose solver producing: handF, handB (forearm/back arm endpoints in local coords, +x forward), footF/footB, lean, crouch, headX offset. Then generic drawing with character-specific styling. Shared skeleton function with per-character draw functions to reduce complexity. Poses: ```js function pose(f){ const a=f.animT; const p={lean:0,crouch:0,handF:{x:26,y:-74},handB:{x:-20,y:-70},footF:{x:15,y:0},footB:{x:-15,y:0},headX:2,guard:true}; const bob=Math.sin(a*3.4)*2; p.bob=bob; switch(f.state){ case 'walk': const s=Math.sin(a*11); p.footF.x=15+s*16; p.footB.x=-15-s*16; p.handF.x=26-s*8; p.handB.x=-20+s*8; break; case 'jump': p.footF={x:18,y:-18}; p.footB={x:-8,y:-26}; p.handF={x:30,y:-92}; p.handB={x:-26,y:-80}; break; case 'attack': {const at=f.attack; const k=at?at.kind:'light'; if(k==='light'){const q=at.t/at.dur; const ext=q<0.3? q/0.3 : 1-(q-0.3)/0.7*0.6; p.handF={x:26+ext*52,y:-80}; p.lean=0.12*ext;} else if(k==='heavy'){ const q=at.t/at.dur; if(f.char==='goku'){p.handF={x:44,y:-84};p.handB={x:40,y:-70};p.lean=0.08;} else {const ext=q<0.35?q/0.35:1-(q-0.35)/0.65*0.5; p.handF={x:26+ext*60,y:-78}; p.lean=0.16*ext;} } break;} case 'special': if(f.special.kind==='kame'){ if(f.special.t<0.55){p.handF={x:-16,y:-56};p.handB={x:-22,y:-56};p.crouch=4;p.lean=-0.06;} else {p.handF={x:50,y:-80};p.handB={x:46,y:-76};p.lean=0.18;} } else { p.handF={x:66,y:-76}; p.lean=0.28; p.footF.x=26; p.footB.x=-26; } break; case 'block': p.handF={x:20,y:-92}; p.handB={x:16,y:-66}; p.lean=-0.05; p.crouch=3; break; case 'charge': p.handF={x:26,y:-46}; p.handB={x:-26,y:-46}; p.crouch=6; p.lean=-0.02; break; case 'hurt': p.lean=-0.3; p.handF={x:34,y:-96}; p.handB={x:-30,y:-60}; break; case 'ko': p.lean=-0.5; break; } return p; } ``` Apply bob to torso/head y: add p.bob*small to y in drawing. Then drawCharBody(ctx,f,t): ```js const p=pose(f); const g=f.char==='goku'; // aura const powered = (g && f.hp1.5 set b.dying; then b.len-=2600*dt; when len<=0 → remove & end special at s.t>1.7. Also opponent can jump over beam — yes beam height only 44px at torso level; jump avoids. Nice depth. AI rarely jumps over; fine. Kamehameha charge particles: spawn orbs converging: addP({type:'orb', x:hx+rand*80..., target...}) — simplify: spawn random ring around and shrink: give vx toward hand. Compute in particle update: if p.seek (tx,ty): velocity toward target. Implement particle fields: {type,x,y,vx,vy,g,t:0,life,size,col,seek?:{x,y},grow} seek update: p.vx += (tx-p.x)*8*dt*... just lerp position: p.x+= (p.tx-p.x)*6*dt. ok. Types draw: - 'orb': glowing circle (fill col alpha by life) - 'spark': line from pos to pos - v*0.03, stroke col - 'dust': gray circle, alpha fade, slight rise - 'ring': expanding stroke circle, size+=grow*dt - 'text': fillText col size, y+=vy*dt - 'bolt': jagged line: draw 3 segments random — generate points on creation. Damage text color: '#ffffff' stroke dark; crit heavy '#ffd23f'. OK HUD sync function: ```js function syncHUD(){ if(!inBattle) return; hpP.style.width=(P.hp/P.hpMax*100)+'%'; ... low class toggle kiP..., ready class when ki>=cost timer.textContent=faNum(Math.max(0,Math.ceil(G.time))) pips update only on change (or each frame is cheap). } ``` Pips: build once: each side 2 ; class .on if score>i. Names set on startMatch. OK result overlay content set dynamically. Pause: only during fight G.paused flag; show overlay; update skips world but render continues. Buttons: resume, quit-to-select. Also on window blur auto pause during fight. Mute button toggles AC.on; icon swap. Edge: on leaving mid-fight for select → beamStop, clear overlays. Flow funcs: ```js function showScreen(id){ ['title','select','result','pause'].forEach(s=>el(s).classList.toggle('hidden', s!==id)); } null allowed → hide all: pass ''. ``` HUD visibility separate: toggle 'hidden' class. Battle start: hide overlays, show HUD, announce handled by intro phase. startMatch(char): G.playerChar=char; G.enemyChar = char==='goku'?'saita':'goku'; P=makeFighter(char,W*0.72,-1); E=makeFighter(G.enemyChar,W*0.28,1); G.scores=[0,0]; G.round=1; names HUD; showScreen(''); hud show; startRound(); startRound(): resetFighter(P,W*0.72,-1); resetFighter(E,W*0.28,1); P.ki=E.ki=35; parts.length=0; projectiles.length=0; beamStop(); G.time=60; G.phase='intro'; G.introT=0; G.an1=G.an2=false; intro update: introT+=dt; if(!an1&&introT>0.15){an1=1;announce('راند '+faNum(G.round),'gold',0.9); SFX.round()} if(!an2&&introT>1.2){an2=1;announce('مبارزه!','red',0.7)} if(introT>1.9) phase='fight'. Wait announce hold param: display duration. Round text hold ~1.0, مبارزه 0.8. Also idle anim during intro: P.animT+=dt. ko phase: fighters continue physics with input none: updateFight called with empty input — but state machine: winner would just stand; loser in ko physics. In phase ko call updateFight(f, emptyInp, dt) — but block/charge transitions with no input are fine. Facing updates okay. Timer paused. koT>=1.7 → endRound(). But updateFight allows player input during ko? Pass empty input → no actions. Good. Also during 'roundend' same idle physics + anim. endRound(): ```js beamStop(); projectiles.length=0; const w=G.roundWinner; if(w) { if(w===P)G.scores[0]++; else G.scores[1]++; } if(G.scores[0]>=2||G.scores[1]>=2){ G.phase='matchend'; setTimeout? Show result overlay after small delay: use G.endT & phase 'matchend' update → at 0.8s show overlay once. } else { G.phase='roundend'; G.endT=0; if(w)announce(STATS[w.char].name+' برنده راند شد','gold',1.6); else announce('مساوی!','gold',1.4); } ``` matchend update: endT+=dt; at .9 show result overlay (once flag). roundend: endT+=dt; at 2.1 → G.round++, startRound(). timeUp(): G.phase='roundend'? need winner determination: ```js const w = P.hp>E.hp?P : E.hp>P.hp?E : null; G.roundWinner=w; announce('وقت تمام شد!','gold',1.2); then endRound() but with announce overlap… okay, announce replaces. Set phase='roundend' via endRound with endT… but we want small pause before pips count: endRound immediately announces round winner; acceptable. ``` Actually simpler: on timeUp → phase='ko' with koT=0.6 start? Set phase='ko', G.roundWinner=w, koT=0.9 to have 0.8s until endRound (threshold 1.7 → set threshold: koT>1.0). Keep threshold 1.2. Hmm ko phase also used for KO animation with flying body — without KO it's fine. doKO sets phase='ko', koT=0. OK AI memory init: f.ai={think:0,mode:'approach',modeT:0,cd:0,blockCd:0,jf:false}. Also AI should face: auto. One more: player charge sound loop: SFX tick every 0.35s during charge: track f.chT. Also spawn aura orbs on charge/ssj in updateFight every few frames. OK writing final. Also include small "VS flash" transition on battle start? announce covers. OK now HTML text content (Persian, punchy): Title sub: "میدان نبرد آماده است؛ موج انرژی در برابر مشت جدی. کدام افسانه زنده می‌ماند؟" Controls chips on title: [↑ پرش] [↓ دفاع] [→← حرکت] [Z حمله سریع] [X حمله سنگین] [C حرکت ویژه] [V شارژ کی] Select card stats: Goku: قدرت ۸۵ / سرعت ۹۵ / انرژی ۹۰ (bars) Saitama: قدرت ۱۰۰ / سرعت ۷۵ / انرژی ۶۰ Signature: گوکو: «موج کامه‌هامه‌ها — پرتو انرژی ویرانگر» سایتاما: «مشت جدی — هجوم مرگبار با مشت غول‌پیکر» Note: "حریف تو قهرمان دیگر است؛ هوش مصنوعی هدایتش می‌کند." Result victory sub: "افسانه‌ها در برابر تو زانو زدند." Defeat: "این پایان کار نیست؛ دوباره برخیز!" Also show final score. Let me now write out the whole file. Very careful with brackets. Let me double check one subtle: CSS `aspect-ratio` and Canvas internal resolution 960x540 — set Canvas width/height attrs 960/540. CSS scales it. For crispness on hiDPI could scale but… keep simple (maybe slight blur). Add image-rendering auto; fine. Actually let's render with devicePixelRatio: canvas.width=960*dpr etc, ctx.scale(dpr,dpr) once. Easy and sharper. Do it: dpr capped at 2. But shake translate uses logical coords — fine with ctx.scale base: on resize/reset transform each frame: ctx.setTransform(dpr,0,0,dpr,0,0) then translate for shake. Implementation: ```js const dpr=Math.min(2,window.devicePixelRatio||1); cv.width=W*dpr; cv.height=H*dpr; ctx.setTransform(dpr,0,0,dpr,0,0) at start of each frame before shake translate. ``` CSS width 100% handles display. Portrait canvases: fixed 170x210 attr, dpr too? Just leave 1x for simplicity; fine. Time to write it all out. Also add document.title "گوکو در برابر سایتاما | نبرد افسانه‌ها". Double-check RTL + flex: HUD is a 3-col grid: `grid-template-columns:1fr auto 1fr`. Foe side fill left-anchored: `.foe .hpbar,.foe .kibar{direction:ltr; transform:skewX(12deg)}` and me side skewX(-12deg). Hmm mirrored look: me (right side) skews -12 → top edge shifts left… honestly either; go with it. Pips position: after name. Enemy tag "هوش مصنوعی" (AI). Special ready badge text: "ویژه آماده!" small. Let's write out the result overlay with id spans. Also "controls bar" only visible during battle: id controlsBar toggle. Final: writing the code. While writing, keep functions above use or function declarations (hoisted). Use function declarations everywhere. OK AI 'jumpin' mode: on first frame set inp.up=1: track m.jf set true when mode assigned 'jumpin'; in apply: if(m.mode==='jumpin'){ if(!m.jf){inp.up=1;m.jf=true;} move toward direction }. Reset m.jf=false on each mode assign. Also AI 'blast' only meaningful for goku; for saita treat as approach. Also saita AI when far and low ki → charge. Ensure AI doesn't charge in midrange dangerously: only when dist>300. Also AI recovery: if hp low & ki low → sometimes retreat to charge: covered by dist>330 branch charge option for both chars. ok. Ensure applyHit called only when phase fight (beam too) — during 'ko' beams cleared anyway. Projectile friendly fire: only hit opponent of owner: check p.owner===P? then target E else P. OK, writing. After writing, do a mental pass for undefined ids: Elements: cv, hud, nameP,nameE,hpP,hpE,kiP,kiE,rdyP,rdyE,tagP?(static),pipsP,pipsE,timer,announce, scrTitle,scrSelect,scrResult,scrPause, btnStart, cardGoku,cardSaita,cvPGoku,cvPSaita, diffSeg buttons .seg, btnFight? (cards click directly) — add explicit note "برای شروع روی قهرمان کلیک کن". Result: resTitle,resSub,resScore,btnRematch,btnChars. Pause: btnResume,btnQuit. Mute: btnMute. Controls bar: ctlBar. Portraits animated. Card click → startMatch('goku'|'saita'). Also card selected style? Since direct start, skip selection state; but hover effect. Add difficulty segment first (default جنگجو). Good UX: click card = start with current difficulty. btnStart → show select screen. Escape on title/select does nothing. Enter on title → select; on result → rematch. Also click Canvas during title → go select? Buttons enough. Write CSS neatly. Colors: --org:#ff7a1c; --yel:#ffd23f; --cyn:#59d7ff; --red:#ff4757; --ink:#0c0f1d; --panel:#141830; Fonts: 'Lalezar' display; 'Vazirmatn' body. Buttons class .btn: background linear-gradient(#ff9a3d,#ff6a00)? Differentiate per action: primary orange, ghost dark. Skew -8deg, inner span unskew? Text inside skewed looks dynamic — leave skewed, fine for Persian (slight slant ok). Actually skewing Persian letters might look weird but stylish; use transform on button only, keep text normal: button{transform:skewX(-8deg)} span{display:inline-block;transform:skewX(8deg)}. Do that. Card: width ~300px, panel gradient, 4px char-color border, portrait Canvas centered, hover translateY(-8px) & shadow glow, transition .25s. Portrait background char-color radial. Stat row: label + track (fill width%). Title VS badge: dark square rotated 4deg with cyan border, Lalezar 44px "VS". Title names: گوکو color org glow text-shadow; سایتاما yel glow. Announce color classes: default white, .gold yellow glow, .red red glow. Announce size: font-size:min(11vw,96px). OK final write. One more check — updateFight uses global P/E opponent reference: define `function opp(f){return f===P?E:P;}`. During menu phase P/E exist in menu positions — good for backdrop; also their animT advances. Menu backdrop: also spawn occasional aura particles for flavor. render() always draws fighters — during matchend overlay they remain in scene behind dim overlay — fine. Beam box height 44 at y-100: body box top -118 → overlap at torso. Jumping (y up) → body moves up, might avoid. Good. Serious punch box: meleeBox(f,120) y-105 h70. applyHit signature: applyHit(att,def,{dmg,kb,up,heavy,guardBreak}). Saita special uses applyHit with guardBreak → if blocked: dmg*=0.5, big slide, still chip; text "شکست دفاع!". Let me code block handling: ```js const dirA = Math.sign(def.x-att.x)||1; // away from attacker const facingAtt = def.facing===-dirA? wait, def.facing points toward attacker: dirToAtt=-dirA; facing attacker means def.facing===Math.sign(att.x-def.x) = -dirA. blocked = def.state==='block' && def.facing===Math.sign(att.x-def.x||1) if(blocked && !a.guardBreak){ chip...} else if(blocked && a.guardBreak){ dmg*=0.5; def.state='hurt'; def.hurtT=.4; def.vx=dirA*a.kb*0.8; text 'دفاع شکست!' } ``` Beam blocking: blocked if guard & facing; damage scaled 0.25, no stun. doKO also stops charge state etc: set def.attack=null,def.special=null; if def has beam → beamStop & beam null. If att has beam keep until phase ko update stops beam update → but sound continues → call beamStop in doKO? That would mute attacker's beam visually too, abruptly… acceptable: keep visual but stop damage? Simpler: doKO → clear both beams & beamStop(). Visually beam disappears on KO — fine (fight ends). Projectile clear also in doKO? Keep flying, harmless (applyHit early-return if phase!=='fight'… applyHit during ko would still apply damage to loser → guard: if(G.phase!=='fight') return; at top of applyHit and projectile collision check). Good. Melee check also gated inside fight only (updateFight only runs in fight anyway — ko phase runs updateFight with empty input; attack state continues? During ko, fighters don't have attacks (KO came from hit). Edge: simultaneous KO? First hit wins — check after each applyHit; phase changes to ko stops second. OK. updateFight is called in phases: fight (full), ko & roundend (physics+anim only, empty input, skip timers). Branch internally: const live = G.phase==='fight'. Timer & passive ki only when live. Facing update also ok in ko (loser flying facing… whatever). Jump input: inp.up — for player: kd(ArrowUp,KeyW). Edge is better: use kp to avoid bounce; use pressed edge: upEdge: kp('ArrowUp','KeyW'). AI single frame set. Use edge for jump. Light/heavy/special edges too: kp. Then hold Z won't auto-combo — player taps. Fine (cleaner). PlayerInput: ```js function playerInput(){ return {left:kd('ArrowLeft','KeyA'), right:kd('ArrowRight','KeyD'), down:kd('ArrowDown','KeyS'), up:kp('ArrowUp','KeyW'), light:kp('KeyZ','KeyJ'), heavy:kp('KeyX','KeyK'), special:kp('KeyC','KeyL'), charge:kd('KeyV')}; } ``` pressedSet cleared after both fighters updated. Edge case: hitStop freezing consumes pressed edges (clear each frame even during hitstop → input lost). 50-90ms barely matters; but for safety don't clear press set during hitStop return? Keep cleared — negligible. OK really writing now. Also include an inline favicon? skip. Also ensure no external images. Announce element shouldn't block clicks: pointer-events none. Result overlay bg darker. Final code assembly — also test-think tricky spots: ctx.roundRect availability — use manual rounded rect helper rr(ctx,x,y,w,h,r). drawGroundCracks precompute points. Let me write makeFighter: ```js function makeFighter(char,x,facing){ const st=STATS[char]; return {char,x,y:GROUND,vx:0,vy:0,facing,hp:st.hp,hpMax:st.hp,ki:35,state:'idle',animT:Math.random()*5,attack:null,special:null,beam:null,hurtT:0,flashT:0,combo:0,comboT:0,koAng:0,chT:0,ai:{think:0,mode:'approach',modeT:0,cd:0,blockCd:0,jf:false}}; } ``` resetFighter(f,x,facing): assign same basics, keep object (AI memory reset). STATS: ```js const STATS={ goku:{name:'گوکو',title:'جنگجوی افسانه‌ای سایان',hp:100,speed:285,jump:960,lightDmg:7,heavyDmg:13,spCost:40,color:'#ff7a1c'}, saita:{name:'سایتاما',title:'قهرمان تک‌ضربه',hp:115,speed:245,jump:900,lightDmg:9,heavyDmg:17,spCost:50,color:'#ffd23f'} }; ``` Damage tuning: Saita light 9, heavy 17, special 32 → 5-6 hits to KO Goku (100). Goku light 7, heavy 13, beam ~30 → good. Beam dps 34 over max ~0.9s if full contact. Projectile speed 560. Walk speed 285 vs AI… good. Passive ki +5/sec; hit +7; charge +30/sec. Costs 40/50. OK writing HTML. Also controls bar bottom hidden during non-battle. Now writing all out as final answer. Ensure single code block, complete HTML. Response language Persian, brief intro line then code. Keep intro concise. # 🔥 نبرد گوکو در برابر سایتاما یک بازی مبارزه‌ای کامل با انتخاب شخصیت، هوش مصنوعی، حرکات ویژه (کامه‌هامه‌ها و مشت جدی)، سیستم راند، کمبو، افکت‌های انرژی و صدا. فایل را ذخیره کن و در مرورگر باز کن: ```html گوکو در برابر سایتاما | نبرد افسانه‌ها

شماگوکو

ویژه آماده!

۶۰

هوش مصنوعیسایتاما

ویژه آماده!

← → حرکت↑ پرش↓ دفاع Z سریعX سنگینC ویژه V شارژ کیEsc مکث

مصاف دو افسانه ⚡ بهترین رزم را انتخاب کن

گوکو

VS

سایتاما

میدان نبرد آماده است؛ موج انرژی در برابر مشت جدی. در ۳ راند، کدام افسانه زنده می‌ماند؟

← → حرکت↑ پرش↓ دفاع Z حمله سریعX حمله سنگین C حرکت ویژهV شارژ انرژی

برای بهترین تجربه با کیبورد بازی کنید

هر انتخاب، سرنوشت نبرد را تغییر می‌دهد

قهرمانت را انتخاب کن

گوکو

جنگجوی افسانه‌ای سایان

قدرت

سرعت

انرژی

حرکت ویژه: «موج کامه‌هامه‌ها» — پرتو انرژی ویرانگر

سایتاما

قهرمان کچل، فقط برای تفریح

قدرت

سرعت

انرژی

حرکت ویژه: «مشت جدی» — هجوم مرگبار با مشت غول‌پیکر

سختی حریف:

حریف تو قهرمان دیگر است و هوش مصنوعی هدایتش می‌کند — برای شروع روی کارت کلیک کن

پیروزی!

مکث

``` ## راهنمای سریع | کلید | کار | |---|---| | `← →` / `↑` / `↓` | حرکت، پرش، دفاع | | `Z` / `X` | حمله سریع / سنگین (گوی انرژی گوکو) | | `C` | حرکت ویژه — با انرژی «کی» | | `V` | نگه‌دار تا انرژی شارژ شود | | `Esc` | مکث | **نکته‌ها:** وقتی سلامت گوکو کم شود، حالت «سوپرسایان» فعال می‌شود؛ مشت جدی سایتاما حتی دفاع را می‌شکند؛ کامبو زدن امتیاز ویژه نمایش می‌دهد. سه راند، دو برد = پیروزی. ⚡

بازی گوکو در مقابل سایتاما رو بساز، بازی خیلی خوبی باشه اشتب...