`0fb0b91`

control with pointer

Authored by

espadonne 9 months ago

SHA: 0fb0b917595c628fada890c3f489f39b8b9532e5
Parents: 2145632
Tree: 7260a83

2 changed files

Status	File	+	-
M	`sprong.css`	2	0
M	`sprong.js`	142	22

sprong.cssmodified


     border: 2px solid #00ff88;
     box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
     background: #0a0a0a;
+    touch-action: none; /* Prevent scrolling on touch devices */
+    user-select: none;  /* Prevent text selection */
 }
 
 .info {

sprong.jsmodified

  // Matter.js module aliases
--const Body  = Matter.Body;
++const Body = Matter.Body;
  const World = Matter.World;
  const Engine = Matter.Engine;
  const Bodies = Matter.Bodies;
  let keys = {};
  let inputBuffer = { left: 0, right: 0 };
++// Touch/mouse input
++let mouseInput = {
++    active: false,
++    targetY: 0,
++    leftPaddleTarget: 0,
++    rightPaddleTarget: 0,
++    smoothing: 0.08,  // Slower smoothing for deliberate lag
++    deadZone: 15      // Minimum distance before movement starts
++};
++
  // Particle systems
  let particles = [];
  let impactParticles = [];
  const PADDLE_WIDTH  = 20;
  const PADDLE_HEIGHT = 80;
--// Enhanced movement constants
++// Enhanced movement constants (tuned for faster response)
--const SUPPORT_SPEED     = 6.5;
++const SUPPORT_SPEED     = 6.5;  // Bumped up from 4.5
--const SUPPORT_ACCEL     = 1.2;
++const SUPPORT_ACCEL     = 1.2;  // Increased acceleration
--const INPUT_SMOOTHING   = 0.25
++const INPUT_SMOOTHING   = 0.25; // More responsive
--const SUPPORT_MAX_SPEED = 8;
++const SUPPORT_MAX_SPEED = 8;    // Higher max speed
++
++// Touch/mouse control constants
++const MOUSE_SPEED_LIMIT = 4;    // Max speed for mouse movement
++const MOUSE_LAG_FACTOR  = 0.12; // How much lag in mouse following
++const TOUCH_SENSITIVITY = 1.2;  // Touch movement multiplier
--// Spring physics constants
++// Spring physics constants (tuned for bounciness!)
--const PADDLE_MASS       = 0.6;
++const PADDLE_MASS       = 0.6;  // Lighter for more bounce
  const SPRING_LENGTH     = 40;
--const SPRING_DAMPING    = 0.4;
++const SPRING_DAMPING    = 0.4;  // Much less damping = more bounce!
--const SPRING_STIFFNESS  = 0.035;
++const SPRING_STIFFNESS  = 0.035; // Higher stiffness = snappier
  // Visual enhancement constants
  const TRAIL_SEGMENTS        = 8;
  const PADDLE_GLOW_DISTANCE  = 25;
--const SPRING_GLOW_INTENSITY = 120;
++const SPRING_GLOW_INTENSITY = 120; // More intense glow
  // Particle system constants
  const MAX_PARTICLES         = 100;
          leftSupport, leftPaddle, leftSpring,
          rightSupport, rightPaddle, rightSpring
      ]);
++
++    console.log("🎮 Sprong Phase 5 Complete!");
++    console.log("✓ Particle effects system");
++    console.log("✓ Tuned physics for maximum bounce");
++    console.log("✓ Faster, more responsive paddles");
+ }
  function createSpringPaddleSystem(side) {
--    let startY    = height / 2;
++    let supportX = side === 'left' ? 60 : width - 60;
--    let supportX  = side === 'left' ? 60 : width - 60;
++    let paddleX = side === 'left' ? 60 + SPRING_LENGTH : width - 60 - SPRING_LENGTH;
--    let paddleX   = side === 'left' ? 60 + SPRING_LENGTH : width - 60 - SPRING_LENGTH;
++    let startY = height / 2;
      if (side === 'left') {
          // Left support (invisible anchor point controlled by player)
          // Left paddle (the actual hitting surface)
          leftPaddle = Bodies.rectangle(paddleX, startY, PADDLE_WIDTH, PADDLE_HEIGHT, {
              mass: PADDLE_MASS,
--            restitution: 1.3,
++            restitution: 1.3,  // Even bouncier!
              friction: 0,
              frictionAir: 0.005 // Less air resistance
          });
+ }
  function handleEnhancedInput() {
++    // Handle both keyboard and mouse/touch input
++    handleKeyboardInput();
++    handleMouseTouchInput();
++}
++
++function handleKeyboardInput() {
      // Smooth input accumulation with acceleration
      let leftInput   = 0;
      let rightInput  = 0;
      if (keys['ArrowUp'])    rightInput -= 1;
      if (keys['ArrowDown'])  rightInput += 1;
--    // Apply acceleration and smoothing
++    // Apply acceleration and smoothing for keyboard
      inputBuffer.left = lerp(inputBuffer.left, leftInput, INPUT_SMOOTHING);
      inputBuffer.right = lerp(inputBuffer.right, rightInput, INPUT_SMOOTHING);
--    // Move supports with enhanced physics
++    // Move supports with enhanced physics (only if not using mouse)
--    if (Math.abs(inputBuffer.left) > 0.01) {
++    if (!mouseInput.active) {
--        moveSupportEnhanced(leftSupport, inputBuffer.left * SUPPORT_SPEED);
++        if (Math.abs(inputBuffer.left) > 0.01) {
++            moveSupportEnhanced(leftSupport, inputBuffer.left * SUPPORT_SPEED);
++        }
++        if (Math.abs(inputBuffer.right) > 0.01) {
++            moveSupportEnhanced(rightSupport, inputBuffer.right * SUPPORT_SPEED);
++        }
+     }
--    if (Math.abs(inputBuffer.right) > 0.01) {
++}
--        moveSupportEnhanced(rightSupport, inputBuffer.right * SUPPORT_SPEED);
++
++function handleMouseTouchInput() {
++    if (!mouseInput.active) return;
++
++    // Determine which paddle to control based on mouse X position
++    let controllingLeft = mouseX < width / 2;
++    let targetSupport = controllingLeft ? leftSupport : rightSupport;
++
++    // Calculate target Y with dead zone
++    let currentY = targetSupport.position.y;
++    let targetY = mouseY;
++    let deltaY = targetY - currentY;
++
++    // Apply dead zone - don't move unless mouse is far enough
++    if (Math.abs(deltaY) < mouseInput.deadZone) {
++        return;
++    }
++
++    // Calculate movement with lag and speed limiting
++    let movement = deltaY * MOUSE_LAG_FACTOR * TOUCH_SENSITIVITY;
++
++    // Limit maximum speed to prevent snappy movement
++    movement = constrain(movement, -MOUSE_SPEED_LIMIT, MOUSE_SPEED_LIMIT);
++
++    // Apply the lagged movement
++    moveSupportEnhanced(targetSupport, movement);
++
++    // Visual feedback - update input buffer for particle effects
++    if (controllingLeft) {
++        inputBuffer.left = constrain(movement / MOUSE_SPEED_LIMIT, -1, 1);
++    } else {
++        inputBuffer.right = constrain(movement / MOUSE_SPEED_LIMIT, -1, 1);
+     }
+ }
      text(`L Spring: ${Math.round(leftSpringLength)}px (${((SPRING_LENGTH/leftSpringLength - 1) * 100).toFixed(0)}%)`, 10, 65);
      text(`R Spring: ${Math.round(rightSpringLength)}px (${((SPRING_LENGTH/rightSpringLength - 1) * 100).toFixed(0)}%)`, 10, 80);
      text(`Input: L=${inputBuffer.left.toFixed(2)} R=${inputBuffer.right.toFixed(2)}`, 10, 95);
++
++    // Mouse/touch input debug
++    if (mouseInput.active) {
++        text(`Mouse: ${mouseInput.active ? 'Active' : 'Inactive'} | Side: ${mouseX < width/2 ? 'Left' : 'Right'}`, 10, 110);
++        text(`Mouse Y: ${mouseY} | Dead Zone: ${mouseInput.deadZone}px`, 10, 125);
++    }
+ }
  function drawStartMessage() {
      textSize(20);
      text("Press any key to start!", width/2, height/2 + 100);
      textSize(14);
--    text("Bouncier springs, faster paddles, explosive particles!", width/2, height/2 + 125);
++    text("Keyboard: W/S + ↑/↓ | Mouse/Touch: Drag paddles", width/2, height/2 + 125);
++    textSize(12);
++    text("(Mouse movement has deliberate lag to preserve challenge!)", width/2, height/2 + 145);
+ }
  function resetBall() {
          inputBuffer.left = 0;
          inputBuffer.right = 0;
++        // Reset mouse input
++        mouseInput.active = false;
++
          // Clear particles
          particles = [];
  function keyReleased() {
      keys[key] = false;
      keys[keyCode] = false;
++}
++
++// Mouse/touch input handlers
++function mousePressed() {
++    // Start mouse/touch input when clicking in game area
++    if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
++        mouseInput.active = true;
++
++        // Start game if not started
++        if (!gameStarted) {
++            gameStarted = true;
++        }
++
++        return false; // Prevent default behavior
++    }
++}
++
++function mouseDragged() {
++    // Continue mouse/touch input while dragging
++    if (mouseInput.active) {
++        return false; // Prevent default behavior
++    }
++}
++
++function mouseReleased() {
++    // Stop mouse/touch input when releasing
++    mouseInput.active = false;
++
++    // Gradually reduce input buffer when mouse is released
++    inputBuffer.left *= 0.8;
++    inputBuffer.right *= 0.8;
++}
++
++function touchStarted() {
++    // Handle touch events same as mouse
++    return mousePressed();
++}
++
++function touchMoved() {
++    // Handle touch drag same as mouse
++    return mouseDragged();
++}
++
++function touchEnded() {
++    // Handle touch end same as mouse
++    mouseReleased();
++    return false;
+ }

`@@ -21,6 +21,8 @@` h1 {
21	border: 2px solid #00ff88;	21	border: 2px solid #00ff88;
22	box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);	22	box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
23	background: #0a0a0a;	23	background: #0a0a0a;
		24	+ touch-action: none; /* Prevent scrolling on touch devices */
		25	+ user-select: none; /* Prevent text selection */
24	}	26	}
25		27
26	.info {	28	.info {