sprite work

index.html

@@ -25,6 +25,8 @@
         <li>Ice: </li>
         <li>Cups: </li>
       </ul>
+
+      <button class="go-shopping-btn">Go shopping</button>
     </section>
 
     <section class="game_section">

index.js

@@ -66,11 +66,23 @@ const sprites = {
   ice: createSprite({
     source: 'ice.png'
   }),
+  pitcher: createSprite({
+    source: 'pitcher_full.png'
+  }),
   lemons: createSprite({
     source: 'lemons.png'
   }),
   grass: createSprite({
     source: 'grass.png'
+  }),
+  tree: createSprite({
+    source: 'tree.png'
+  }),
+  slide: createSprite({
+    source: 'slide.png'
+  }),
+  seesaw: createSprite({
+    source: 'seesaw.png'
   })
 };
 
@@ -112,10 +124,10 @@ function createCup(x, y, scale = 0.1) {
 
 // Game objects
 const cups = [
-  createCup(455, 250),
+  createCup(455, 325, 0.15),
-  createCup(485, 250),
+  createCup(495, 325, 0.15),
-  createCup(515, 250),
+  createCup(535, 325, 0.15),
-  createCup(545, 250),
+  createCup(575, 325, 0.15),
 
 ]
 
@@ -237,28 +249,54 @@ function drawInstance(instance) {
 function drawGround() {
   if (!sprites.grass.ready) return;
 
-  const pattern = ctx.createPattern(sprites.grass.image, 'repeat')
+  const pattern = ctx.createPattern(sprites.grass.image, 'repeat');
   ctx.fillStyle = pattern;
 
   const groundHeight = 250;
-  ctx.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight)
+  ctx.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight);
+}
+
+/**
+ * Draws an oval shadow.
+ *
+ * @param {number} x - Center x position
+ * @param {number} y - Center y position
+ * @param {number} radiusX - Horizontal radius
+ * @param {number} radiusY - Vertical radius
+ * @param {string} [color='rgba(0, 0, 0, 0.25)'] - Shadow color
+ */
+function drawShadow(x, y, radiusX, radiusY, color = 'rgba(0, 0, 0, 0.3)') {
+  ctx.beginPath();
+  ctx.ellipse(x, y, radiusX, radiusY, 0, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
 }
 
 function render() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
   drawGround();
+  drawSprite(sprites.tree, 600, 50, 0.25);
+  drawSprite(sprites.tree, 200, 50, 0.2);
+
+  // Slide on the right
+  drawSprite(sprites.slide, 880, 80, 0.4);
+
+  // Seesaw
+  drawSprite(sprites.seesaw, 200, 280, 0.30);
+
 
-  drawSprite(sprites.maker, 430, 140, 0.4);
+  // Shadow under the stand
-  drawSprite(sprites.stand, 350, 50, 0.5);
+  drawShadow(500, 360, 180, 50);
-  drawSprite(sprites.ice, 550, 190, 0.125);
+
+  drawSprite(sprites.maker, 430, 160, 0.6);
+  drawSprite(sprites.stand, 350, 50, 0.7);
+  drawSprite(sprites.pitcher, 620, 290, 0.3);
 
 
   // Draw all cup instances
   cups.forEach(cup => drawInstance(cup));
 
-  drawSprite(sprites.lemons, 360, 220, 0.1);
-
 }
 
 render();
@@ -268,5 +306,4 @@ setTimeout(() => {
   cups[0].fill();
   sprites.maker.frameIndex = 1;
   render();
-
 }, 1000);

style.css

@@ -64,3 +64,30 @@ canvas {
   display: block;
   pointer-events: none;
 }
+
+.go-shopping-btn {
+  font-family: 'Fredoka', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  background: linear-gradient(180deg, #FDB813 0%, #f5a800 100%);
+  color: #5C4632;
+  border: 3px solid #3f7a33;
+  border-radius: 12px;
+  padding: 10px 20px;
+  cursor: pointer;
+  box-shadow: 0 4px 0 #3f7a33;
+  transition: all 0.1s ease;
+  margin: 12px auto 0;
+  display: block;
+}
+
+.go-shopping-btn:hover {
+  background: linear-gradient(180deg, #ffe066 0%, #FDB813 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 0 #3f7a33;
+}
+
+.go-shopping-btn:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 0 #3f7a33;
+}