OCS Game Engine Clicker Mechanics

%%html
<!-- UI_RUNNER: How to Play panel | panel: cookie_intro_game, slot: left, layout: row, ratio: 20-80, gap: 1rem -->
<div id="cookie-intro-panel" class="cookie-play-panel">
  <h3>How to Play</h3>
  <ol>
    <li>Click Start to begin the game loop.</li>
    <li>Click the cookie sprite to score points.</li>
    <li>Tune values in code directly like <code>SCALE_FACTOR</code>, <code>speed</code>, and <code>hitbox</code>.</li>
    <li>Run again and compare how gameplay changes.</li>
  </ol>
  <p id="cookie-intro-panel-clicks">Clicks: 0</p>
</div>

%%html
<!-- UI_RUNNER: Hack IT panel | panel: cookie_hack_game, slot: left, layout: row, ratio: 20-80, gap: 1rem -->
<div id="cookie-hack-panel" class="runner-side-panel">
  <h3>Hack IT Goals</h3>
  <ul>
    <li>This version makes the cookie harder to click.</li>
    <li>Adjust movement speed and wiggle behavior.</li>
    <li>Tune hitbox percentages for difficulty.</li>
  </ul>
  <p id="cookie-hack-panel-clicks">Total Clicks: 0</p>
  <div id="cookie-hack-panel-counter-list"></div>
</div>

%%html
<!-- UI_RUNNER: Engine flow diagram panel | panel: cookie_engine_docs_pair, slot: left, layout: row, ratio: 45-55, gap: 1rem -->
<div id="cookie-engine-flow-panel" class="runner-side-panel">
<h3>Interaction Flow Diagram</h3>
<div class="mermaid">
flowchart TD
  A[Canvas click] --> B[GameControl.js captures click]
  B --> C[GameObject.js hit check]
  C --> D[Clicker.js increments count]
  D --> E[GAME_RUNNER interact: callback updates Status Bar]
</div>
</div>

%%html
<!-- UI_RUNNER: Engine code snippets panel | panel: cookie_engine_docs_pair, slot: right, layout: row, ratio: 45-55, gap: 1rem -->
<div id="cookie-engine-snippets-panel" class="runner-side-panel">
  <h3>Related Code Snippets:</h3>
  <p><strong>GameControl.js</strong> (canvas click wiring)</p>
  <pre><code>this.gameContainer.addEventListener('click', this._boundClick);
const obj = this.gameEnv.gameObjects.find(o =&gt; o.canvas &amp;&amp; o.canvas.id === clickedCanvas.id);
if (obj &amp;&amp; typeof obj.handleClick === 'function') {
    obj.handleClick(event);
}</code></pre>
  <p><strong>GameObject.js</strong> (hitbox test + click hook)</p>
  <pre><code>isPointInside(x, y) {
    const px = this.position?.x ?? this.INIT_POSITION?.x ?? 0;
    const py = this.position?.y ?? this.INIT_POSITION?.y ?? 0;
    return (x &gt;= px &amp;&amp; x &lt;= px + width &amp;&amp; y &gt;= py &amp;&amp; y &lt;= py + height);
}
handleClick() {
    // Default: do nothing. Subclasses can override for interactivity.
}</code></pre>
  <p><strong>Clicker.js</strong> (counter + callback)</p>
  <pre><code>handleClick(event) {
    if (this.interact) {
        this.clcks++;
        this.interact(this.clcks);
    }
}</code></pre>
<p><small>Source path: @assets/js/GameEnginev1.1/essentials</small></p>
</div>