HELP

// use the color property of the frame for the stage color
F.color = yellow; // F is the frame!

// use the outerColor property for the color outside the stage
F.outerColor = blue;

// use a Page to make a gradient 
new Page(W, H, green, pink).addTo();

// ** DO THE STEPS ABOVE FIRST **
// A background picture can be scaled to the stage
// then center() and mov(x, y) or loc(x, y) can be used
new Pic("beach01")
   .scaleTo()
   .center();

// pictures can be scaled with sca() if you want
// sca(.5) is half as big, sca(2) is twice as big
// You can use center() and mov(x, y) or
// loc(x, y) or pos(x, y, RIGHT, BOTTOM), etc. 
// Store the bug in a variable to use later with sounds
const bug = new Pic("bug01")
   .sca(.5)
   .center()
   .drag(); 

// make a Container (an invisible holder)
const holder = new Container();

// add the gem 
new Pic("gem01").addTo(holder);

// scale the cartoon face to FIT in 60% the holder width 
// and center it in the container 
new Pic("cartoon02")
   .scaleTo(holder, 60) // 60% the size
   .center(holder);

// position the container and drag all of it together 
holder
   .pos(100,50,RIGHT,BOTTOM)
   .drag({all:true});

// To play a sound when pressing the bug (from above)
// use an event and play the sound in the event function
// Aud is short form for Audio - another way to say sound!
const sound = new Aud("powerup"); // make the sound once
bug.on("mousedown", ()=>{
   sound.play(); // play the sound every time we press the bug
}); 

// ** OPTION ONE - BASIC **
// This code works when we TEST to play a backing sound
// but will not work when we use FULL and SAVE - boo!
// Here we lower the volume and loop the backing sound.  
new Aud("backing").play(.1, true);

// ** OPTION TWO - PANE **
// This code works in TEST, FULL and SAVE. Yay!
// Here we play the backing sound once a Pane() is closed.
new Pane("START", yellow).show(()=>{
   new Aud("backing").play(.1, true);
});

// ** OPTION THREE - TOGGLE **
// This code lets people turn on and off the sound.
// Do not worry if this is complicated looking 
// it will just help you pause or play the sound.
let backingSound;
const toggle = new Toggle({
   label:"music",
   startToggled:false
})
   .sca(.7)
   .pos(40,40,LEFT,BOTTOM)
   .change(()=>{
      if (!backingSound) {
         backingSound = new Aud("backing").play(.1, true);
      }
      backingSound.paused = !toggle.toggled;
   }); 
    

// ** OPTION FOUR - BUTTON **
// This code uses a Button to toggle sound.
// We use pizzazz to make sound icons 
// or you could use label:"play" and toggle:"mute"
// We use the tap() method which is like on("click", function).
let backingSound;
const button = new Button({
   width:60,
   height:60,
   corner:0,
   backgroundColor:purple,
   rollBackgroundColor:pink,
   icon:makeIcon("sound", white),
   toggleIcon:makeIcon("mute", white)
}).pos(50,50,LEFT,BOTTOM).tap(()=>{
   if (!backingSound) {
      backingSound = new Aud("backing").play(.1, true);
   }
   backingSound.paused = !button.toggled;
});
    

// The Sprite is made from a SpriteSheet.
// A SpriteSheet has columns and rows.
// The columns and rows are beneath the menu picture.
// We must run() the sprite as well 
// which is like animate() but for Sprites.
// The longer the time the slower the animation.
new Sprite("monkey", 4, 4)
   .center()
   .run({time:1, loop:true});

// Here we load from the ZIM assets folder.
// See assets:  https://zimjs.org/assets/ 

PATH = "https://zimjs.org/assets/"; // tell ZIM where the assets are

new Pic("nature03.jpg")
   .scaleTo()
   .center();
const start = new Aud("start.mp3");
const bike = new Pic("transport03.png")
   .reg(CENTER,BOTTOM)
   .pos(0,100,CENTER,BOTTOM)
   .tap(()=>{
      start.play();
      bike.animate({x:-200}, 3, "backIn");
});

// For a Sprite, we have to preload the asset
// We normally load assets in the ZIM Frame()
// but the Frame is already made in Slate
// so instead, we can use loadAssets()

// this sprite is packed so needs json data
F.loadAssets(["spaceguy.png", "spaceguy.json"], "https://zimjs.org/assets/");
F.on("complete", ()=>{
   new Sprite({json:"spaceguy.json"})
      .sca(2)
      .center()
      .run({loop:true});
});

// See sidescroller examples with mouse:
//  Sidescroller with Mouse 
// with keyboard and shooting:
//  Sidescroller with Keys