Upload index.html

index.html

@@ -84,6 +84,8 @@ function genKoiPatches(type) {
   return arr;
 }
 let fishes = [], bubbles = [], seaweeds = [], motes = [], rays = [], rocks = [], grass = [], fgGrass = [];
+let playerFish = null; // the fish controlled by gamepad (spawned with F key)
+const GAMEPAD_DEADZONE = 0.15; // ignore small stick movements
 let curNight = 0; // v7: shared night factor (dims the top-light + sheen)
 let plantPoints = [], _ppUsed = 0; // collision points — a pooled set, reused in place
 let sandHeights = [];
@@ -452,9 +454,34 @@ class Fish {
     if (this.roll > 1.15) { this.roll = 1.15; this.rollVel *= -0.25; }
     else if (this.roll < -1.15) { this.roll = -1.15; this.rollVel *= -0.25; }
 
-    const sp = this.speed * this.cruiseSpeed * this.speedFactor * 60 * dt;
-    this.x += Math.cos(this.angle) * sp;
-    this.y += Math.sin(this.angle) * sp;
+    // Player fish: input-driven movement (keyboard WASD + gamepad sticks),
+    // overrides the AI cruising so the player is fully in control.
+    if (this === playerFish) {
+      const inp = getPlayerInput();
+      // Turn toward the combined input direction (WASD or left stick).
+      if (Math.hypot(inp.dx, inp.dy) > GAMEPAD_DEADZONE) {
+        const targetAngle = Math.atan2(inp.dy, inp.dx);
+        let d = targetAngle - this.angle;
+        while (d > Math.PI) d -= 2 * Math.PI;
+        while (d < -Math.PI) d += 2 * Math.PI;
+        const turnSpeed = 4.0; // rad/s — responsive turning
+        this.angle += Math.max(-turnSpeed * dt, Math.min(turnSpeed * dt, d));
+      }
+      // Speed: cruise baseline, boosted by Shift / R-stick down,
+      // slowed by Space / R-stick up.
+      let speedMult = 1;
+      if (inp.boost > 0) speedMult += inp.boost * 2.0;   // speed up
+      if (inp.slow > 0) speedMult -= inp.slow * 0.85;    // slow down
+      speedMult = Math.max(0.15, Math.min(3.0, speedMult));
+      const playerSpeed = this.speed * this.cruiseSpeed * speedMult * 60 * dt;
+      this.x += Math.cos(this.angle) * playerSpeed;
+      this.y += Math.sin(this.angle) * playerSpeed;
+    } else {
+      // Normal AI fish movement.
+      const sp = this.speed * this.cruiseSpeed * this.speedFactor * 60 * dt;
+      this.x += Math.cos(this.angle) * sp;
+      this.y += Math.sin(this.angle) * sp;
+    }
 
     // NOTE: fish do NOT collide with plants — they plough straight through.
     // The seaweed bends out of the way instead (see updatePlants).
@@ -788,6 +815,20 @@ class Fish {
       c.restore();
     }
 
+    // Player fish indicator: glowing outline to make it easy to spot
+    if (this === playerFish) {
+      c.save();
+      c.globalAlpha = 0.6 + Math.sin(performance.now() * 0.005) * 0.3; // pulsing glow
+      c.strokeStyle = '#FFD700'; // gold color
+      c.lineWidth = 2;
+      c.shadowColor = '#FFD700';
+      c.shadowBlur = 8;
+      c.beginPath();
+      c.ellipse(0, 0, s * 0.75, s * 0.35, 0, 0, Math.PI * 2);
+      c.stroke();
+      c.restore();
+    }
+
   }
 }
 
@@ -1269,8 +1310,9 @@ function drawRays(t, light) {
   const [rr, rg, rb] = light.ray;
   const yTop0 = -10, ySpan = H * 0.95 + 10;
 
-  // PERF: only rebuild tinted sprites when the light color shifts significantly (delta > 14)
-  if (!rayTintRGB || Math.abs(rayTintRGB[0] - rr) + Math.abs(rayTintRGB[1] - rg) + Math.abs(rayTintRGB[2] - rb) > 14) {
+  // PERF: only rebuild tinted sprites when the light color shifts significantly (delta > 35)
+  // Higher threshold = fewer expensive canvas rebuilds during slow dusk/dawn transitions
+  if (!rayTintRGB || Math.abs(rayTintRGB[0] - rr) + Math.abs(rayTintRGB[1] - rg) + Math.abs(rayTintRGB[2] - rb) > 35) {
     rayTintRGB = [rr, rg, rb];
     buildRaySprites(); // rebuild with the new tint
   }
@@ -1810,10 +1852,100 @@ function doResize() {
   buildStaticLayer();
   if (!grainPattern) buildGrainTile(); // v8: grain tile is size-independent, build once
 }
+// ============ Player controls: keyboard + gamepad ============
+const keys = {};            // currently-held keyboard keys (lowercased)
+let prevStartPressed = false; // edge-detect the gamepad Start button
+
+// Spawn a fresh player-controlled fish at the centre of the tank.
+function spawnPlayerFish() {
+  if (playerFish) {                       // replace any existing one
+    const idx = fishes.indexOf(playerFish);
+    if (idx !== -1) fishes.splice(idx, 1);
+  }
+  playerFish = new Fish();
+  playerFish.x = W / 2;
+  playerFish.y = H / 2;
+  playerFish.size = rand(20, 35);         // medium size for visibility
+  playerFish.speed *= 1.5;                // a touch faster than average for fun
+  playerFish.hue = (Math.random() * 360) | 0; // unique colour so it stands out
+  playerFish.saturation = 90;
+  playerFish.lightness = 55;
+  fishes.push(playerFish);
+  console.log('Player fish spawned! Steer with WASD or the left stick.');
+}
+
+// Keyboard: WASD steer, Shift speed up, Space slow down, F spawn.
+document.addEventListener('keydown', (e) => {
+  const k = e.key.toLowerCase();
+  keys[k] = true;
+  if (k === ' ') e.preventDefault(); // stop Space from scrolling the page
+  if (k === 'f' && !e.repeat) spawnPlayerFish();
+});
+document.addEventListener('keyup', (e) => {
+  keys[e.key.toLowerCase()] = false;
+});
+
+// Poll gamepad state each frame (Gamepad API requires polling).
+function pollGamepad() {
+  const pads = navigator.getGamepads ? navigator.getGamepads() : null;
+  let startNow = false;
+  if (pads) {
+    for (const pad of pads) {
+      if (!pad || !pad.connected) continue;
+      // Xbox 360 layout: Start button is index [7].
+      if (pad.buttons[7] && pad.buttons[7].pressed) startNow = true;
+      break; // only the first connected pad
+    }
+  }
+  if (startNow && !prevStartPressed) spawnPlayerFish(); // on-press only
+  prevStartPressed = startNow;
+}
+setInterval(pollGamepad, 10);
+
+// Combine keyboard + gamepad into one input vector for the player fish.
+function getPlayerInput() {
+  let dx = 0, dy = 0, boost = 0, slow = 0;
+  // Keyboard: WASD steer, Shift speed up, Space slow down.
+  if (keys['a']) dx -= 1;
+  if (keys['d']) dx += 1;
+  if (keys['w']) dy -= 1;
+  if (keys['s']) dy += 1;
+  if (keys['shift']) boost = 1;
+  if (keys[' ']) slow = 1;
+
+  // Gamepad: left stick steers, right stick down speeds up / up slows down.
+  const pads = navigator.getGamepads ? navigator.getGamepads() : null;
+  if (pads) {
+    for (const pad of pads) {
+      if (!pad || !pad.connected) continue;
+      const lx = Math.abs(pad.axes[0]) > GAMEPAD_DEADZONE ? pad.axes[0] : 0;
+      const ly = Math.abs(pad.axes[1]) > GAMEPAD_DEADZONE ? pad.axes[1] : 0;
+      dx += lx;
+      dy += ly;
+      if (pad.axes[3] > GAMEPAD_DEADZONE) boost = Math.max(boost, pad.axes[3]); // down → faster
+      if (pad.axes[3] < -GAMEPAD_DEADZONE) slow = Math.max(slow, -pad.axes[3]); // up → slower
+      break; // only the first connected pad
+    }
+  }
+  return { dx, dy, boost, slow };
+}
+
+// Fade out the controls help text 10s after load/refresh.
+setTimeout(() => {
+  const el = document.getElementById('controls-help');
+  if (el) el.style.opacity = '0';
+}, 10000);
+
 window.addEventListener("resize", doResize);
 doResize();
 requestAnimationFrame(frame);
 })();
 </script>
+
+<div id="controls-help" style="position: fixed; bottom: 15px; left: 15px; color: rgba(255,255,255,0.7); font-family: monospace; font-size: 12px; pointer-events: none; z-index: 1000; line-height: 1.7; transition: opacity 1.5s ease;">
+  <strong>Keyboard:</strong> F spawn &nbsp;·&nbsp; WASD steer &nbsp;·&nbsp; Shift speed up &nbsp;·&nbsp; Space slow down<br>
+  <strong>Controller:</strong> Start spawn &nbsp;·&nbsp; Left stick steer &nbsp;·&nbsp; Right stick ↓ speed up &nbsp;·&nbsp; Right stick ↑ slow down
+</div>
+
 </body>
 </html>