Game logic गेम का लॉजिक

1. Stay inside, detect a hit

Two ideas power almost every 2D game:

• Clamping keeps a value inside limits, so the player can’t leave the screen: Math.min(Math.max(value, min), max)
• Collision (overlap) of two rectangles a and b, each with x, y, w (width), h (height). They overlap when all four are true:

• a.x < b.x + b.w (a starts before b ends, left-right)
• a.x + a.w > b.x (a ends after b starts)
• a.y < b.y + b.h and a.y + a.h > b.y (same idea, up-down)

Keep these as small pure functions: same inputs → same answer, easy to test.

                const clampDemo = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
console.log(clampDemo(-30, 0, 260)); // 0
console.log(clampDemo(120, 0, 260)); // 120
console.log(clampDemo(400, 0, 260)); // 260
              

Challenge: clamp and overlaps

Complete two pure functions:

• clamp(value, min, max) returns value, but never less than min or more than max
• overlaps(a, b) returns true when rectangles a and b (each { x, y, w, h }) overlap. Rectangles that only touch at an edge do not overlap.

2. Move with the arrow keys

Keyboard presses are events too. Listen on the whole document:

document.addEventListener("keydown", (e) => { ... });

e.key tells you which key: "ArrowLeft", "ArrowRight", "ArrowUp", " " (space)…

In a canvas game, changing a variable doesn’t move anything by itself — you must redraw: clear the canvas with ctx.clearRect(0, 0, width, height) and paint everything again at the new position.

                document.addEventListener("keydown", (e) => {
  console.log("You pressed", e.key);
});
              

Challenge: Move the basket

Complete the keydown listener:

• ArrowLeft moves basketX left by SPEED (20)
• ArrowRight moves it right by SPEED
• Keep basketX between 0 and canvas.width - BASKET_W (so the basket never leaves the canvas)
• Then call draw() to repaint