HTML and CSS Reference
In-Depth Information
thighRangeSlider.draw(context);
thighBaseSlider.draw(context);
calfRangeSlider.draw(context);
calfOffsetSlider.draw(context);
gravitySlider.draw(context);
}());
And in that function, add gravity to
vy
, and then add
vx
and
vy
to the position of
segment0
and
segment2
.
Remember that you don't need to worry about
segment1
and
segment3
, because their positions are
calculated in relationship to the higher-level segments.
function setVelocity () {
vy += gravitySlider.value;
segment0.x += vx;
segment0.y += vy;
segment2.x += vx;
segment2.y += vy;
}
You can test this version if you want, but it won't be very exciting. There's no x velocity happening yet, and
gravity pulls the legs right through the floor. So, you need to check the floor to see whether the legs have
hit it, and that means it's time for collision detection.
Handling the Collision
To start, make
drawFrame
call another function:
checkFloor
. This happens after the calls to
walk
, so it
operates on the latest positions. We check only
segment1
and
segment3—
the lower-level segments—to
see whether they hit the floor. So, we pass them both to
checkFloor
.
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
cycle += speedSlider.value;
setVelocity();
walk(segment0, segment1, cycle);
walk(segment2, segment3, cycle + Math.PI);
checkFloor(segment1);
checkFloor(segment3);
segment0.draw(context);
segment1.draw(context);
segment2.draw(context);
segment3.draw(context);
speedSlider.draw(context);
thighRangeSlider.draw(context);
thighBaseSlider.draw(context);
calfRangeSlider.draw(context);
calfOffsetSlider.draw(context);
gravitySlider.draw(context);
}());
