jump-and-game-loop

Add jump physics and a requestAnimationFrame loop to a Dino project.

Updated Mar 14, 2026

Search Tags:#javascript #game-loop #gravity #web-game #jump #dino #requestAnimationFrame

Ready to run

npx skills add https://github.com/waltstephen/VibeTeachMsc --skill jump-and-game-loop

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: jump-and-game-loop
Source: https://github.com/waltstephen/VibeTeachMsc/tree/main/skills/jump-and-game-loop
Command: npx skills add https://github.com/waltstephen/VibeTeachMsc --skill jump-and-game-loop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A minimal pattern for adding jump physics and a frame loop without overengineering.

Core Features & Use Cases

Jump physics with gravity and ground checks to prevent double-jumps
Lightweight requestAnimationFrame loop for smooth rendering
Easy integration into the Dino teaching project stage-2

Quick Start

Add a minimal jump with gravity in main.js and use a requestAnimationFrame loop to continuously update position while ensuring the player cannot double-jump.

Frequently Asked Questions about jump-and-game-loop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add jump physics and gravity to a JavaScript web game?▼

To add jump physics to a JavaScript web game, implement a simple vertical velocity (vy) and vertical position (y) state, update them in a requestAnimationFrame loop, and apply a ground check to prevent double-jumps.

What is the best way to prevent double-jumping in a JavaScript game loop?▼

The best way to prevent double-jumping in a JavaScript game loop is to add a ground check that clamps the player's landing position and restricts jump input until the player is safely back on the ground.

How does requestAnimationFrame work for smooth rendering in a dino game?▼

requestAnimationFrame works for smooth rendering in a dino game by continuously calling a frame loop function that updates player position and gravity state, ensuring reliable input handling and movement synchronization with the browser's refresh rate.

Can I implement a minimal game loop with gravity in a single-file main.js workflow?▼

Yes, you can implement a minimal game loop with gravity in a single-file main.js workflow by maintaining a lightweight requestAnimationFrame loop that tracks vy and y state, requiring no external dependencies.

Why does my character keep falling through the ground in a JavaScript web game?▼

Your character keeps falling through the ground because the game loop lacks a landing clamp and ground check, which are necessary to stop gravity accumulation and reset the vertical velocity when the player reaches the floor.

Do I need a physics engine to add simple jump mechanics to a web game?▼

No, you do not need a physics engine to add simple jump mechanics; a minimal pattern using basic vy and y state variables within a requestAnimationFrame loop provides reliable player input and movement without overengineering.