← Wszystkie przykłady

Worek pełen rzeczy

Worek to przewijany Container (z overflow: scroll). Trzeba go przewinąć, wyjąć wszystko i rozłożyć: owoce do koszyka, zabawki do pudełka; zły ruch odkłada rzecz z powrotem do worka.

Schemat
v2.0
Wymagane funkcje
element.imageelement.textelement.componentelement.containerelement.targetvisual.textcomponent.draggablecontainer.layoutcontainer.childrentarget.capacitytarget.snaprule.placeaction.play-soundaction.lockaction.returnaction.emit-particles
Componenty
imagetextcontainertargetcomponent

Jak otworzyć w edytorze

  1. Kliknij Otwórz w edytorze — GS Editor otworzy się z wczytanym ćwiczeniem (scena i zasoby).
  2. Albo kliknij Pobierz ćwiczenie (ZIP z projekt.json, images/ i sounds/) i w oknie startowym edytora wybierz Otwórz ZIP.

Plik ćwiczenia

Pokaż JSON (11 012 znaków)
{
  "schema": "2.0",
  "requires": [
    "element.image",
    "element.text",
    "element.component",
    "element.container",
    "element.target",
    "visual.text",
    "component.draggable",
    "container.layout",
    "container.children",
    "target.capacity",
    "target.snap",
    "rule.place",
    "action.play-sound",
    "action.lock",
    "action.return",
    "action.emit-particles"
  ],
  "id": "scrolling-bag",
  "size": {
    "width": 1200,
    "height": 675
  },
  "languages": [
    "pl",
    "en"
  ],
  "defaultLanguage": "pl",
  "assets": [
    {
      "id": "meadow",
      "kind": "image",
      "src": {
        "default": "images/meadow.png"
      }
    },
    {
      "id": "sack",
      "kind": "image",
      "src": {
        "default": "images/sack.png"
      }
    },
    {
      "id": "basket",
      "kind": "image",
      "src": {
        "default": "images/basket.png"
      }
    },
    {
      "id": "box",
      "kind": "image",
      "src": {
        "default": "images/box.png"
      }
    },
    {
      "id": "apple",
      "kind": "image",
      "src": {
        "default": "images/apple.png"
      }
    },
    {
      "id": "pear",
      "kind": "image",
      "src": {
        "default": "images/pear.png"
      }
    },
    {
      "id": "banana",
      "kind": "image",
      "src": {
        "default": "images/banana.png"
      }
    },
    {
      "id": "strawberry",
      "kind": "image",
      "src": {
        "default": "images/strawberry.png"
      }
    },
    {
      "id": "cherries",
      "kind": "image",
      "src": {
        "default": "images/cherries.png"
      }
    },
    {
      "id": "ball",
      "kind": "image",
      "src": {
        "default": "images/ball.png"
      }
    },
    {
      "id": "block",
      "kind": "image",
      "src": {
        "default": "images/block.png"
      }
    },
    {
      "id": "duck",
      "kind": "image",
      "src": {
        "default": "images/duck.png"
      }
    },
    {
      "id": "correct",
      "kind": "audio",
      "src": {
        "default": "sounds/correct.wav"
      }
    },
    {
      "id": "wrong",
      "kind": "audio",
      "src": {
        "default": "sounds/wrong.wav"
      }
    },
    {
      "id": "pick-up",
      "kind": "audio",
      "src": {
        "default": "sounds/pick-up.wav"
      }
    },
    {
      "id": "drop",
      "kind": "audio",
      "src": {
        "default": "sounds/drop.wav"
      }
    },
    {
      "id": "win",
      "kind": "audio",
      "src": {
        "default": "sounds/win.wav"
      }
    }
  ],
  "elements": [
    {
      "id": "background",
      "type": "image",
      "rect": [
        0,
        0,
        1200,
        675
      ],
      "layer": 0,
      "visual": {
        "type": "image",
        "asset": "meadow"
      }
    },
    {
      "id": "instruction",
      "type": "text",
      "rect": [
        72,
        24,
        1056,
        80
      ],
      "layer": 5,
      "visual": {
        "type": "text",
        "text": {
          "pl": "Worek jest pełen rzeczy. Przewiń go i wyjmij wszystko: owoce do <b>koszyka</b>, zabawki do <b>pudełka</b>.",
          "en": "The sack is full of things. Scroll it and take everything out: fruit in the <b>basket</b>, toys in the <b>box</b>."
        },
        "size": 26,
        "color": "#5a3a22",
        "align": "center"
      }
    },
    {
      "id": "sack",
      "type": "image",
      "rect": [
        50,
        235,
        290,
        400
      ],
      "layer": 1,
      "visual": {
        "type": "image",
        "asset": "sack"
      }
    },
    {
      "id": "bag",
      "type": "container",
      "rect": [
        90,
        413,
        210,
        216
      ],
      "layer": 2,
      "layout": {
        "orientation": "vertical",
        "gap": 8,
        "padding": 8,
        "align": "center",
        "overflow": "scroll"
      },
      "children": [
        "apple",
        "ball",
        "pear",
        "block",
        "banana",
        "duck",
        "strawberry",
        "cherries"
      ],
      "on": {
        "child-added": [
          {
            "do": "play-sound",
            "asset": "drop"
          }
        ]
      }
    },
    {
      "id": "basket",
      "type": "target",
      "rect": [
        460,
        330,
        300,
        270
      ],
      "layer": 1,
      "visual": {
        "type": "image",
        "asset": "basket"
      },
      "capacity": "many",
      "snap": {
        "mode": "none"
      },
      "on": {
        "correct": [
          {
            "do": "play-sound",
            "asset": "correct"
          },
          {
            "do": "lock",
            "target": "dropped"
          },
          {
            "do": "emit-particles",
            "target": "dropped"
          }
        ],
        "wrong": [
          {
            "do": "play-sound",
            "asset": "wrong"
          },
          {
            "do": "return",
            "target": "dropped"
          }
        ]
      }
    },
    {
      "id": "box",
      "type": "target",
      "rect": [
        860,
        330,
        270,
        270
      ],
      "layer": 1,
      "visual": {
        "type": "image",
        "asset": "box"
      },
      "capacity": "many",
      "snap": {
        "mode": "none"
      },
      "on": {
        "correct": [
          {
            "do": "play-sound",
            "asset": "correct"
          },
          {
            "do": "lock",
            "target": "dropped"
          },
          {
            "do": "emit-particles",
            "target": "dropped"
          }
        ],
        "wrong": [
          {
            "do": "play-sound",
            "asset": "wrong"
          },
          {
            "do": "return",
            "target": "dropped"
          }
        ]
      }
    },
    {
      "id": "apple",
      "type": "component",
      "rect": [
        145,
        421,
        100,
        100
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "apple"
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "return",
            "target": "self"
          }
        ]
      }
    },
    {
      "id": "ball",
      "type": "component",
      "rect": [
        145,
        529,
        100,
        100
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "ball"
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "return",
            "target": "self"
          }
        ]
      }
    },
    {
      "id": "pear",
      "type": "component",
      "rect": [
        145,
        637,
        100,
        100
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "pear"
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "return",
            "target": "self"
          }
        ]
      }
    },
    {
      "id": "block",
      "type": "component",
      "rect": [
        145,
        745,
        100,
        100
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "block"
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "return",
            "target": "self"
          }
        ]
      }
    },
    {
      "id": "banana",
      "type": "component",
      "rect": [
        145,
        853,
        100,
        100
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "banana"
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "return",
            "target": "self"
          }
        ]
      }
    },
    {
      "id": "duck",
      "type": "component",
      "rect": [
        145,
        961,
        100,
        100
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "duck"
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "return",
            "target": "self"
          }
        ]
      }
    },
    {
      "id": "strawberry",
      "type": "component",
      "rect": [
        145,
        1069,
        100,
        100
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "strawberry"
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "return",
            "target": "self"
          }
        ]
      }
    },
    {
      "id": "cherries",
      "type": "component",
      "rect": [
        145,
        1177,
        100,
        100
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "cherries"
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "return",
            "target": "self"
          }
        ]
      }
    }
  ],
  "rule": {
    "kind": "place",
    "pairs": [
      {
        "components": [
          "apple",
          "pear",
          "banana",
          "strawberry",
          "cherries"
        ],
        "targets": [
          "basket"
        ]
      },
      {
        "components": [
          "ball",
          "block",
          "duck"
        ],
        "targets": [
          "box"
        ]
      }
    ]
  },
  "on": {
    "completed": [
      {
        "do": "play-sound",
        "asset": "win"
      }
    ]
  }
}