From 68db4a923f65003f4413f1ddaba32807dc9bffca Mon Sep 17 00:00:00 2001
From: Chris Wanstrath <chris@ozmm.org>
Date: Sat, 27 Sep 2025 20:09:13 -0700
Subject: [PATCH] moving clouds

---
 app/nose/bin/game.tsx | 38 ++++++++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/app/nose/bin/game.tsx b/app/nose/bin/game.tsx
index 61b8f4a..9ba74c2 100644
--- a/app/nose/bin/game.tsx
+++ b/app/nose/bin/game.tsx
@@ -10,6 +10,13 @@ const SPEED = 10
 let x = rng(0, WIDTH)
 let y = rng(0, HEIGHT)
 
+type Cloud = { x: number; y: number; speed: number }
+const clouds: Cloud[] = [
+  { x: 200, y: 100, speed: 0.7 },
+  { x: 500, y: 150, speed: 0.5 },
+  { x: 50, y: 220, speed: 0.5 },
+]
+
 export function init() { console.log("init") }
 
 export function update(_delta: number, input: InputState) {
@@ -18,6 +25,13 @@ export function update(_delta: number, input: InputState) {
 
   if (input.pressed.has("ArrowLeft") || input.pressed.has("a")) x -= 1 * SPEED
   if (input.pressed.has("ArrowRight") || input.pressed.has("d")) x += 1 * SPEED
+
+  for (const cloud of clouds) {
+    cloud.x += cloud.speed
+    if (cloud.x > WIDTH + 80) { // off screen
+      cloud.x = -80
+    }
+  }
 }
 
 export function draw(ctx: GameContext) {
@@ -32,13 +46,16 @@ export function draw(ctx: GameContext) {
   // grass
   ctx.rectfill(0, 400, ctx.width, ctx.height, "green")
 
+  // clouds
+  for (const cloud of clouds) {
+    drawCloud(ctx, cloud.x, cloud.y)
+  }
+
   // house body
   ctx.rectfill(200, 250, 400, 400, "sienna")
 
   // roof (triangle-ish with lines)
-  ctx.line(200, 250, 300, 150, "brown")
-  ctx.line(400, 250, 300, 150, "brown")
-  ctx.line(200, 250, 400, 250, "brown")
+  ctx.trianglefill(200, 250, 400, 250, 300, 150, "brown")
 
   // door
   ctx.rectfill(280, 320, 320, 400, "darkred")
@@ -47,13 +64,22 @@ export function draw(ctx: GameContext) {
   ctx.rectfill(220, 270, 260, 310, "lightblue")
   ctx.rectfill(340, 270, 380, 310, "lightblue")
 
+  // player
+  ctx.circfill(x, y, 10, "magenta")
+  ctx.circ(x, y, 11, "white")
+
   // tree trunk
   ctx.rectfill(500, 300, 540, 400, "saddlebrown")
+
   // tree top (a few circles for puffiness)
   ctx.circfill(520, 280, 40, "darkgreen")
   ctx.circfill(480, 300, 40, "darkgreen")
   ctx.circfill(560, 300, 40, "darkgreen")
-
-  ctx.circfill(x, y, 10, "magenta")
-  ctx.circ(x, y, 11, "white")
 }
+
+function drawCloud(ctx: GameContext, x: number, y: number) {
+  ctx.circfill(x, y, 30, "white")
+  ctx.circfill(x + 30, y - 10, 40, "white")
+  ctx.circfill(x + 60, y, 30, "white")
+  ctx.circfill(x + 30, y + 10, 35, "white")
+}
\ No newline at end of file