DEV Community: Weird Codes

My First Dev challenge submission

Weird Codes — Tue, 18 Aug 2026 15:40:36 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I built A delightful 1920x1080 desktop landscape dog jumping game where players tap to guide their dog to catch bones.

A Bone Collector Dog arcade game leveraged Google AI Studio to turn a more than 12-step architectural blueprint into a fully functional, event-driven game complete with a score tracker, sound effects, and clean state management.

My Preplanned Instructions

To generate the core logic of the application, I provided Google AI Studio with a highly specific, 12-step foundational prompt:

Make a 1080x1920 canvas.
Spawn Dog emoji as player at bottom.
Spawn bone at randon place at screen.
Add touch screen for user to jump dog to the position of bone.
Store the score how many bones the dog has got.
Show the score at the top of screen on left side.
Show the score with bone emoji (example: score 3 will show 3 bones at top left screen.)
Make start Screen to start the game
Add start game button on start screen.
Add exit game button on top right corner at screen on gameplay.
Add Exit button at top right at screen at start screen to exit the game.
Add audio in game from audio/ folder using mp3 files.

Demo

Play

My Experience

For this i'm using Gemini 3.7 Flash

First Prompt

Make a 1080x1920 canvas.
Spawn Dog emoji as player at bottom.
Spawn bone at randon place at screen.
Add touch screen for user to jump dog to the position of bone.
Store the score how many bones the dog has got.
Show the score at the top of screen on left side.
Show the score with bone emoji (example: score 3 will show 3 bones at top left screen.)
Make start Screen to start the game
Add start game button on start screen.
Add exit game button on top right corner at screen on gameplay.
Add Exit button at top right at screen at start screen to exit the game.
Add audio in game from audio/ folder using mp3 files.

1. It suggested me 2 more instructions:

Ensure the audio loops during gameplay for a seamless experience.
Implement sound effects for each bone collection interaction.
It suggested me few tampletes to choose for my game UI. I chose the last one.
It stopped after doing UI, Didnt follow all the instructions and steps to make finished game.
It did the change but i could not see it.
I gave new prompt to make screen size 1920x1080 for desktop.
I had to refresh the entire screen then i it has followed all the instructions already.
I tested the game.
I gave another new prompt "after 10 bones +1 achivement and reset bone collection stack for the next 10 bones for next achievement."

9.It updated the game and did auto refresh this time and gave prompt notification got 2 errors.

I clicked 'Fix' button.
It fixed the errors and explained it in prompt window and updated the game with auto refresh again.

I gave a new prompt "dog should jump at the user's screen click/tap position".
It updated the game again with auto refresh and stored last score on screen shown.
First time it got a glitch that i hid start game but it gone back to start screen back once. This glitch happend 2nd time here coz it happened before at an update too.
I gave new prompt "keep the dog on ground, so remove the gap between dog and shadow."
It updated the game again in 58 seconds.
I gave new prompt "keep the dog on ground, so remove the gap between dog and shadow."
It centered the dog on shadhow horizontal only.
I manually updated the code myself by clicking **"Vew changes"** button in prompt that redirected me to the updated code showing me diff.

            transform: `translate(-50%, -85%) scaleX(${dogPos.scaleX}) rotate(${dogPos.rotation}deg)`,
            transformOrigin: '50% 85%',

            transform: `translate(-50%, -100%) scaleX(${dogPos.scaleX}) rotate(${dogPos.rotation}deg)`,
            transformOrigin: '50% 100%',

Game updated and got auto refresh but this time no glitch on start game.
This time game just ran without glitch and i realized "that glitch was there before coz i started game before it was fully ready in prompt.
I could not see it is not fully ready coz there was not progress indication in progress bar for that. It looked like it's ready. Here is the possiblity to improve it for Google AI Studio, if i understood it correctly.
I gave a new prompt "change the dog avatar to new random dog image at each achievement."
I ran for 172 seconds and updated the game as i wanted without that glitch this time coz i knew when to hit the "Start Button" this time.

On the prompt it shows Checkpoint "Vew changes" window after that it's ready.
Next prompt i gave "make shodow size and position update according to the dog position on the screen. (Example: if dog not on ground then shadow size decrease, if dog changing x position shadow also changes it to keep it always beneath the dog."
Again Gemini updated the game in 65 seconds but i got a bug or i would say an enhancement posibility in game logic.

Bug 1. It resets the dog image back to the very first image if clicks "Start Button" but keep the new dog if press .

Bug 2. It gives dog foot prints as the dog avatar image at achievement.

Bug 3. It repeats the old dog image at achievement.

I gave new prompt "Store the last updated avatar image of the dog."
Gemini updated the game in 110 seconds. Bug fixed.
I gave new prompt "do not repeate the old avatar new achievement."
Gemini updated game in 153 seconds. Bug fixed.
I gave new prompt "dog avatar at new achievement must be a full body dog image."
Gemini updated the game in 157 seconds and fixed the bug.

I gave new prompt "bone shouldn't float at one place in air. it should come from left going to right side if dog is in the right side of the screen center and should come from the right side going to the left if dog is in the lef t side of the screen. if the dog could not hit the bone in air then bone doesnt count."
Gemini fixed the bug in 124 seconds but found another bug to be fixed "dog isn't always facing front when jump".

I gave new prompt "dog should always face front when jump".
Gemini fixed the bug in 156 seconds.

I gave new prompt "dog should idle animation on ground by face and tail tilting."
Gemini updated the game in 114 seconds.
I gave new prompt "remove face tilt and add tung animation for idle state."
Gemini updated game in 114 seconds.
I gave new prompt "Move mouth triangle bihind the tung." Gemini failed here.
I gave new prompt "move the z index of tung up over the mouth." failed again.
Then i realized maybe that yellow triangle is also the tung from old design. so i gave new prompt "move the z index of tung up over the mouth
"
Gemini ran for 9 seconds and ran out of free generations for today.

45. Finally i restored back to face tilt animation no tung animation for idle to remove the duplicate tung.

After finishing:

I had Google AI Studio accound for a mounth but i didnt started using it since i felt it looks easy but maybe i will not easy to use. For that reason of dout i just didn't even started testing it just coz i didn't have any specific reason to use it. But then saw the "Dev Education Tracks" post on the Dev.io Home page and i click on it to read and i just tried it right after that.

Google AI Studio proved incredibly effective at translating exact gameplay specs into a working code structure.

The Best Part: The AI perfectly handled the visual translation of the score system—converting a standard numeric counter into a dynamic row of visual bone emojis (3 = 🦴🦴🦴) precisely as requested.

What did i learn: At the time of sharing the project i realized preinstructions was empty in the right side window, still it worked without it. It could help in some common instructions like "give me reply in the for of diffs so can add the code my self." and "Reply to in devnagari." and so on.

Key Takeaway: Clear, structured requirements yield incredible results. Breaking my game loops down into 12 granular steps allowed the AI to deliver production-ready logic on the first try.

It was fun to use it for me. Thanks for the Dev Education Tracks.

Mobile Gameplay Performance Optimization

Weird Codes — Tue, 18 Aug 2026 09:12:00 +0000

MOKSHA — v0.1.1 Devlog

Date: 2026-08-18
Milestone: v0.1.1 — https://github.com/weirdcodesofficial/MOKSHA/milestone/11

Highlights

Major mobile-focused performance work: reduced per-frame CPU/GPU cost in render path.
Replaced hot trig math with a lookup table (LUT) to remove repeated Math.sin/cos calls.
Cached per-frame gradients and reduced expensive shadowBlur calls to lower GPU blur passes.
Added quality-tier controls and explicit render-state resets for more predictable mobile behaviour.
v0.1.1 release PR merged.

Merged pull requests (summary)

PR #147 — perf(render): replace remaining Math.sin/cos with lutSin/lutCos

Replaced ~25 per-frame trig calls in drawScene() with reads from the existing 2048-entry radian LUT (affects ring ticks, pulses, orbit waves, arc heads, timer pill pulses, etc.) — reduces CPU trig cost significantly.

https://github.com/weirdcodesofficial/MOKSHA/pull/147
PR #145 — render: Done gradient caching.

Implemented caching/baking for commonly created gradients and offscreen sprites (pickup glow, naama, chakravaata, rein gradient buckets) to avoid per-frame gradient allocations and GPU work.

https://github.com/weirdcodesofficial/MOKSHA/pull/145
PR #144 — render: quality tier control, explicity reset, 40 shadowBlur calls wr…

Added device/quality-tier checks to disable or lower shadowBlur on low-end devices; isolated shadowBlur via save()/restore() and explicit ctx.shadowBlur = 0 resets to avoid leaks. GPU blur pass count reduced.

https://github.com/weirdcodesofficial/MOKSHA/pull/144
PR #146 — V0.1.1 (release PR) — bump / release merge.

https://github.com/weirdcodesofficial/MOKSHA/pull/146

Not a Protytype anymore!

Weird Codes — Mon, 17 Aug 2026 10:07:00 +0000

🕉️ मोक्ष — अब Prototype नहीं, In Development है!

दिनांक: 17 अगस्त 2026
प्लेटफ़ॉर्म: itch.io · GitHub

बड़ा बदलाव / Big Update

मोक्ष की itch.io release status Prototype → In Development हो गई है।

Moksha's itch.io release status has changed from Prototype → In Development.

यह क्यों मायने रखता है?

जब मैंने मोक्ष पहली बार itch.io पर publish किया था, तो status "Prototype" थी —
क्योंकि तब यह सिर्फ एक idea था जिसे test किया जा रहा था।

अब स्थिति बदल गई है:

When I first published Moksha on itch.io, the status was "Prototype" —
because it was just an idea being tested.

That has changed now:

अब तक क्या हुआ / What's been done

✅ v0.1 milestone — 95/95 issues closed, 100% complete
✅ Vedic karma engine (पुण्य / पाप / प्रारब्ध / समर्पित)
✅ ES6 modular architecture (11 source files)
✅ Mobile touch controls + gyroscope steering
✅ गुरु-दीक्षा tutorial system (5-step)
✅ Full gamepad support
✅ Layered ambient audio (28 mp3 files)
✅ In-game शास्त्र (3 pages, bilingual)
✅ Canvas alert system, floating text, orbit rings

आगे क्या है / What's next

v0.1.1 — Mobile performance optimization patch:

shadowBlur GPU cost कम करना
Per-frame gradient caching
Trig lookup table (sin/cos LUT)

यह game अभी actively बन रही है।
यह सफर अभी खत्म नहीं हुआ — यह तो अभी शुरू हुआ है।

This game is actively being built.
This journey hasn't ended — it has just begun.

"उद्धरेदात्मनात्मानं" — आत्मा का उद्धार स्वयं आत्मा करे।

🔗 Links


🎮 itch.io	weirdcodes.itch.io/moksha
💻 GitHub	github.com/weirdcodesofficial/MOKSHA
📝 dev.to	@weirdcodesofficial
🐘 Mastodon	@pjatmasto
𝕏 X	@weirdcodesx
▶️ YouTube	@weirdcodes-official

Human-designed, AI-assisted. सभी शास्त्रीय और रचनात्मक निर्णय Weired Codes द्वारा।

v0.1.0 Done

Weird Codes — Mon, 17 Aug 2026 09:52:00 +0000

🕉️ मोक्ष Devlog — v0.1.1 Milestone

दिनांक: 17 अगस्त 2026
बिल्ड: v0.1.1 (upcoming patch)
प्लेटफ़ॉर्म: itch.io · GitHub

🎯 v0.1.1 क्या है?

v0.1 milestone 100% complete हुआ — 95/95 issues closed। 🎉

अगला पड़ाव है v0.1.1 — एक focused performance patch जो mobile devices पर
मोक्ष को smoother बनाएगा। कोई नया feature नहीं — सिर्फ optimization।

v0.1 milestone is 100% complete — 95/95 issues closed.
Next up is v0.1.1 — a focused performance patch to make Moksha smoother on mobile.
No new features — pure optimization.

🔍 समस्या की जड़ / Root of the Problem

मोक्ष पूरी तरह HTML5 Canvas 2D पर बना है — कोई game engine नहीं।
इसका मतलब हर frame में हम खुद GPU को instructions देते हैं।

तीन operations हैं जो mobile GPU पर सबसे ज़्यादा cost करते हैं:

Moksha is built entirely on HTML5 Canvas 2D — no game engine.
This means every frame we give instructions to the GPU directly.
Three operations are the heaviest on mobile GPU:

🐛 Issue #96 — `shadowBlur` per-frame GPU cost

समस्या

render.js में shadowBlur हर frame 77 बार set होता है।

shadowBlur एक expensive GPU operation है — हर बार एक blur pass trigger होता है।
Mobile पर (विशेषकर Firefox पर) यही FPS drop का सबसे बड़ा कारण है।

// यह 77 बार हर frame होता है — बहुत ज़्यादा
ctx.shadowBlur = 18;
// ... draw ...
ctx.shadowBlur = 0;

हल (planned)

Low-end device पर shadowBlur = 0 (quality tier system)
हर draw block में ctx.save() / ctx.restore() से leak रोकें
Critical visuals पर ही shadowBlur रखें, बाकी हटाएँ

🐛 Issue #97 — Per-frame uncached gradients

समस्या

नीचे दिए gradients हर frame नए बनते हैं — GC pressure + GPU cost:

Location	Gradient	हर frame कितनी बार
`drawPickupGlowIcon()`	Radial	हर maya entity पर
Rein draw	Linear	हर 6 घोड़ों पर
Naama maya	Radial	हर naama entity पर
Chakravaata	Radial	हर chakravaata पर

// यह हर frame naama के लिए नया बनता है — wasteful
let nGrad = ctx.createRadialGradient(ncx, ncy, 0, ncx, ncy, r + pulse * 4);

हल (planned)

drawPickupGlowIcon() → offscreen sprite cache में bake करें
Naama, chakravaata gradients → bucket-cached (size key से)
Rein gradient → karma ratio bucket से cache करें

🐛 Issue #98 — Trig caching for orbit rendering

समस्या

outerOrbits और innerOrbit rendering में Math.sin / Math.cos
हर frame, हर entity पर compute होता है।

// हर orbit entity पर हर frame यह चलता है
let angle = (renderTime * orbit.speed) + (i * (Math.PI * 2 / orbit.count));
let dx = cx + Math.cos(angle) * actualDist;  // ← expensive
let dy = cy + Math.sin(angle) * actualDist;  // ← expensive

हल (planned)

360-entry lookup table (LUT) जो एक बार pre-compute हो:

// एक बार — startup पर
const SIN_LUT = new Float32Array(360);
const COS_LUT = new Float32Array(360);
for (let i = 0; i < 360; i++) {
    SIN_LUT[i] = Math.sin((i * Math.PI) / 180);
    COS_LUT[i] = Math.cos((i * Math.PI) / 180);
}

// हर frame — O(1) lookup, zero trig cost
const idx = Math.round(angleDeg) % 360;
const x = cx + COS_LUT[idx] * dist;
const y = cy + SIN_LUT[idx] * dist;

📋 v0.1.1 Milestone Issues

Issue	Title	Label
#96	`perf: reduce shadowBlur calls`	`performance`
#97	`perf: cache per-frame gradients`	`performance`
#98	`perf: sin/cos LUT for orbit rendering`	`performance`

🎯 Expected Impact

Metric	अभी / Now	बाद / After
shadowBlur calls/frame	~77	~15
Gradient allocations/frame	~6	~0
Trig calls/frame (orbits)	~200+	~0
Mobile FPS (target)	30-45fps	60fps

🔗 Links


🎮 itch.io	weirdcodes.itch.io/moksha
💻 GitHub	github.com/weirdcodesofficial/MOKSHA
🐘 Mastodon	@pjatmasto
𝕏 X	@weirdcodesx
▶️ YouTube	@weirdcodes-official

Human-designed, AI-assisted. सभी शास्त्रीय और रचनात्मक निर्णय Weired Codes द्वारा।

Fixed player verticle position

Weird Codes — Mon, 17 Aug 2026 09:21:00 +0000

दिनांक: 17 अगस्त 2026
बिल्ड: v0.0.9 (patch)
प्लेटफ़ॉर्म: itch.io · GitHub

📋 बदली गई फ़ाइल / File Changed

फ़ाइल / File	बदलाव / Change
`engine.js`	`player.y` — player canvas bottom पर

🐛 Fix — Player Canvas के Bottom पर नहीं था

समस्या / Problem

Player (रथ) canvas के बीच में दिखता था — bottom पर नहीं।
खेलते समय ऊपर बहुत कम space था और नीचे बहुत ज़्यादा।

हल / Solution

engine.js — init() method:

// BEFORE
this.player.y = HEIGHT - 250;

// AFTER
this.player.y = HEIGHT - 120;

	पहले / Before	बाद / After
`player.y`	`430px`	`560px`
Canvas bottom से दूरी	`250px`	`120px`

Maya ऊपर से नीचे गिरती है — player का bottom पर होना शास्त्र-संगत है:

"रथ धरा पर, आत्मा ऊर्ध्वगामी" — आकाश से माया उतरती है, रथ पृथ्वी पर।

🔗 Links


🎮 itch.io	weirdcodes.itch.io/moksha
💻 GitHub	github.com/weirdcodesofficial/MOKSHA
📝 dev.to	@weirdcodesofficial
𝕏 X	@weirdcodesx
▶️ YouTube	@weirdcodes-official

Moved footer back to screen bottom.

Weird Codes — Mon, 17 Aug 2026 07:16:00 +0000

Devlog — Footer / HUD layout fix

Commit: c7cc832
Author: pj90 (weirdcodesofficial)
Date: 2026-08-17
Repo: weirdcodesofficial/MOKSHA — An HTML5 browser game based on Sanatan Shastras and Karmic philosophy.
Languages: JavaScript (89.7%), CSS (6.1%), HTML (4.2%)

Summary

Moved the UI footer back to the screen bottom and consolidated the HUD controls (volume slider, mute, help, credits) into the footer alongside the mode badge. This removes the separate HUD controls block earlier in the DOM and places the mode badge + controls together at the bottom of the viewport.

Commit message: "Footer: moved footer back to screen bottom."

What changed

Modified: index.html
- Removed the standalone HUD controls block from its previous location.
- Re-introduced/added a #ui-footer element placed immediately after the main container, containing:
- #mode-badge (mode/status badge)
- #hud-controls with #music-volume-slider, #music-toggle-btn, #shaashtra-help-btn, and #hud-credits.
Diff stats: +14 / -16 (total 30)

Why

Restore expected layout where the footer and HUD controls are anchored to the bottom of the screen, improving consistency of on-screen controls and grouping mode/status information with control elements.

User-visible effect

The mode badge and HUD controls now appear together fixed to the bottom area of the app UI instead of being separated. Users should find the music controls and help/credits consistently at the bottom.

Representative snippet (new footer block)

html name=index.html url=https://github.com/weirdcodesofficial/MOKSHA/blob/c7cc8322ace555c15fd08c066d1ffd284963d80d/index.html#L175-L193

<!-- ── Footer (mode badge + HUD controls) — screen bottom पर ── -->
<div id="ui-footer">
    <span id="mode-badge" class="mode-badge" title="तत्परता की जाँच हो रही है...">⏳ जाँच रहे हैं...</span>
    <div id="hud-controls">
        <div class="hud-right-group">
            <input type="range" id="music-volume-slider" min="0" max="100" value="100"
                title="संगीत वॉल्यूम" aria-label="Background Music Volume">
            <button id="music-toggle-btn" class="hud-icon-btn" title="पृष्ठभूमि ध्वनि म्यूट/अनम्यूट करें">🔊</button>
            <button id="shaashtra-help-btn" class="hud-icon-btn" title="शास्त्र पढ़ें (खेल की जानकारी)">❓</button>
            <div id="hud-credits" class="hud-icon-btn" style="cursor:default;" title="Developed by Weird Codes">🛠️</div>
        </div>
    </div>
</div>

📱 Touch Controls — Equal Spacing Fix | समान-अंतर लेआउट

Weird Codes — Sun, 16 Aug 2026 20:49:00 +0000

📱 Touch Controls — Equal Spacing Fix | समान-अंतर लेआउट

Project: मोक्ष (MOKSHA) — Vedic Karma Browser Game

Build: v0.0.9+

Type: UI / Layout Fix

Date: 2026-08-17

समस्या क्या थी? (What was broken?)

Mobile पर touch control buttons का spacing unequal था।

तीनों clusters — Left (◀▶), Center (🐚🪔📜⏸), Right (ॐ🙏🙌) — अलग-अलग hardcoded widths की वजह से एक-दूसरे से बेमेल दिख रहे थे।

Buttons भी visually बड़े थे जिससे पूरा layout cramped लग रहा था।

Root cause — style.css में:

Cluster	पुरानी width	समस्या
`.touch-cluster-left`	`width: 136px`	hardcoded — shrink नहीं होती
`.touch-cluster-center`	`max-width: 120px`	बाकी से छोटी रहती थी
`.touch-cluster-right`	`width: 102px`	सबसे छोटी — right-aligned
`#touch-controls`	`justify-content: space-between`	edge पर push — center gap बड़ा

क्या बदला? (What changed?)

`style.css`

सभी clusters को flex: 1 से equal width दी।

Hardcoded width / max-width हटाए।

justify-content: space-evenly से तीनों clusters में uniform gap।

Button sizes clamp() से proportionally घटाई।

Before / After

Cluster widths

/* ── BEFORE ── */
.touch-cluster-left  { width: 136px; justify-content: flex-start; }
.touch-cluster-center { max-width: 120px; }
.touch-cluster-right  { width: 102px;  align-items: flex-end; }

/* ── AFTER ── */
.touch-cluster-left  { flex: 1; justify-content: center; }
.touch-cluster-center { flex: 1; /* max-width हटाया */ }
.touch-cluster-right  { flex: 1; align-items: center; }

Container justify

/* ── BEFORE ── */
#touch-controls {
    justify-content: space-between;
    padding: 12px 10px;
}

/* ── AFTER ── */
#touch-controls {
    justify-content: space-evenly;
    padding: 10px 6px;
}

Button sizes (clamp values घटाए)

/* ── BEFORE ── */
.touch-btn-xl      { width: clamp(68px, 18vw, 96px);  font-size: clamp(24px, 5vw,   32px); }
.touch-btn-md      { width: clamp(52px, 13vw, 72px);  font-size: clamp(22px, 4.5vw, 28px); }
.touch-btn-sm      { width: clamp(46px, 12vw, 64px);  font-size: clamp(18px, 4vw,   24px); }
.touch-btn-primary { width: clamp(82px, 22vw, 110px); font-size: clamp(30px, 6.5vw, 40px); }

/* ── AFTER ── */
.touch-btn-xl      { width: clamp(54px, 14vw, 72px);  font-size: clamp(20px, 4vw,   26px); }
.touch-btn-md      { width: clamp(44px, 11vw, 58px);  font-size: clamp(18px, 3.5vw, 22px); }
.touch-btn-sm      { width: clamp(38px, 10vw, 50px);  font-size: clamp(15px, 3.2vw, 19px); }
.touch-btn-primary { width: clamp(66px, 17vw, 84px);  font-size: clamp(26px, 5.5vw, 34px); }

Files Changed | बदली गई फ़ाइलें

File	Change
`style.css`	Cluster widths → `flex: 1`; button sizes कम; `space-evenly`

Result | परिणाम

✅ तीनों clusters अब बराबर width लेते हैं
✅ Buttons proportionally छोटे — cramped नहीं
✅ space-evenly से uniform gap — edges पर भी
✅ HTML / JS — कोई बदलाव नहीं
✅ Desktop / non-touch devices — unaffected

Human-designed, AI-assisted. सभी शास्त्रीय और रचनात्मक निर्णय Weired Codes द्वारा।

🎮 itch.io |
💻 GitHub |
🐘 Mastodon |
𝕏 X

NaN Bug Fix

Weird Codes — Sun, 16 Aug 2026 11:32:00 +0000

मोक्ष Devlog — शास्त्र-ग्रंथ अपडेट + NaN Bug Fix

Series: मोक्ष Devlog — Building a Vedic Karma Game
Tags: bugfix content shaashtra vanilla-js html5-canvas

संक्षेप

इस पैच में दो काम हुए:

NaN Bug Fix — शास्त्र-ग्रंथ के हर page पर श्लोक की जगह "NaN" दिख रहा था। एक पुराना diff marker (+) accidentally source code में रह गया था — JavaScript उसे unary + operator मान रहा था।
शास्त्र-ग्रंथ Content Update — नए mechanics (Gyroscope steering, Mobile touch controls, Chakravaata physics, Punarjanma types) जो implement तो हो गए थे, लेकिन शास्त्र में documented नहीं थे — वो भी जोड़े।

🐛 Bug Fix — श्लोक की जगह NaN

क्या दिख रहा था

शास्त्र खोलने पर — हर page पर — श्लोक की जगह:

NaN
— गीता ४.३७

Punya/Paap/Prarabdha sab theek tha, sirf shlok block broken tha.

Root Cause

src/shaashtra.js के renderShaashtraPage() function में श्लोक-render block इस तरह था:

// ❌ BUGGY — diff markers (+) column-0 पर accidentally रह गए
html += `<p style="text-align:center;margin:14px 0;">`
     +  `<em style="color:#ffecb4;">`
+                    // बहु-पंक्ति श्लोक — '\n' को <br> बनाएँ
+                    escapeHtml(sh.text).replace(/\n/g, '<br>')
+                    `</em>`;

क्यों NaN?

Column-0 पर + को JavaScript unary + operator मानता है, binary concatenation नहीं:

"<p...><em...>"  +  ( +"ज्ञानाग्निः सर्वकर्माणि..." )
                        ↑
                   unary + on string = NaN

Result: "<p...><em...>" + NaN + "</em>" → HTML में NaN render होता है।

Fix

// ✅ FIXED — proper indentation, diff markers हटाए
html += `<p style="text-align:center;margin:14px 0;">`
     +  `<em style="color:#ffecb4;">`
     // बहु-पंक्ति श्लोक — '\n' को <br> बनाएँ (escape के बाद, सुरक्षित)
     +  escapeHtml(sh.text).replace(/\n/g, '<br>')
     +  `</em>`;

सीख: Diff review में हमेशा column-0 पर +/- markers को double-check करें — कभी-कभी ये operator बन जाते हैं।

📜 शास्त्र-ग्रंथ Content Updates

1. Stale Comments हटाए

SHAASHTRA_PAGES export के ऊपर दो पुराने TODO comments थे जो v0.0.6 से relevant नहीं रहे:

// ❌ OLD
// ⚠️ PAGE_2, PAGE_3 अगले पैच में जुड़ेंगे।
// ⚠️ PAGE_3 अगले पैच में जुड़ेगा।
export const SHAASHTRA_PAGES = [PAGE_1, PAGE_2, PAGE_3];

// ✅ NEW
export const SHAASHTRA_PAGES = [PAGE_1, PAGE_2, PAGE_3];

2. Page 1 — पुनर्जन्म: पवित्र बनाम अपवित्र

खिलाड़ी को नहीं पता था कि R key कब काम करती है और कब नहीं।

Added (HI):

♻️ पुनर्जन्म — पवित्र बनाम अपवित्र :
जब समय शून्य पर कर्म-भार शेष हो — पुनर्जन्म होता है।
पवित्र पुनर्जन्म (R key) तभी संभव है जब शुभकर्म, अशुभकर्म और प्रारब्ध
— तीनों शून्य हों। यदि कोई भी शेष हो तो आत्मा "अपवित्र" रूप में पुनः आती है।

Added (EN):

♻️ Punarjanma — Pure vs Impure :
When Samaya reaches zero with karma remaining, rebirth follows. A Pure Rebirth
(R key) is only possible when Punya, Paapa, and Praarabdha are all zero.
If any remains, the soul returns in an "impure" form.

शास्त्र-संदर्भ: engine.js → let isApavitra = (shuvhaKarma > 0 || ashuvhaKarma > 0 || prarabdha > 0)

3. Page 2 Controls — Gyroscope + Mobile Touch

v0.0.9 में touch.js → TouchControls (virtual buttons) और GyroscopeControls (gamma-axis tilt) implement हुए थे, लेकिन शास्त्र में mention नहीं था।

Added after steering line (HI):

📱 Mobile: स्क्रीन पर virtual buttons (ॐ 🌿 🙏 💀 ♻️ 🐚 🪔) |
🔄 Gyroscope: device बाईं/दाईं झुकाएँ — iOS 13+ पर permission dialog।

Added after steering line (EN):

📱 Mobile: on-screen virtual buttons (ॐ 🌿 🙏 💀 ♻️ 🐚 🪔) |
🔄 Gyroscope: tilt device left/right — iOS 13+ shows a permission dialog.

4. Page 2 — Chakravaata Mechanics Section

Chakravaata (माया-तूफ़ान) implement था, README में documented था — लेकिन शास्त्र में इसकी mechanics missing थीं। खिलाड़ी को नहीं पता था कि यह खींचता है, और इसे कैसे नष्ट करें।

Added new section (HI):

🌀 चक्रवात — माया का भय-रूप

🌀 चक्रवात : माया का भय-रूप — 160px range में player को स्वयं की ओर खींचता है।
             अन्य शुभ/अशुभ माया को भी खींचता है।

ॐ नाम-मार्ग : नाम-जाप वलय चक्रवात को भस्म करती है — नाम सर्वशक्तिमान है।

🐚 यंत्र-मार्ग : शंख-वलय (Y) भी चक्रवात नष्ट करती है — जब नाम संचित न हो।

⚠️ सीधे टकराने पर +1 अशुभ कर्म — नाम या शंख ही एकमात्र रक्षा।

Added new section (EN):

🌀 Chakravaata — The face of fear in Maya

🌀 Chakravaata  : The storm of Samsara — pulls the player toward itself within
                  a 160px range. Also drags nearby Shuvha and Ashuvha Maya.

ॐ Naama-Maarga  : The Naama-Japa ring burns the Chakravaata — Naama is all-powerful.

🐚 Yantra-Maarga : The Shankha ring (Y) also destroys the Chakravaata —
                   for when no Naama is available.

⚠️ A direct collision adds +1 Ashuvha Karma — only Naama or Shankha can protect you.

📁 Files Changed

File	Changes
`src/shaashtra.js`	NaN bugfix (unary `+` removed); stale comments cleaned; Page 1 HI+EN: Punarjanma types added; Page 2 HI+EN: Gyroscope/Mobile note added; Page 2 HI+EN: Chakravaata section added

Before / After

Before — शास्त्र Page 1 (screenshot)

ज्ञानाग्निः सर्वकर्माणि भस्मसात् कुरुते

NaN          ← 🐛 श्लोक की जगह NaN
— गीता ४.३७

After — शास्त्र Page 1

ज्ञानाग्निः सर्वकर्माणि भस्मसात् कुरुते   ← ✅ सही render
— गीता ४.३७

♻️ पुनर्जन्म — पवित्र बनाम अपवित्र :     ← ✅ नया section
...

After — शास्त्र Page 2 (Chakravaata section)

🌀 चक्रवात — माया का भय-रूप 🌀           ← ✅ नया section

🌀 चक्रवात : माया का भय-रूप — 160px range में player को खींचता है।
ॐ नाम-मार्ग : नाम-जाप वलय चक्रवात को भस्म करती है।
🐚 यंत्र-मार्ग : शंख-वलय (Y) भी चक्रवात नष्ट करती है।
⚠️ सीधे टकराने पर +1 अशुभ कर्म।

🔗 Links

भक्ति-मार्ग में नाम की प्रधानता

Weird Codes — Sun, 16 Aug 2026 05:15:00 +0000

🕉️ देवलॉग — भक्ति-मार्ग में नाम की प्रधानता

Devlog: Bhakti-Marga Naama Spawn Bias
दिनांक / Date: 2026-08-16
संस्करण / Version: v0.0.9+
commit: feat(karma): add tunnel-biased spawn via _spawnXPos() helper

🇮🇳 हिंदी

समस्या — भक्ति-मार्ग में अव्यवस्था

भक्ति-मार्ग (Tunnel) मोक्ष का केन्द्रीय मार्ग है — यहीं नाम मिलता है,
यहीं पुण्य-पाप भस्म होते हैं, यहीं पूर्ण-समर्पण संभव है।

परंतु एक समस्या थी — _spawnMaya() में सभी माया-प्रकारों का
xPos पूरी canvas-width पर random था।

इसका अर्थ था कि shuvha 🌿, ashuvha 🥀, chakravaata 🌪️, shankha 🐚, jyoti 🪔
— सभी tunnel के अंदर भी उतनी ही frequency पर आ सकते थे जितनी बाहर।

परिणाम: भक्ति-मार्ग अव्यवस्थित लगता था।

नाम (ॐ) अपने ही पथ पर अल्पसंख्यक था।

यह शास्त्र-विरुद्ध है — भक्ति-मार्ग में नाम की प्रधानता होनी चाहिए।

समाधान — `_spawnXPos(tunnelProb)` helper

src/karma.js में एक नया helper जोड़ा गया:

_spawnXPos(tunnelProb = 0) {
    if (Math.random() < tunnelProb) {
        // tunnel zone — नाम का क्षेत्र
        return this.TUNNEL_X + Math.random() * (this.TUNNEL_WIDTH - 20);
    }
    // बाईं या दाईं पट्टी — tunnel exclude
    ...
}

अब _spawnMaya() में हर type का अपना tunnelProb है:

माया-प्रकार	tunnelProb	अर्थ
ॐ नाम	`1.0`	हमेशा tunnel में
shuvha 🌿	`0.15`	85% बाहर, 15% tunnel
ashuvha 🥀	`0.15`	85% बाहर, 15% tunnel
chakravaata 🌪️	`0.15`	85% बाहर, 15% tunnel
shankha 🐚	`0.15`	85% बाहर, 15% tunnel
jyoti 🪔	`0.15`	85% बाहर, 15% tunnel
kripa ✋	`0.15`	85% बाहर, 15% tunnel

शास्त्रीय आधार

"भक्त्या मामभिजानाति यावान्यश्चास्मि तत्त्वतः।"

— भगवद्गीता १८.५५

भक्ति-मार्ग वह पवित्र क्षेत्र है जहाँ सारथी नाम के साथ एकाग्र होता है।
संसार की अड़चनें वहाँ भी आती हैं — परंतु नाम की प्रधानता अब
gameplay में भी दृश्यमान है।

क्या बदला

src/karma.js — _spawnXPos() helper जोड़ा; _spawnMaya() के सभी xPos updated
README.md — Features, Change Log, और Developer Reference में entry जोड़ी

आगे क्या

tunnelProb = 0.15 को gameplay test के बाद tune किया जा सकता है
भविष्य में chetanaaJaagrita होने पर tunnel में naama और अधिक dense हो सकती है

🇬🇧 English

Problem — Chaos in the Bhakti-Marga

The Bhakti-Marga (Tunnel) is the sacred path of Moksha — Naama is collected
here, Punya and Paapa are burnt here, and Poorna-Samarpana is only possible here.

But there was a problem. In _spawnMaya(), every Maya type had its xPos
drawn randomly across the entire canvas width.

This meant that shuvha 🌿, ashuvha 🥀, chakravaata 🌪️, shankha 🐚, jyoti 🪔
— all of them could appear inside the tunnel just as often as outside.

Result: the Bhakti-Marga felt chaotic.

Naama (ॐ) was outnumbered on its own path.

This is contrary to Shastra — the path of devotion should be dominated by the Name.

Solution — `_spawnXPos(tunnelProb)` helper

A new helper was added to src/karma.js:

_spawnXPos(tunnelProb = 0) {
    if (Math.random() < tunnelProb) {
        return this.TUNNEL_X + Math.random() * (this.TUNNEL_WIDTH - 20);
    }
    // left or right strip — tunnel excluded
    ...
}

Each Maya type in _spawnMaya() now has its own tunnelProb:

Maya Type	tunnelProb	Meaning
ॐ Naama	`1.0`	Always inside tunnel
Shuvha 🌿	`0.15`	85% outside, 15% inside
Ashuvha 🥀	`0.15`	85% outside, 15% inside
Chakravaata 🌪️	`0.15`	85% outside, 15% inside
Shankha 🐚	`0.15`	85% outside, 15% inside
Jyoti 🪔	`0.15`	85% outside, 15% inside
Kripa ✋	`0.15`	85% outside, 15% inside

Obstacles remain inside the Bhakti-Marga — but Naama is now
undeniably its most prominent presence.

Scriptural Basis

"भक्त्या मामभिजानाति यावान्यश्चास्मि तत्त्वतः।"

"Through Bhakti one knows Me in truth — what I am and how great I am."

— Bhagavad Gita 18.55

Files Changed

src/karma.js — _spawnXPos() helper added; all xPos assignments in _spawnMaya() updated
README.md — Features, Change Log, and Developer Reference updated

What's Next

tunnelProb = 0.15 can be tuned further after gameplay testing
Future: when chetanaaJaagrita is true, Naama density inside tunnel could increase further

Developed by Weird Codes — Human-designed, AI-assisted.

🔗 weirdcodes.itch.io/moksha
Watch Video Clip

Now Karma Bandhana is Adhomukhi and Aatma breath pulse with white glow.

Weird Codes — Sat, 15 Aug 2026 22:33:00 +0000

MOKSHA Development Log — 2026-08-15

Repository: weirdcodesofficial/MOKSHA

Project Description: An HTML5 browser game based on Sanatan Shastras and Karmic philosophy

Language Composition:

JavaScript: 89.4%
CSS: 6.3%
HTML: 4.3%

Overview

This devlog documents 3 hours of focused development on 2026-08-15, completing v0.0.9 with major architectural and visual enhancements:

✅ Mobile/touch platform support (iOS + Android)
✅ Gyroscope steering (DeviceOrientation API)
✅ 5-step Guru-Diksha tutorial system
✅ ES6 modular architecture (11 files)
✅ Enhanced visuals (Atman glow + Karma-responsive triangles)
✅ Bug fixes & code consistency

Total Impact: ~8,300 lines of well-documented, Vedic-philosophy-aligned game code ready for the v0.1.

Commits

1. docs: Updated README file.

Commit: ee310ff1c32b7e3931a46d170e65bd5ec6ee0e6e

Time: 2026-08-15 17:56 UTC

Author: pj90 (weirdcodesofficial)

Changes: +341 / −143 lines

Major Updates to v0.0.9 Documentation

📱 Mobile & Touch Support

New touch.js module with:

On-screen touch button overlay (←/→/ॐ/🌿/🙏/💀/♻️/🐚/🪔)
Blocker-stack visibility system for tutorial/shaashtra states
Gyroscope steering (gamma-axis tilt; iOS 13+ permission dialog)

🎓 Guru-Diksha Tutorial System

New tutorial.js (TutorialManager):

5-step progressive learning system:
1. Move — ≥40px horizontal movement
2. Maya — Collect first naama (activeNaam >= 1)
3. Jaapa — Trigger naam-jaap mode
4. Tunnel — Enter antimaCharana tunnel
5. Praarabdha — Endure past-life karma
Slow-mode (dt × 0.3) during card display for reading
Forced naama spawn during steps 1–2
Anti-chakravaata wait gate; praarabdha-wait gate
localStorage persistence ('moksha_tutorial_seen')

🏗️ ES6 Module Refactor

Architecture now split into 11 files (~8,312 lines total):

File	Lines	Purpose
`engine.js`	~1220	Core orchestrator + KarmaMixin, PhysicsMixin, StateMixin
`karma.js`	~542	Vedic collision & action logic
`physics.js`	~203	Glow rings, particles, explosions
`state.js`	~202	HUD updates, alert management
`touch.js`	~344	Touch controls + Gyroscope API
`tutorial.js`	~355	Learning system
`audio.js`	~1279	28 mp3 layered ambient + SFX
`render.js`	~1452	All Canvas drawing (+ tutorial card renderer)
`main.js`	~854	Game loop, input polling, initialization
`i18n.js`	~464	hi/en translation with late-binding resolve
`shaashtra.js`	~268	3-page spiritual knowledge system
`style.css`	External	All UI styles

🎮 Input Mapping Enhancement

Updated input control table with new Touch column:

Action	Keyboard	Gamepad	Touch	Meaning
Chariot Steering	A/D, ←/→	DPAD L/R	←/→ button	इंद्रिय-नियंत्रण (Sense Control)
Naam-Jaap	SPACE	RT (7)	ॐ button	Name recitation
Detachment	S, ↓	X (2)	🌿 button	पुण्य-बंधन रोकें (Block virtue binding)
Surrender	W, ↑	RB (5)	🙏 button	Final-stage only
Pralaya	Q	LB (4)	💀 button	Voluntary dissolution
Sacred Rebirth	R	LT (6)	♻️ button	Pure rebirth
Scripture	ESC	BACK (8)	—	Knowledge gate
Pause	F	START (9)	—	Pause
Conch	Y	Y (0)	🐚 button	Dispel Maya chaos
Lamp	B	B (1)	🪔 button	Vision in darkness
Scripture Nav	↑↓ (held)	DPAD U/D	—	Scroll

🌍 Gyroscope Steering System

gamma axis: portrait mode left/right tilt (-90° to +90°) deadzone: ±10° — neutral zone for straight driving iOS 13+: DeviceOrientationEvent.requestPermission() — user-gesture required Android: automatic — no dialog calibrate(): next event becomes baseline (zero)

Key ownership safety: Gyro and keyboard/touch work simultaneously without interference.

🎵 Audio Architecture Updates

Total: 28 mp3 files (22 eager, 6 deferred)
Eager Load: naamaSamarpita, samarpita, punaraJanma, shathendriya, etc.
Deferred Load: bgMusic, chetanaJaagrita, pralaya, jaagritaSwaansa, moksha, antimaCharana

Duck Reduction per Layer:

BG_MUSIC_DUCK_REDUCTION: 0.75
JAAGRITA_SWAANSA_DUCK_REDUCTION: 0.55
SUSHUPTI_SWAANSA_DUCK_REDUCTION: 0.20 (improved from 0.55)
RUNNING_HORSES_DUCK_REDUCTION: 0.15

📊 Variable Naming Consistency Pass

purnaSamarpana → poornaSamarpana (Sanskrit correction)
isshaashtraVisible → isShaashtraVisible
handleShaashtraGamepadNav() — now callable from start-screen too

⚡ Performance Improvements

Single RAF Loop: Dual RAF removed (Issue #64)
Visibility API: Tab-hide cancels rAF; restore resets lastTime (prevents dt spike)
Sprite Caches: Emoji offscreen canvas per emoji + 3-state Pankhudi cache
DOM Throttle: Guards like lastPunyaAlertSecond prevent spam

2. docs: Updated readme file.

Commit: 19cce7a6f9d7b23e6e3c4d10b36a4e82d06bfbf2

Time: 2026-08-15 19:00 UTC

Author: pj90 (weirdcodesofficial)

Changes: +1 / −2 lines

Minor Documentation Fix

Added version label to ES6 Modular Refactor changelog:

🆕 ES6 Modular Refactor (0.0.4)

Clarifies refactor release version in change log

Removed PayPal donation link from footer social links

3. fix: fixed variable name.

Commit: 45bb9af6e533d857fdd2c169d52f1156ed5106c5

Time: 2026-08-15 19:21 UTC

Author: pj90 (weirdcodesofficial)

Changes: +8 / −8 lines

Variable Naming Consistency Fix

Issue: Typo in Sanskrit variable naming

Fix: swaansaingSmoothSize → swaansaringSmoothSize

Locations Updated:

README.md: 1 occurrence (code comment)
src/render.js: 7 occurrences across:
Player body radius calculation
Glow effect rendering
Horse positioning

Reason: Consistency in Sanskrit phonetics where सांस (swaansa) means "breath"

4. render: added atma breath pulse glow.

Commit: 5c28afae40ef2696d6cde57ce10bc1b654f8cf0a

Time: 2026-08-15 19:59 UTC

Author: pj90 (weirdcodesofficial)

Changes: +10 / −3 lines

Atman (Spirit) Visual Enhancement

Goal: Emphasize the eternal अत्मन् (Atman) as consciousness that persists through all karmic cycles

Changes to src/render.js:

Glow Radius Increase
- Before: 6px × scale
- After: 12px × scale
Swaansa-Synchronized Pulse Animation
- shadowBlur: 20 + (worldSwaansaPulse × 45)
- Minimum: 20 at rest
- Maximum: ~65 at breath peak
- shadowColor: Divine violet rgba(220, 200, 255, ${atmanOpacity})
- Opacity: 0.55 + (worldSwaansaPulse × 0.45)
- Syncs with meditation breath cycle
Center Dot Dynamic
- Radius: 0.7 + (worldSwaansaPulse × 0.5)
- Shadow: atmanGlow × 1.4
- Also pulses with swaansa for continuity

Visual Intent: The Atman glows brighter with each breath, symbolizing eternal presence independent of karma.

5. src/render.js

Commit: 3a060f15f1d6bedecef5a09967735c7451231b14

Time: 2026-08-15 20:54 UTC

Author: pj90 (weirdcodesofficial)

Changes: +33 / −2 lines

Dual-Triangle Yantra Breath Mechanics

Philosophy (शास्त्र-अनुसार):

The two triangles represent the eternal duality of existence:

निष्कर्म आत्मा (Karma-freed Soul) ↓ ऊर्ध्वगामी 🔺 (Upward Movement) → मोक्ष (Liberation path) → Gold pulse glow

कर्म-बद्ध आत्मा (Karma-bound Soul) ↓ अधोगामी 🔻 (Downward Movement) → संसार (Worldly cycle) → Reddish pulse glow

Implementation Logic:

const isKarmaMukta = (shuvhaKarma === 0 && ashuvhaKarma === 0 && praarabdha === 0);

if (isKarmaMukta) {
  // 🔺 UPWARD TRIANGLE: Active (breathing pulse)
  //    - Color: gold rgba(255, 215, 0, ...)
  //    - LineWidth: 2.2 → 4.0 px (swaansa-sync)
  //    - Shadow: 14 → 32 px blur (swaansa-sync)

  // 🔻 DOWNWARD TRIANGLE: Inactive (static dim at 18% alpha)
  //    - Color: dim gold rgba(255, 200, 60, 0.5)
  //    - LineWidth: 1.2 px
  //    - No shadow
} else {
  // 🔺 UPWARD TRIANGLE: Inactive (static dim)

  // 🔻 DOWNWARD TRIANGLE: Active (breathing pulse)
  //    - Color: reddish rgba(255, 80, 40, ...)
  //    - LineWidth: 2.2 → 4.0 px (swaansa-sync)
  //    - Shadow: 14 → 32 px blur (swaansa-sync)
}

Animation Parameters:

Property	Rest	Peak	Formula
Line Width	2.2 px	4.0 px	2.2 + (worldSwaansaPulse × 1.8)
Shadow Blur	14 px	32 px	14 + (worldSwaansaPulse × 18)
Opacity	0.7	1.0	0.7 + (worldSwaansaPulse × 0.3)

Visual Intent:

Real-time visual feedback of karma bondage state
Breathing animation (swaansa-pulse) represents life force
Gold (ऊर्ध्व) vs. Red (अधो) follows Vedic color symbolism
Continuously educates player through Vedic philosophy

Statistics

Commits by Type

Documentation: 2 commits (README updates)
Features: 2 commits (Tutorial, Touch, Gyro, Modules)
Bug Fixes: 1 commit (Variable naming)
Visual Enhancement: 2 commits (Atman glow, Triangle mechanics)

Code Impact

Total Changes: ~395 lines (additions + deletions)
Files Modified: README.md, src/render.js, src/tutorial.js, src/touch.js
Architecture Upgrade: Single HTML → 11 ES6 modules
Total Codebase: ~3,835 lines → ~8,312 lines

Timeline

Time	Type	Summary
17:56	Major Release	v0.0.9 Documentation + Module Architecture
19:00	Documentation	Version label clarification
19:21	Bug Fix	Variable naming consistency
19:59	Visual	Atman breath glow enhancement
20:54	Visual	Karma-responsive triangle system

📱 Mobile-First Support

Touch button controls (8 action buttons visible on mobile)
Gyroscope steering via device tilt
Blocker-stack system prevents control conflicts
iOS 13+ permission handling

🎓 Educational System

5-step गुरु-दीक्षा (Guru-Diksha) tutorial
Slow-mode for reading (dt × 0.3)
Forced naama spawns to teach mechanics
Gate checks (antimaCharana-wait, praarabdha-wait)

🏗️ Architectural Improvements

ES6 modules (no build tool needed)
Mixin pattern for class composition
Dependency injection for game state
Circular import safety via constants

🎨 Visual Enhancements

Atman with dynamic breath pulse
Karma-responsive dual triangles
Swaansa-synchronized animations
3-state sprite caching

🎵 Audio Refinements

Improved SUSHUPTI duck level (0.55 → 0.20)
28 mp3 files with eager/deferred loading
Smooth duck/fade system per layer

Performance Metrics

Before → After

Single RAF loop (eliminated dual-RAF overhead)
Visibility API integration (saves battery when tab hidden)
Sprite caching: 6 cache objects + emoji cache
DOM write throttling via dirty-check

Optimization Patterns

Object pools for particles/text (no GC pressure)
Sprite caches for emoji/maya/pankhudi
Bucket-cached gradients (swaansa + tunnel)
Per-key animation state (glow rings, UI scales)

Files Overview

New Files (v0.0.9)

src/touch.js — Touch controls + Gyroscope steering
src/tutorial.js — 5-step learning system
src/state.js — HUD management split from engine

Refactored Files

src/engine.js — Now slim orchestrator (~1220 lines)
src/render.js — Enhanced with tutorial card + triangle mechanics (~1452 lines)
src/main.js — Now includes touch/gyro/tutorial wiring (~854 lines)

External Assets

style.css — Extracted from HTML
audio/ — 28 mp3 files (indexed in i18n)

Testing Checklist (Recommended)

[ ] Desktop (Chrome/Firefox/Safari) — keyboard + gamepad
[ ] Mobile (iOS Safari) — touch controls + gyro permission
[ ] Mobile (Android Chrome) — touch controls + gyro (no permission needed)
[ ] Tutorial flow — all 5 steps complete
[ ] Karma-responsive triangles — test all states (karma-mukta ↔ karma-bound)
[ ] Atman glow — verify swaansa pulse (≥1 breath cycle)
[ ] Audio levels — verify duck reductions apply
[ ] i18n switching — hi/en toggle, persists across reload

Known Limitations

Gyroscope — Mobile browsers only; desktop has no sensor
Touch Buttons — Desktop sees no buttons (not needed)
Audio Eagerness — 22 MP3s preload may impact startup on slow connections
localStorage — Tutorial seen flag persists browser-wide (no per-user tracking)

Developer Notes

शास्त्र-संरचना (Shastra Structure)

This codebase tightly integrates Vedic philosophy:

Katha Upanishad's chariot metaphor (player = Atman, chariot = body, reins = mind)
Gita 4.37 (ज्ञानाग्निः सर्वकर्माणि भस्मसात्) — Knowledge burns all karma
Dual-triangle yantra (निष्कर्म/कर्म-बद्ध duality)
Swaansa cycles (meditation breath = time in game)

Module Dependencies

main.js
├── engine.js (KarmaEngine)
│ ├── karma.js (KarmaMixin)
│ ├── physics.js (PhysicsMixin)
│ └── state.js (StateMixin)
├── render.js (Renderer)
├── audio.js (AudioManager)
├── tutorial.js (TutorialManager)
├── touch.js (TouchControls, GyroscopeControls)
├── i18n.js (translations)
└── shaashtra.js (renderShaashtraPage)

Code Style Guidelines

Language: Vanilla ES6 (no TypeScript, no build tool)
Comments: Hindi + English; Sanskrit terms preserved
Naming: camelCase for JS, UPPER_SNAKE_CASE for constants
Architecture: Mixins, object pools, sprite caches, DI pattern

Contact & Support

Repository: weirdcodesofficial/MOKSHA
Developer: Weired Codes (PS → weirdcodesofficial)

Channe	Link
📘 Facebook	weirdcodesofficial
📸 Instagram	@weirdcodes.dev
🧵 Threads	@weirdcodes.dev

Last Updated: 2026-08-15 20:54 UTC
Version: v0.0.9
Status: Under Development and Testing v0.1

Watch video clip

Sanchita Karma makes stronger Praarabdha | More Difficult to Win.

Weird Codes — Sat, 15 Aug 2026 12:55:00 +0000

🌀 MOKSHA Devlog — August 15, 2026

Overview

Today's session focused on implementing and refining the Shareera Gatee (body-motion) mechanic as a companion to Samaya Gatee (time-flow). Major work included UI/UX polish, physics integration, and karmic carry-over mechanics for praarabdha (accumulated karma from past lives).

Commits & Changes

1. UI: Added HUD Element for Shareera Gati

Commit: 8874bcc | 06:33 UTC

Scope: HTML/JS refactoring of HUD elements

Changes:

Added new shareera-gatee HUD indicator (cyan, #67e8f9)
Renamed ui-gatee → samaya-gatee for clarity
Updated engine state tracking:
- _oldStats and _uiScales now include both samayaGatee and shareeraGatee
- _uiGlows state expanded for dual-gatee animations

Files Modified:

index.html — HUD markup
src/engine.js — State initialization
src/main.js — UI element references
src/state.js — Animation loop updates

Status: ✅ Foundational UI structure ready

2. UI:UX: Implemented Shareera Gatee

Commit: 387e488 | 09:30 UTC

Scope: Physics integration + dynamic speed modulation

Changes:

Karma-speed coupling: Punya/Paapa/Praarabdha now reduce player movement speed
- Base speed modifier: _sMod = 0.7^ashuvhaKarma × 0.8^shuvhaKarma × 0.7^praarabdha
Body-motion indicators:
- 🐌 = slowed (< 100%)
- 🚶 = normal (100%)
- 🏃 = accelerated (> 100%)
Samaya Gatee now represents relative time flow:
- Inverted modifier: karmaSpeedMul = (1/0.7)^ashuvhaKarma × (1/0.8)^shuvhaKarma
- Time accelerates under karma-debt, slows under merit
- Dynamic emojis: 🧊 (slow) / ⌛ (normal) / ⚡ (fast)
Praarabdha snapshot on death:
- Speed multiplier carries forward to next rebirth
- Stored in _praarabdhaSpeedMul for persistent karma-weight

Game Feel: Karma now directly affects both movement speed and time progression, creating dual gameplay feedback

Files Modified:

src/engine.js — Physics + HUD animation
src/karma.js �� Rebirth speed carry-over
index.html — Icon symbols

Status: ✅ Core mechanic implemented

3. praarabdha: No Reset of Samaya Gatee on Punarjanma

Commit: 4305106 | 10:25 UTC

Scope: Rebirth state persistence bug-fix

Issue: Speed multiplier resetting on rebirth, breaking karma continuity

Changes:

Renamed _currentGatiModifier → _currentGateeModifier (clarity)
Introduced _praarabdhaSpeedMul (1.0 initial):
- Persists across rebirths
- Multiplied by current-life karma on death
- Carries forward momentum of karma-debt
Updated reset() to preserve this value (only reset on R-key)

Gameplay: Subsequent rebirths now inherit the "speed penalty" from all prior lives, creating cumulative difficulty

Files Modified:

src/engine.js — State initialization + reset

Status: ✅ Persistence fixed

4. praarabdha-fix: Sanchita Karma Per Janma

Commit: c6370bd | 10:33 UTC

Scope: Karma-accounting system refinement

Issue: Praarabdha units not tracking individual life-carries correctly

Changes:

Added _praarabdhaSpeedStack — FIFO queue for per-janma multipliers
- Each rebirth pushes its individual speed modifier
- When praarabdha is exhausted (bhog-complete), shift oldest entry
- Implements "पूर्व-कृत कर्म पूर्व-भुज्यते" (ancient karma pays first)
Undo mechanic:
- Math.hypot prevents floating-point drift
- Never divides below 1.0 (clamp at identity)
Only push to stack if actualAdded > 0 (prevents cap-hit false entries)

Architectural Insight: This is a generational karma model — each life's debt is tracked independently within the running total, enabling complex multi-life simulations

Files Modified:

src/engine.js — Stack operations + logic
src/karma.js — Rebirth push conditions

Status: ✅ Multi-generational karma accounting

5. Bug: Fixed Samaya Gatee Circle Ratio

Commit: 7f5b472 | 11:10 UTC

Scope: Rendering synchronization

Issue: Samaya Gatee visual circle didn't match engine physics calculations

Changes:

Render ratio fix:

  gatiRatio = ashuvhaMod × shuvhaMod × Math.pow(0.7, praarabdha)

Watch Video Clip

Fixed dt spike at tutorial card dismiss.

Weird Codes — Fri, 14 Aug 2026 18:44:00 +0000

Devlog: Performance Fix - Tutorial Card Dismiss

Commit SHA: 9e00951468a361cd1127092072208ac6b63e947d

Author: pj90 (weirdcodesofficial)

Date: 2026-08-14 18:21:24 UTC

Message: performance-fix: fixes dt spike at tutorial card dismiss.

Summary

Fixed a delta time (dt) spike that occurred when dismissing the tutorial card. The issue was that lastTime was only being updated conditionally when there was no active tutorial card, causing a large time gap on the next frame after dismissal.

Changes

File Modified: src/main.js

Before

// tutorial card dismiss होने पर dt spike न आए
if (!tutorial.hasActiveCard()) lastTime = ts;

After

// lastTime हमेशा update — pause/tutorial/shaashtra किसी में भी spike न आए
lastTime = ts;

Technical Details

Issue: The conditional update of lastTime was causing delta time spikes because when the tutorial card was active, lastTime wasn't being updated. Upon dismissal, the accumulated time difference would create a large dt value in the game loop.
Solution: Unconditionally update lastTime on every frame to ensure consistent delta time calculations, preventing spikes regardless of pause/tutorial/shaashtra states.
Impact: Smoother gameplay experience without frame rate anomalies when dismissing the tutorial card.

Files Changed

src/main.js (+2 lines, -2 lines)

Game Context

This optimization is part of the MOKSHA project—an HTML5 browser game based on Sanatan Shastras and Karmic philosophy. The fix ensures the game maintains stable performance during tutorial interactions.

DEV Community: Weird Codes

My First Dev challenge submission

What I Built

My Preplanned Instructions

Demo

My Experience

First Prompt

1. It suggested me 2 more instructions:

After finishing:

Mobile Gameplay Performance Optimization

MOKSHA — v0.1.1 Devlog

Highlights

Merged pull requests (summary)

Not a Protytype anymore!

🕉️ मोक्ष — अब Prototype नहीं, In Development है!

बड़ा बदलाव / Big Update

यह क्यों मायने रखता है?

अब तक क्या हुआ / What's been done

आगे क्या है / What's next

🔗 Links

v0.1.0 Done

🕉️ मोक्ष Devlog — v0.1.1 Milestone

🎯 v0.1.1 क्या है?

🔍 समस्या की जड़ / Root of the Problem

🐛 Issue #96 — shadowBlur per-frame GPU cost

समस्या

हल (planned)

🐛 Issue #97 — Per-frame uncached gradients

समस्या

हल (planned)

🐛 Issue #98 — Trig caching for orbit rendering

समस्या

हल (planned)

📋 v0.1.1 Milestone Issues

🎯 Expected Impact

🔗 Links

Fixed player verticle position

📋 बदली गई फ़ाइल / File Changed

🐛 Fix — Player Canvas के Bottom पर नहीं था

समस्या / Problem

हल / Solution

🔗 Links

Moved footer back to screen bottom.

Devlog — Footer / HUD layout fix

Summary

What changed

Why

User-visible effect

Representative snippet (new footer block)

📱 Touch Controls — Equal Spacing Fix | समान-अंतर लेआउट

📱 Touch Controls — Equal Spacing Fix | समान-अंतर लेआउट

समस्या क्या थी? (What was broken?)

क्या बदला? (What changed?)

style.css

Before / After

Cluster widths

Container justify

Button sizes (clamp values घटाए)

Files Changed | बदली गई फ़ाइलें

Result | परिणाम

NaN Bug Fix

मोक्ष Devlog — शास्त्र-ग्रंथ अपडेट + NaN Bug Fix

संक्षेप

🐛 Bug Fix — श्लोक की जगह NaN

क्या दिख रहा था

Root Cause

Fix

📜 शास्त्र-ग्रंथ Content Updates

1. Stale Comments हटाए

2. Page 1 — पुनर्जन्म: पवित्र बनाम अपवित्र

3. Page 2 Controls — Gyroscope + Mobile Touch

4. Page 2 — Chakravaata Mechanics Section

📁 Files Changed

Before / After

🔗 Links

भक्ति-मार्ग में नाम की प्रधानता

🕉️ देवलॉग — भक्ति-मार्ग में नाम की प्रधानता

🇮🇳 हिंदी

समस्या — भक्ति-मार्ग में अव्यवस्था

समाधान — _spawnXPos(tunnelProb) helper

🐛 Issue #96 — `shadowBlur` per-frame GPU cost

`style.css`

समाधान — `_spawnXPos(tunnelProb)` helper

Solution — `_spawnXPos(tunnelProb)` helper