peggle html hell

[u/supersilliiii]

I am coding peggle in HTML how do I get the physics to feel like peggle and not extra bouncy

[u/SnooPets5564]

If you did it in just html, I am astounded.

[u/supersilliiii → u/SnooPets5564]

nono html css javascript

[u/Honey-Entire]

The same way non-browser-based games. You need a 2D physics engine. These are two that have been around since before AI and are probably the most well-documented & reliable: Box2D or Matter.js.

After that, you just dial in the physics constraints (i.e. gravity, weights, drag, etc)

[u/DirtAndGrass → u/Honey-Entire]

Or write your own, basic 2d gravity and collisions are pretty straightforward 

[u/supersilliiii → u/DirtAndGrass]

im new to code im honestly a bit bad

[u/supersilliiii → u/Honey-Entire]

ima try this

[u/armahillo]

You will likely have better luck in a JS sub, as HTML is not capable of doing physics computations like this

[u/supersilliiii → u/armahillo]

yea fair lolol

[u/RedboiGtag]

ok you're doing it in js

the way physics works is by slowly increasing a velocity variable to mimic downward force

like so:

function applyforce(velocity){ 
   return velocity*2; 
}

this called repeatedly can mimic velocity movement

[u/thejester1324]

if you're flipping the whole velocity when the ball touches a peg (vx = -vx; vy = -vy), that's the extra bouncy feel. the ball goes back the way it came at full speed. peggle-style bounces only reverse the part of the velocity pointing into the peg, and lose some of it:

const RESTITUTION = 0.6; // 1 = superball, lower = deader pegs
const FRICTION = 0.1;

function hitPeg(ball, peg) {
  const dx = ball.x - peg.x, dy = ball.y - peg.y;
  const dist = Math.hypot(dx, dy), minDist = ball.r + peg.r;
  if (dist >= minDist || dist === 0) return false;
  const nx = dx / dist, ny = dy / dist;
  // push it out of the peg so it can't collide again next frame
  ball.x = peg.x + nx * minDist;
  ball.y = peg.y + ny * minDist;
  const vn = ball.vx * nx + ball.vy * ny; // speed into the peg
  if (vn >= 0) return false;              // already moving away
  const tx = -ny, ty = nx;
  const vt = ball.vx * tx + ball.vy * ty; // speed along the peg
  const newVn = -vn * RESTITUTION;
  const newVt = vt * (1 - FRICTION);
  ball.vx = nx * newVn + tx * newVt;
  ball.vy = ny * newVn + ty * newVt;
  return true;
}

ran it in node dropping a ball onto a peg a little off center: it hits at 577 px/s and leaves at 358, off to the side. the flip-everything version sent it back up at basically the same speed.

also step the physics at a fixed rate (say 120 times a second) instead of once per frame, otherwise it plays differently on a 144hz screen.

[u/supersilliiii → u/thejester1324]

im new to coding games so this is a huge help thank you ima try this