Neon Ninja - Hong Kong Streets

{"id":"gen-1784573989-4F4y9nWUeKeEZBqw2YBl","choices":[{"finish_reason":"error","index":0,"logprobs":null,"message":{"content":null,"refusal":null,"role":"assistant","annotations":null,"audio":null,"function_call":null,"tool_calls":null,"reasoning":"The user wants a game similar to \"Hong Kong Ninja\" which was a Miniclip game. Let me recall what that game was like:\n\nHong Kong Ninja was a side-scrolling beat-em-up game where you play as a ninja fighting through waves of enemies on the streets of Hong Kong. Key features:\n- Side-scrolling beat-em-up action\n- Ninja character with melee attacks (punches, kicks, sword)\n- Enemies that approach from both sides\n- Combos and special moves\n- Health bar\n- Multiple waves/levels\n- Jumping and movement\n- Possibly throwing shuriken/stars\n- Art style was kind of cartoonish with urban Hong Kong setting\n\nI should build a similar game but with my own assets (since I can't copy the original). I'll create a beat-em-up style ninja game with:\n- Canvas-based 2D side-scroller\n- Ninja character with movement, jump, attack\n- Enemy waves\n- Health bars\n- Combos\n- Score system\n- Hong Kong inspired background (neon signs, buildings)\n- Sound effects (using Web Audio API)\n\nLet me build this as a complete single HTML file. I'll use vanilla JavaScript with Canvas for performance.\n\nKey features to include:\n1. Player ninja with idle, walk, attack, jump animations\n2. Enemies (street thugs) that approach\n3. Melee combat with combos\n4. Health system\n5. Wave-based progression\n6. Score/points\n7. Hong Kong aesthetic with neon signs\n8. Particle effects for hits\n9. Screen shake on big hits\n10. Special move (maybe shuriken throw or spinning attack)\n\nLet me code this up. I'll draw everything procedurally with canvas since I can't load external images easily, or I could use simple shapes. Actually, let me draw the characters as stylized shapes/silhouettes for a clean look.\n\nLet me plan the structure:\n- HTML with canvas\n- Game loop with requestAnimationFrame\n- Player class\n- Enemy class\n- Particle system\n- Background renderer (parallax Hong Kong cityscape)\n- UI (health, score, wave)\n- Input handling (keyboard)\n- Combat system with hit detection\n- Wave management\n\nI'll make it look good with neon colors, glow effects, and a night-time Hong Kong vibe.\n\nLet me write the code:\n\n```html\n\n\n\n\nNeon Ninja - Hong Kong Streets\n\n\n\n

\n\n\n\n```\n\nLet me think about the visual style. I'll go for a neon-noir Hong Kong aesthetic:\n- Dark night background with city silhouettes\n- Neon signs in pink, cyan, red, yellow\n- Wet street reflections\n- Rain effect maybe\n- Characters as dark silhouettes with glowing accents\n\nGame mechanics:\n- Arrow keys / WASD to move\n- Space to jump\n- J to punch (quick attack)\n- K to kick (heavy attack)\n- L to throw shuriken (ranged)\n- Special move with meter\n\nEnemies:\n- Basic thugs - walk toward player, melee attack\n- Knife thugs - faster, more damage\n- Boss every few waves\n\nLet me code this comprehensively. I'll make it polished.\n\nFor the character drawing, I'll use simple but effective vector-style drawing with the canvas. The ninja will be a dark figure with a mask, glowing eyes, and a colored sash.\n\nLet me write out the full code now. I need to be thorough.\n\nActually, let me think about animations. Since I'm drawing procedurally, I'll use skeletal animation approach - drawing body parts with rotation based on animation state. This gives nice animated look.\n\nPlayer states: idle, walking, jumping, punching, kicking, hurt, special\n\nLet me code this properly:\n\n```javascript\nclass Character {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.vx = 0;\n this.vy = 0;\n this.facing = 1; // 1 right, -1 left\n this.onGround = false;\n this.health = 100;\n this.maxHealth = 100;\n this.state = 'idle';\n this.animTime = 0;\n this.attackCooldown = 0;\n this.invuln = 0;\n // animation limbs\n this.armAngle = 0;\n this.legAngle = 0;\n }\n}\n```\n\nFor combat, I'll use hitboxes that activate during attack frames.\n\nLet me build a comprehensive game. I'll include:\n1. Title screen\n2. Game with waves\n3. Game over screen\n4. Pause functionality\n\nI'll aim for a really polished result. Let me write the full code.\n\nLet me think about the size. I'll make it 960x540 or full window. Full window is better for immersion.\n\nLet me code:\n\n```javascript\nconst canvas = document.getElementById('game');\nconst ctx = canvas.getContext('2d');\nlet W, H;\nfunction resize() {\n W = canvas.width = window.innerWidth;\n H = canvas.height = window.innerHeight;\n}\nwindow.addEventListener('resize', resize);\nresize();\n```\n\nFor the ground level, I'll set it at H - 100 or so.\n\nPlayer movement physics:\n- Gravity\n- Jump\n- Walk speed\n- Friction\n\nEnemy AI:\n- Move toward player\n- Attack when in range\n- Knockback when hit\n- Death animation\n\nLet me write the complete game now. I'll make it visually impressive with:\n- Neon glow effects (shadowBlur)\n- Particle systems\n- Screen shake\n- Hit sparks\n- Combo counter\n- Slow motion on special moves\n\nHere's my plan for the full code. Let me write it out.\n\nFor the Hong Kong background, I'll draw:\n- Dark sky with gradient\n- Distant building silhouettes (parallax layer 1)\n- Closer buildings with neon signs (parallax layer 2)\n- Street level with wet reflections\n- Maybe some rain\n\nI'll create neon signs as rectangles with glowing borders and Chinese-style characters (I'll just use stylized shapes or actual characters).\n\nLet me write this all out now. I'll be comprehensive.\n\nI need to handle:\n- Keyboard input (with key state tracking)\n- Game states (menu, playing, paused, gameover)\n- Wave system\n- Score and combo\n- Special meter\n- Sound effects (Web Audio API for simple synth sounds)\n\nLet me write it all:\n\n```javascript\n// Input\nconst keys = {};\nwindow.addEventListener('keydown', e => {\n keys[e.code] = true;\n // prevent default for game keys\n});\nwindow.addEventListener('keyup', e => {\n keys[e.code] = false;\n});\n```\n\nFor sound, I'll create simple synth sounds using Web Audio API:\n- Punch sound\n- Hit sound\n- Jump sound\n- Enemy death\n- Special move\n\nLet me write the complete code now. This will be long but comprehensive.\n\nI'll structure the code:\n1. Setup and globals\n2. Input handling\n3. Sound system\n4. Particle system\n5. Background rendering\n6. Character class (player and enemies share base)\n7. Player class\n8. Enemy class\n9. Wave manager\n10. UI rendering\n11. Game state management\n12. Main game loop\n\nLet me write it:\n\nFor drawing characters, I'll use a stylized approach:\n- Body as rounded rectangles\n- Head as circle with mask\n- Limbs as lines/capsules\n- Glowing eyes\n- Color-coded for player (blue/cyan) vs enemies (red/orange)\n\nAnimation through procedural rotation of limbs based on state and time.\n\nLet me code this thoroughly. I want it to feel like a real game.\n\nOkay, let me write the full HTML file now. I'll make it as complete and polished as possible.\n\nLet me think about what made Hong Kong Ninja special:\n- Fast-paced combat\n- Fluid animations\n- Multiple enemy types\n- Combo system\n- Street fighting aesthetic\n- Ability to pick up weapons maybe\n- Boss fights\n\nI'll incorporate as much as I can.\n\nHere's my full code plan - let me write it now:\n\n```html\n\n\n\n\n\nNeon Ninja: Hong Kong Streets\n\n\n\n

\n\n\n\n```\n\nLet me write the complete game now. I'll be thorough and make it feel like Hong Kong Ninja.\n\nActually, I realize I should make the characters look good. Let me use a vector/shape-based approach with nice proportions:\n- Head: circle with ninja mask\n- Torso: tapered rectangle\n- Arms: two segments each (upper + forearm)\n- Legs: two segments each (thigh + shin)\n- Animated with joint rotations\n\nThis will give a nice animated ninja figure.\n\nLet me write the full code. I'll make the ninja look cool with:\n- Dark body suit\n- Glowing visor eyes\n- Flowing scarf/sash\n- Animated limbs\n\nEnemies will be:\n- Thug type 1: basic brawler (orange)\n- Thug type 2: fast knife wielder (red)\n- Thug type 3: heavy bruiser (purple)\n- Boss: larger, more health\n\nLet me write it all now. Here goes:\n\nI'll write the code to be complete and functional. Let me make sure all the mechanics work:\n- Movement with arrow keys/WASD\n- Jump with Space or W/Up\n- Punch with J\n- Kick with K\n- Shuriken with L\n- Special with Shift (when meter full)\n\nEnemy spawning:\n- Waves of increasing difficulty\n- Multiple enemies at once\n- Brief pause between waves\n- Boss every 5 waves\n\nLet me write the complete code:\n\nActually, let me reconsider the controls for simplicity:\n- A/D or Left/Right: move\n- W or Up or Space: jump\n- J: punch (fast, low damage)\n- K: kick (slow, high damage, knockback)\n- L: shuriken throw (ranged)\n- Shift: special attack (spinning slash, needs meter)\n\nThis feels good. Let me code it.\n\nFor the visual Hong Kong theme, I'll add:\n- Neon signs with glow (龍, 忍者, 街, etc.)\n- Rain effect\n- Wet street reflections\n- Chinese-style architecture silhouettes\n- Maybe a tram or something in the background\n\nLet me write the full code now. I'm going to make this comprehensive and polished.\n\nLet me start writing:\n\n```javascript\n// === SETUP ===\nconst canvas = document.getElementById('game');\nconst ctx = canvas.getContext('2d');\nlet W = 0, H = 0, GROUND = 0;\n\nfunction resize() {\n W = canvas.width = window.innerWidth;\n H = canvas.height = window.innerHeight;\n GROUND = H - 120;\n}\nwindow.addEventListener('resize', resize);\nresize();\n\n// === INPUT ===\nconst keys = {};\nconst keyPressed = {};\nwindow.addEventListener('keydown', e => {\n if (!keys[e.code]) keyPressed[e.code] = true;\n keys[e.code] = true;\n if (['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Space'].includes(e.code)) e.preventDefault();\n});\nwindow.addEventListener('keyup', e => {\n keys[e.code] = false;\n});\n\n// === SOUND ===\nlet audioCtx;\nfunction initAudio() {\n if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n}\nfunction playSound(freq, dur, type='square', vol=0.1, freqEnd) {\n if (!audioCtx) return;\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, audioCtx.currentTime);\n if (freqEnd) osc.frequency.exponentialRampToValueAtTime(freqEnd, audioCtx.currentTime + dur);\n gain.gain.setValueAtTime(vol, audioCtx.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);\n osc.connect(gain);\n gain.connect(audioCtx.destination);\n osc.start();\n osc.stop(audioCtx.currentTime + dur);\n}\n```\n\nOkay, I'm going to write the full comprehensive code now. Let me put it all together in the response.\n\nFor the character drawing, let me use a detailed approach with limbs:\n\n```javascript\nfunction drawNinja(ctx, x, y, facing, state, animTime, color) {\n ctx.save();\n ctx.translate(x, y);\n ctx.scale(facing, 1);\n \n // Animation parameters based on state\n let walkCycle = Math.sin(animTime * 0.015) ;\n let armSwing = 0, legSwing = 0;\n \n if (state === 'walk') {\n armSwing = walkCycle * 0.5;\n legSwing = walkCycle * 0.6;\n } else if (state === 'idle') {\n armSwing = Math.sin(animTime * 0.003) * 0.05;\n } else if (state === 'punch') {\n // punch animation\n } else if (state === 'kick') {\n // kick animation\n }\n \n // Draw legs\n // Draw torso\n // Draw arms\n // Draw head with mask\n \n ctx.restore();\n}\n```\n\nThis is getting complex. Let me simplify and use a cleaner approach with stick-figure-like but thick limbs.\n\nActually, let me use a more stylized approach - draw the character as a composite of shapes that look like a ninja. I'll make it look good.\n\nLet me just write the full code now. I've planned enough.\n\nI'll draw characters using a combination of:\n- Ellipses for torso/head\n- Thick lines with round caps for limbs\n- Proper proportions\n- Animation through joint angles\n\nLet me write it all out in one go now.\n\nI think I have a good plan. Let me write the complete HTML file:\n\n```html\n\n\n\n\nNeon Ninja\n\n\n\n

\n\n\n\n```\n\nLet me write it all now. I'll make it comprehensive, fun, and visually impressive. The game will have all the core elements of Hong Kong Ninja: side-scrolling beat-em-up, ninja combat, enemies, waves, combos, health, score, and Hong Kong aesthetic.\n\nLet me write the complete code:\n\nFor the limbs drawing, I'll use a helper that draws a limb segment with joint:\n\n```javascript\nfunction drawLimb(ctx, x1, y1, angle1, len1, angle2, len2, width, color) {\n const x2 = x1 + Math.cos(angle1) * len1;\n const y2 = y1 + Math.sin(angle1) * len1;\n const x3 = x2 + Math.cos(angle1 + angle2) * len2;\n const y3 = y2 + Math.sin(angle1 + angle2) * len2;\n \n ctx.strokeStyle = color;\n ctx.lineWidth = width;\n ctx.lineCap = 'round';\n \n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.lineTo(x3, y3);\n ctx.stroke();\n \n return {x: x3, y: y3};\n}\n```\n\nThis is a good approach for skeletal animation.\n\nAlright, let me write the entire game now. This is going to be a long code block but it'll be a complete, playable game.\n\nLet me also add:\n- Combo counter that increases with consecutive hits\n- Screen shake on hits\n- Hit sparks/particles\n- Damage numbers floating up\n- Slow-mo effect on special moves\n- Enemy health bars\n- Wave announcements\n\nHere's my complete code:\n\nI need to be careful about the code length but I want it to be comprehensive. Let me write it efficiently but completely.\n\nLet me write the complete game now:\n\n```html\n\n\n\n\n\nNeon Ninja · Hong Kong Streets\n\n\n\n

A/D Move · W Jump · J Punch · K Kick · L Shuriken · Shift Special

Hong Kong Ninja Clone