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
- Wikipedia, Procedural generation: https://en.wikipedia.org/wiki/Procedural_generation
Games from this post
More posts
- I deployed, and the old page kept showing for an hour Oct 25, 2026
- Why there is always a cloud within reach in Cloud Hop Oct 25, 2026
- I removed the background and a pink edge was left Oct 25, 2026
- Three tries in one day to decide what not to deploy Oct 25, 2026
- A ten-line FPS counter for browser games Oct 25, 2026
