Here is a quick customization guide for the AiSiteLab Ninja script.
1. Change the container class
If you want to use a different CSS class instead of .aisitelab-ninja, replace it in two places:
// 1. In the querySelector at the top of the script
const containers = document.querySelectorAll('.your-new-class');/* 2. In every CSS selector */
.your-new-class { ... }
.your-new-class .ep-canvas { ... }2. Adjust game modes
Find the MODES object near the top of the script:
const MODES = {
slow: { spawnMin: 1400, spawnMax: 2200, vyBase: -7, vyRand: 3, gravity: 0.10, maxPolys: 5, label: 'SLOW' },
medium: { spawnMin: 700, spawnMax: 1200, vyBase: -12, vyRand: 5, gravity: 0.15, maxPolys: 10, label: 'MEDIUM' },
hard: { spawnMin: 250, spawnMax: 500, vyBase: -17, vyRand: 6, gravity: 0.20, maxPolys: 14, label: 'HARD' }
};| Property | Effect |
|---|---|
| spawnMin / spawnMax | Milliseconds between spawns (lower = faster) |
| vyBase | Initial upward velocity (more negative = higher toss) |
| vyRand | Random velocity variation |
| gravity | How fast objects fall down |
| maxPolys | Maximum objects on screen at once |
| label | Button text |
3. Change object colors
Find the hues array inside makePoly():
const hues = [340, 190, 48, 280, 160, 20];These are HSL hue values. Change them to any palette you prefer:
- Neon cyberpunk: [280, 320, 190, 160, 340, 20]
- Fire: [0, 20, 40, 10, 30, 50]
- Ocean: [180, 190, 200, 210, 170, 160]
4. Resize objects
In makePoly(), change the radius range:
const r = 34 + Math.random() * 16; // 34–50 px- Smaller objects: 20 + Math.random() * 10
- Larger objects: 50 + Math.random() * 30
5. Tweak slice visuals
Inside triggerSlice(), adjust these numbers:
for (let k = 0; k < 30; k++) sparks.push(...); // Number of particles
shake = isSlice ? 4 : 7; // Screen shake intensity (0 = off)6. Modify the counter labels
Find the counterEl creation:
counterEl.innerHTML = 'Spawned: <span id="ninja-spawned">0</span><br>Sliced: <span id="ninja-sliced">0</span>';Change the text to anything (e.g., SCORE, HITS, CUTS).
7. Disable click-to-slice
If you want only mouse movement to slice and remove the click interaction, delete or comment out this block:
target.addEventListener('mousedown', e => { ... });8. Minimum container height
If your container is shorter or taller than 600 px, update the CSS:
.aisitelab-ninja {
min-height: 400px; /* or 800px, etc. */
}The script auto-detects the actual pixel dimensions, so this is only for layout stability before load.
Share post: