HTML6 GamesFree Web Games / devlog

No install. Just play.

Free mini games right in your browser. Sign in to save your records to your account and pick up on any device.

All games
All games
All dev log posts

Why the crumbling clouds never sit on the path

Oct 25, 2026 Β· Game design Β· ν•œκ΅­μ–΄

Cloud Hop has three kinds of clouds. A white cloud bounces you, and a blue cloud moves left and right and also bounces you. A gray cloud crumbles and disappears when you step on it, and the chick doesn't bounce; it just falls. This post is about how the gray cloud got into the game.

Cloud Hop is drawn on a <canvas>, and clouds keep being created at random positions as you climb. The horizontal position is random, and the vertical gap is chosen so that a jump can reach it (that rule is in the previous post). The cloud in this post is an obstacle added on top of that rule.

A game that only goes up is monotonous. With clouds that vanish when you step on them, you have to choose which cloud to land on, and you can't look away even in mid-jump. So I added the gray cloud.

The problem starts at the moment this cloud becomes part of the path. As the last post explained, Cloud Hop caps the gap between clouds so that the next cloud can always be reached by a jump. If that rule applied to gray clouds too, you could get a board like this: the next cloud is only a gray one. You reach it, don't bounce, and fall. The path upward is gone. The player did nothing wrong and the run ends.

So I split the clouds into two kinds. The clouds that form the path are the white and blue ones. Their gaps are chosen so that you can always climb using only them. The gray cloud is added on top as a bonus, independent of the path. When a path cloud is placed, there is a chance that one more cloud is placed 25 to 45px above it. Shortened from the game code:

if (rnd() < Math.min(0.3, 0.08 + height / 2500)) {
  plats.push({ x: rand(PW / 2, W - PW / 2), y: y - rand(25, 45), kind: 'crumble' });
}

The chance starts at 8%, grows with height and stops at 30%. However many gray clouds there are, the path is unchanged, so a board you can't climb never appears.

It is still a trap

Being placed independently of the path doesn't make it meaningless. The gray cloud sits right above a path cloud, so it stands out. It is close, so you want to step on it, and when you do you don't bounce, you fall. When you fall there is a path cloud below, so you get another chance. But you lose time, and near moving clouds or storm clouds that short time is dangerous.

A trap that doesn't force a failure but gives you one more choice. I think that difference separates a fair trap from an unfair one.

The gray cloud must not be mistaken for a white one. If it is, people step on it without knowing why and fall. I drew it as a cracked beige-gray and added crumbs. The storm cloud is a dark purplish gray and was similar in color to the gray cloud, and the two were confused on a phone, so I pushed the brightness and color of the storm cloud further apart.

How the cloud gaps are chosen is covered in another post.

References

Games from this post

Cloud HopBounce from cloud to cloud and climb as high as you can. Gray clouds fall apart, and storm clouds must be stomped from above! Play

More posts

Add to Home Screen

  1. Tap the Share button at the bottom of the screen (top on iPad). It looks like a square with an arrow pointing up.
  2. Scroll down and tap "Add to Home Screen".
  3. Tap "Add" at the top right. The HTML6 Games icon appears on your home screen.

This works in Safari. Opened from the home screen, it runs without the address bar, like an app, and even offline.