diff --git a/docs/static/skillmap/sparks/bg.gif b/docs/static/skillmap/sparks/bg.gif index 56d55676ef7..804424a17b2 100644 Binary files a/docs/static/skillmap/sparks/bg.gif and b/docs/static/skillmap/sparks/bg.gif differ diff --git a/docs/static/skillmap/sparks/cave.gif b/docs/static/skillmap/sparks/cave.gif index bdff7bf5552..561a436b658 100644 Binary files a/docs/static/skillmap/sparks/cave.gif and b/docs/static/skillmap/sparks/cave.gif differ diff --git a/docs/static/skillmap/sparks/final.gif b/docs/static/skillmap/sparks/final.gif new file mode 100644 index 00000000000..ceba2249b8d Binary files /dev/null and b/docs/static/skillmap/sparks/final.gif differ diff --git a/docs/static/skillmap/sparks/game-jr.png b/docs/static/skillmap/sparks/game-jr.png new file mode 100644 index 00000000000..33eef27aa0e Binary files /dev/null and b/docs/static/skillmap/sparks/game-jr.png differ diff --git a/docs/static/skillmap/sparks/harder.gif b/docs/static/skillmap/sparks/harder.gif new file mode 100644 index 00000000000..249c00a9976 Binary files /dev/null and b/docs/static/skillmap/sparks/harder.gif differ diff --git a/docs/static/skillmap/sparks/kindling.gif b/docs/static/skillmap/sparks/kindling.gif index 3667c0821f8..e48018ca27a 100644 Binary files a/docs/static/skillmap/sparks/kindling.gif and b/docs/static/skillmap/sparks/kindling.gif differ diff --git a/docs/static/skillmap/sparks/lose.gif b/docs/static/skillmap/sparks/lose.gif new file mode 100644 index 00000000000..0c69bb333cd Binary files /dev/null and b/docs/static/skillmap/sparks/lose.gif differ diff --git a/docs/static/skillmap/sparks/play-again.gif b/docs/static/skillmap/sparks/play-again.gif new file mode 100644 index 00000000000..92cde5a9b9d Binary files /dev/null and b/docs/static/skillmap/sparks/play-again.gif differ diff --git a/docs/static/skillmap/sparks/play-win.gif b/docs/static/skillmap/sparks/play-win.gif new file mode 100644 index 00000000000..a5fb1ce5707 Binary files /dev/null and b/docs/static/skillmap/sparks/play-win.gif differ diff --git a/docs/static/skillmap/sparks/playing.gif b/docs/static/skillmap/sparks/playing.gif new file mode 100644 index 00000000000..396fadb1a52 Binary files /dev/null and b/docs/static/skillmap/sparks/playing.gif differ diff --git a/docs/static/skillmap/sparks/sparking.gif b/docs/static/skillmap/sparks/sparking.gif new file mode 100644 index 00000000000..b86be6249f9 Binary files /dev/null and b/docs/static/skillmap/sparks/sparking.gif differ diff --git a/docs/static/skillmap/sparks/timer.gif b/docs/static/skillmap/sparks/timer.gif new file mode 100644 index 00000000000..b4246aad774 Binary files /dev/null and b/docs/static/skillmap/sparks/timer.gif differ diff --git a/docs/static/skillmap/sparks/win.gif b/docs/static/skillmap/sparks/win.gif new file mode 100644 index 00000000000..1946a48de9f Binary files /dev/null and b/docs/static/skillmap/sparks/win.gif differ diff --git a/docs/static/skillmap/sparks/wind.gif b/docs/static/skillmap/sparks/wind.gif new file mode 100644 index 00000000000..a975982c094 Binary files /dev/null and b/docs/static/skillmap/sparks/wind.gif differ diff --git a/docs/test/tutorials/layla-jr.md b/docs/test/tutorials/lyla-jr.md similarity index 99% rename from docs/test/tutorials/layla-jr.md rename to docs/test/tutorials/lyla-jr.md index cc3da2d4693..67b78379758 100644 --- a/docs/test/tutorials/layla-jr.md +++ b/docs/test/tutorials/lyla-jr.md @@ -22,7 +22,7 @@ You should see Lyla on the screen. ## {Step 3} -**Click the circles for other players** +**Click the circles to add other players** ![The circles allow you to control other players](/static/tutorials/lyla/circles.gif "Click the circles to control other players." ) diff --git a/docs/test/tutorials/layla.md b/docs/test/tutorials/lyla.md similarity index 100% rename from docs/test/tutorials/layla.md rename to docs/test/tutorials/lyla.md diff --git a/docs/test/tutorials/sparks-jr.md b/docs/test/tutorials/sparks-jr.md index 0cdd4ed1709..9390815122b 100644 --- a/docs/test/tutorials/sparks-jr.md +++ b/docs/test/tutorials/sparks-jr.md @@ -1,8 +1,9 @@ # Sparks Flying (Jr.) ### @explicitHints true +### @flyoutOnly true -## prehistoric @showdialog +## Sparks Flying @showdialog Let's make a game! @@ -16,6 +17,14 @@ Let's make a game! **Add your first block** + +```block +scene.setBG(img`.`) +``` + +--- + + ![Set the background with a block from the scene category](/static/skillmap/sparks/bg.gif "Let's add a background") @@ -23,7 +32,7 @@ Let's make a game! ```blocks //@highlight -scene.setBackgroundImage(img`.`) +scene.setBG(img`.`) ``` @@ -39,7 +48,8 @@ scene.setBackgroundImage(img`.`) #### ~ tutorialhint ```blocks -scene.setBackgroundImage(sparks.background) +//@highlight +scene.setBG(sparks.background) ``` @@ -49,7 +59,7 @@ scene.setBackgroundImage(sparks.background) **Look at the game window!** -![Look for the game window in the lower right](/static/skillmap/sparks/game.png "Click the mini game window to pop open the bigger game window.") +![Look for the game window in the lower right](/static/skillmap/sparks/game-jr.png "Click the mini game window to pop open the bigger game window.") You should see a cave background. @@ -62,60 +72,294 @@ You should see a cave background. **Add kindling!** +```block +sparksjr.addFire() +``` + +--- + ![Add a pile of kindling](/static/skillmap/sparks/kindling.gif "Let's add a kindling sprite") #### ~ tutorialhint ```blocks -scene.setBackgroundImage(sparks.background) +scene.setBG(sparks.background) +//@highlight +sparksjr.addFire() +``` + + + + +## {6. Get Clicking} + + +**Click for Sparks** + + +```blocks + sparksjr.onB(function () { + sparksjr.changeScoreOverride(1) + }) +``` + +--- + +![Add a pile of kindling](/static/skillmap/sparks/sparking.gif "Let's add a kindling sprite") + + +#### ~ tutorialhint + +```blocks +//@highlight + sparksjr.onB(function () { + sparksjr.changeScoreOverride(1) + }) +``` + + + + + +## {7. Play Again!} + +**Play your game** + +Click the (B) button as fast as you can! + +Do you see the sparks? + + +--- + +![Add a pile of kindling](/static/skillmap/sparks/playing.gif "Let's add a kindling sprite") + + + + + + +## {8. Add a Win} + +**Add a way to win!** + +```blocks + sparksjr.onScore(30, function () { + sparksjr.fireWin() + }) +``` + + +--- + +![Add a pile of kindling](/static/skillmap/sparks/win.gif "Let's add a kindling sprite") + + +#### ~ tutorialhint + +```blocks +//@highlight +sparksjr.onScore(30, function () { + sparksjr.fireWin() +}) +``` + + + + +## {9. Play Another Time!} + +**Play until you win!** + +Click the (B) button until you win. + + +--- + +![Add a pile of kindling](/static/skillmap/sparks/play-win.gif "Let's add a kindling sprite") + + + + +## {10. Add the Time} + + +**Add a timer!** + +```block +stopwatch.stopJr() +``` + +--- + +![Add a pile of kindling](/static/skillmap/sparks/timer.gif "Let's add a kindling sprite") + + +#### ~ tutorialhint + +```blocks +scene.setBG(sparks.background) +sparksjr.addFire() +//@highlight +stopwatch.stopJr() + +``` + + + + + +## {11. Yet Another Time!} + +**How long does it take you to win?** + +Your final time is your score! + + +--- + +![Add a pile of kindling](/static/skillmap/sparks/play-again.gif "Let's add a kindling sprite") + + + + + +## {12. Make it Harder} + + +**Make it harder!** + +This will take points away every second! + +```blocks + stopwatch.onUpdateInterval3(1, function () { + sparksjr.changeScoreOverride(-1) + }) +``` + +--- + +![Add a pile of kindling](/static/skillmap/sparks/wind.gif "Let's add a kindling sprite") + + +#### ~ tutorialhint + +```blocks + //@highlight -sparksjr.addFire(img`.`) + stopwatch.onUpdateInterval3(1, function () { + sparksjr.changeScoreOverride(-1) + }) + ``` -## {6. Choose the kindling} -**Choose the kindling pile from the gallery** -![Choose the biggest kindling pile](/static/skillmap/sparks/kindling1.gif "Let's add a kindling sprite") + +## {13. Yet Another Other Time!} + +**Does it take longer to win now?** + +--- + +![Add a pile of kindling](/static/skillmap/sparks/harder.gif "Let's add a kindling sprite") + + +## {14. Sometimes You Lose} + + +**Add a way to lose!** + + +```blocks + sparksjr.onScore2(-5, function () { + sparksjr.fireLoss() + }) +``` + +--- + +![Add a pile of kindling](/static/skillmap/sparks/lose.gif "Let's add a kindling sprite") + #### ~ tutorialhint ```blocks -scene.setBackgroundImage(sparks.background) + //@highlight -sparksjr.addFire(sparks.pile1) + sparksjr.onScore2(-5, function () { + sparksjr.fireLoss() + }) + ``` -## {8. Play!} +## {15. Yet Another Other Time!} + +**Let the sparks run out** + +You should lose when 🔥 gets to -5. + + +--- -- :binoculars: Take a look at what you made! +![Add a pile of kindling](/static/skillmap/sparks/final.gif "Let's add a kindling sprite") -How many points can you get in twenty seconds? -## {9. Finale} -**🪵 Way to Go 🪵** +## {6. Play!} -You have a clicker game! +**Play your finished game!** + +What is your fastest time? + + +--- + +![Add a pile of kindling](/static/skillmap/sparks/kindling.gif "Let's add a kindling sprite") -When you're ready, click **Done** to finish this tutorial and share your game. + + +## {7. Finale} + +**🔥 Way to Go 🔥 ** + +You made an Arcade game! + +--- + + +When you're ready, click **Done** to finish this tutorial and share what you made. + ```blockconfig.global sparksjr.changeScoreOverride(1) + sparksjr.onB(function () { + sparksjr.changeScoreOverride(1) + }) + sparksjr.onScore(30, function () { + sparksjr.fireWin() + }) + stopwatch.onUpdateInterval3(1, function () { + sparksjr.changeScoreOverride(-1) + }) + sparksjr.onScore2(-5, function () { + sparksjr.fireLoss() + }) ``` + ```ghost sparksjr.onB(function () { sparksjr.changeScoreOverride(1) @@ -123,12 +367,13 @@ sparksjr.onB(function () { sparksjr.onScore(30, function () { sparksjr.fireWin() }) -sparksjr.onScore(-5, function () { +sparksjr.onScore2(-5, function () { sparksjr.fireLoss() }) -scene.setBackgroundImage(sparks.background1) -sparksjr.addFire(sparks.pile1) -game.onUpdateInterval(1000, function () { +scene.setBG(sparks.background1) +sparksjr.addFire() +stopwatch.stopJr() +stopwatch.onUpdateInterval3(1, function () { sparksjr.changeScoreOverride(-1) }) @@ -138,10 +383,7 @@ game.onUpdateInterval(1000, function () { ```package -arcade-carnival=github:microsoft/arcade-carnival -arcade-storytelling=github:microsoft/arcade-storytelling -arcade-text=github:microsoft/arcade-text -sparks=github:kiki-lee/sparks#v0.0.9 -sparksjr=github:kiki-lee/sparksjr#v0.0.2 +sparksjr=github:kiki-lee/sparksjr#v0.1.2 +sparks=github:kiki-lee/sparks#v0.1.1 ```