In the editor (the file I created) you’ll find a single file named dino_clone.html.

Save/export that file to your machine (or run it directly from PyCharm).

In PyCharm: Right-click the file → Open in Browser (or use the built-in preview).
You can also open the saved .html in any browser.

Play with it: press Space or ↑ to jump, or tap the game area on mobile.

Step-by-step explanation (beginner friendly)

I'll explain the file in logical chunks: HTML structure, CSS styling, and
JavaScript logic. I’ll also explain how to run it and how to change game behavior.

1) HTML — the structure of the page

HTML creates the elements that the user sees and interacts with.

Key parts:

<div id="game" class="game-area"> — the game stage. Everything (dino, obstacles,

ground) lives here.

<div id="dino" class="dino"></div> — the player character. It's a simple block that
we animate.

<div id="obstacles" class="obstacles"></div> — a container where obstacles (cacti)

are inserted dynamically.

<div class="ground"></div> — the ground strip at the bottom.

<div id="overlay" class="overlay">...</div> — a start / game over overlay with a

Start/Restart button.

HUD elements: #score and #highScore show the current and best score.

Why split into DOM elements?

The HTML is the blueprint. JavaScript will modify these elements (position,
appearance, add obstacles). CSS makes them look good.

2) CSS — visuals, layout, and small animations

The CSS file does the styling; here are the important pieces explained simply:

CSS variables (:root) at the top let you change theme values in one place (e.g., --
ground-height, --accent).

.game-area styles the stage (size, rounded corners, subtle background).

.dino styles the player block — rounded rectangle with two tiny pseudo-elements
(::before and ::after) that act as legs. Those pseudo elements animate with
@keyframes run to simulate running.

.dino.jump pauses the leg animation while jumping (so legs don't keep "running"
mid-air).

.obstacle styles the cactus block. Obstacles are simple rectangles with a color
gradient and shadow for a polished look.
.overlay is a translucent layer shown at start and on game over.

Performance note:

The CSS uses will-change: transform on moving elements. That hints to the browser
to use GPU acceleration for smoother animations.

3) JavaScript — the game brain (detailed)

This is where the behavior lives. I’ll go line by line conceptually.

a) CONFIG — tweak game feel

At the top of the script there’s a CONFIG object:

const CONFIG = {
gravity: 2500, // px/s^2 — how fast dino falls
jumpPower: 900, // px/s initial upward velocity on jump
initialSpeed: 420, // px/s obstacle speed at start
speedIncrease: 7, // px/s added for each 100 score
spawnIntervalMin/Max: // how often obstacles appear
}

Change these numbers to make the game floatier, jumpier, faster, etc.

b) DOM references and state

We grab the elements we need with document.getElementById(...) and set up game

variables:

running — is the game currently playing?

speed — current obstacle speed (increases as score increases).

score, highScore — score tracking (highScore is saved to localStorage so it

persists between sessions).

obstacles — an array of obstacle objects we manage.

c) Physics for the dino (realistic jump)

The dino is simulated with a simple physics model:

dino.vy is the vertical velocity (pixels per second).

dino.y is height above the ground (px).

Each frame: dino.vy -= gravity * dt and dino.y += dino.vy * dt.

When dino.y <= 0 we snap it back to ground and mark it grounded.

This is why the jump feels smooth and natural.

Why physics? Because it makes animation frame-rate independent and predictable.

d) The game loop — requestAnimationFrame

We use requestAnimationFrame(loop) for smooth animation. Each animation frame we:

Compute dt (delta time in seconds) since last frame.

Call update(dt) to update game state (dino, spawn obstacles, move obstacles, detect
collisions).

Call render() to apply visual transforms (move dino and obstacles).

Why requestAnimationFrame? It synchronizes to the browser refresh and is more

efficient & smoother than setInterval.

e) Spawning & moving obstacles

Obstacles are created as DOM elements and appended to #obstacles.

Each obstacle has an x position tracked in JavaScript; every update we decrease x

by speed * dt.

Obstacles are removed once they're off-screen.

Spawn timing:

A randomized interval between spawnIntervalMin and spawnIntervalMax ensures

unpredictable spacing like the real game.

As the game gets faster, the spawn interval is slightly reduced for difficulty.

f) Collision detection (game over)

We check collision each frame using getBoundingClientRect() for both dino and
obstacle DOM nodes and test rectangle overlap (rectsOverlap). If they overlap:
endGame() is called.

Why use getBoundingClientRect()? It’s simple and reliable — good for a beginner
version. (For more performance you could track coordinates purely in JS and avoid
layout reads.)

g) Score & difficulty scaling

Score increases by dt * 100 each frame (so it grows smoothly).

Every 100 points, speed increases by CONFIG.speedIncrease — that makes the game
harder over time.

High score is saved to localStorage and shown in HUD.

h) Input handling

Keyboard: Space or ArrowUp to jump (we call e.preventDefault() to stop page

scrolling).

Touch / Pointer: Tap anywhere in the game area to jump or to start the game.

If the game is not running and a jump input happens, we start the game
automatically (so you can tap or press Space to start).

i) Start / Restart

The overlay shows “Press Space or Tap to Start”. Starting hides overlay and starts
the animation loop.

On game over the overlay shows “Game Over” and the button text changes to Restart.

4) How to run it in PyCharm (practical)

Save the canvas file or copy the file content to a new file dino_clone.html inside
your PyCharm project.

Right-click dino_clone.html → Open in Browser (PyCharm supports this).

Or open the file directly from your file manager in Chrome/Firefox.

If you prefer live reloading while editing, install a Live Server plugin/extension
for your editor and serve the folder.

5) How to tweak game behavior (easy changes)

Make the jump higher: increase CONFIG.jumpPower.

Make gravity weaker: decrease CONFIG.gravity.

Make obstacles spawn faster: lower CONFIG.spawnIntervalMin / spawnIntervalMax.

Make the game start faster: increase CONFIG.initialSpeed.

To add multiple obstacle types, modify createObstacle() to randomly choose sizes,

shapes or different CSS classes.

6) Next steps / improvements (ideas to try)

Replace the simple shapes with sprites (images) for a closer chrome look.

Add sound effects (jump / hit / score milestone).

Add more obstacle types and spacing logic.

Add parallax background and day/night cycle.

Add pause button and mobile gestures (swipe down to duck).

Save more metadata server-side (leaderboards) — requires a backend.

7) Debugging tips (if something goes wrong)

Open Developer Tools (F12) → Console for error messages.

If the dino doesn’t jump: confirm the keyboard event triggers (press keys while the
game area has focus).

If obstacles don't appear, check obstacles array length in console and inspect DOM
— new .obstacle elements should be appended.

If scoring looks odd, check dt and score updates in the console.

If you want, I can:

Walk you through one specific tweak (e.g., make the dino jump higher) and show the
exact line to change.
Add sound effects (I can embed short base64 sounds into the HTML).

Add a sprite image (you could upload an image and I’ll show how to integrate it).

Which follow-up would you like?