From 6b4f6afe9a3e59a8e561d08ac64d7e3ba9538393 Mon Sep 17 00:00:00 2001 From: PomPomMom <152030788+PomPomMom@users.noreply.github.com> Date: Mon, 17 Feb 2025 13:12:18 -0700 Subject: [PATCH 1/5] Update skillmap.md Starting to update my first skillmap --- skillmap.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/skillmap.md b/skillmap.md index e77d8bf..6c436bd 100644 --- a/skillmap.md +++ b/skillmap.md @@ -1,9 +1,9 @@ # sample -* name: Game Maker Guide -* description: Level up your game making skills by completing the tutorials in this guide. +* name: Variable Emotions +* description: Practice usingn different types of variables to create an emoji game. ## interface -* name: Learn to use MakeCode Arcade +* name: Variables and Emotions * description: This will teach you how to complete tutorials in Microsoft MakeCode Arcade. * completionUrl: https://microsoft.github.io/pxt-skillmap-sample/certificates/understanding-arcade-tutorials.pdf From 11e14d0852ae8eda6764b6d5df21fd5c4962e5b2 Mon Sep 17 00:00:00 2001 From: PomPomMom <152030788+PomPomMom@users.noreply.github.com> Date: Mon, 17 Feb 2025 22:56:07 +0000 Subject: [PATCH 2/5] updated with tutorial markdown --- README.md | 180 +++++++++++++++++++++++++++++------------------ Skillmap-details | 72 +++++++++++++++++++ 2 files changed, 182 insertions(+), 70 deletions(-) create mode 100644 Skillmap-details diff --git a/README.md b/README.md index d282a01..5a9735d 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,110 @@ -# MakeCode Skill Map Sample - -This is an example skill map that contains three separate learning paths.You can view the content here: -https://arcade.makecode.com/skillmap#github:microsoft/pxt-skillmap-sample/skillmap.md - -Github-hosted skill maps are loaded in the same manner as tutorials, with a URL fragment -formatted as follows: - -`#github:[organization name]/[repository name]/[markdown file name]` - -## Syntax - -The skill map definition can be found in the `skillmap.md` file. Metadata about the skill -map itself can be found under the top-level heading: - -- `id`: The string after the heading (eg `# sample`). Cannot contain spaces. -- `name`: The title of your skill map. This will be displayed in the banner on the page. -- `description`: A description of the map contents. This is also shown in the banner. -- `infoUrl` (optional): A URL to a page with additional educator information - -### Learning Paths - -A skill map consists of one or more "paths", each path being an ordered sequence of activities. -The first activity in each path is unlocked, and completing an activity unlocks the next one. - -A learning path is defined by a level two heading (`##`) has has the following properties: - -- `id`: The string after the heading (eg `## interface`). Must be unique within this skill map. -- `name`: The title of the path, displayed above the linked activities. -- `description`: Additional details (not currently displayed). -- `completionUrl`: URL to a certificate, displayed when a user has completed the entire path. - -### Activities - -Each learning path has multiple activities, defined by level three headings (`###`). Currently, -an "activity" is simply a MakeCode tutorial, and has the following properties: - -- `id`: The string after the heading (eg `### space-activity1`). Must be unique within this skill map. -- `name`: The title of the activity. Displayed on the activity card. -- `type`: The type of activity. Must be `tutorial` currently. -- `description`: Details about the activity, displayed on the back of the card. -- `tags`: Descriptive tags displayed on the bottom of the activity card. -- `url`: Link to the tutorial. See the [MakeCode Tutorial Documentation](https://makecode.com/writing-docs/user-tutorials) for details on tutorial authoring and link formatting. -- `imageUrl`: URL for the image displayed on the front of the activity card. - -## Forking - -If you fork this repo, be sure to change all URL references to https://github.com/microsoft/pxt-skillmap-sample to your forked repo's URL. Otherwise you won't see your changes. - -## Contributing - -This project welcomes contributions and suggestions. Most contributions require you to agree to a -Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us -the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. - -When you submit a pull request, a CLA bot will automatically determine whether you need to provide -a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions -provided by the bot. You will only need to do this once across all repos using our CLA. - -This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). -For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or -contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. - -## Trademarks - -This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft -trademarks or logos is subject to and must follow -[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general). -Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. -Any use of third-party trademarks or logos are subject to those third-party's policies. +# Emotion Game + +## Introduction +In this tutorial, you'll create a simple **Emotion Game** using **MakeCode Arcade** with Python. You'll learn about: + +- **Variables**: + - `Sprite` variables for character images + - `Integer` variables for score + - `String` variables for emotions + - `Boolean` values for checking answers +- **Conditionals** (`if`, `elif`, `else`) to change game logic +- **Functions** (`def`) to organize your code + +### ~ tutorialHint +In this game, pressing **Up** when the emotion is "happy" gives you a point. Otherwise, you lose a point. The emotion changes in a loop between "happy", "sad", and "angry." +### + +--- + +## **Step 1: Setting Up Your Variables** +Let's start by creating the necessary **global variables**. + +```python +mySprite: Sprite = None +mySprite2: Sprite = None +mySprite3: Sprite = None +currentEmotion = "" +~ tutorialHint +mySprite, mySprite2, and mySprite3 are Sprite image variables. +currentEmotion is a string variable that tracks the emotion. + +Step 2: Creating the nextEmoji() Function +Now, let's define a function to update the emotion and display the correct sprite. + +python +Copy +Edit +def nextEmoji(): + global mySprite3, mySprite2, mySprite, currentEmotion # Access global variables + + mySprite3 = sprites.create(assets.image(""" + angry + """), SpriteKind.player) + mySprite2 = sprites.create(assets.image(""" + sad + """), SpriteKind.player) + mySprite = sprites.create(assets.image(""" + Happy + """), SpriteKind.player) + + # Conditional Logic to Change Emotions + if currentEmotion == "happy": + currentEmotion = "sad" + elif currentEmotion == "sad": + currentEmotion = "angry" + else: # If it's "angry" + currentEmotion = "happy" + + # Show only the correct emotion + if currentEmotion != "happy": + mySprite.set_flag(SpriteFlag.INVISIBLE, True) + if currentEmotion != "sad": + mySprite2.set_flag(SpriteFlag.INVISIBLE, True) + if currentEmotion != "angry": + mySprite3.set_flag(SpriteFlag.INVISIBLE, True) +~ tutorialHint +The if, elif, and else statements update the currentEmotion string. +We use Sprite Image Variables to display the correct emotion. +Booleans are used with set_flag(SpriteFlag.INVISIBLE, True) to hide incorrect sprites. +Step 3: Handling Player Input +Now, let's create the on_up_pressed() function to check the player's response. + +python +Copy +Edit +def on_up_pressed(): + if currentEmotion == "happy": # Check if the emotion is "happy" + info.change_score_by(1) + game.splash("Yes!") # Show a message + nextEmoji() # Move to the next emotion + else: + info.change_score_by(-1) + game.splash("Better Luck Next time!") + nextEmoji() +controller.up.on_event(ControllerButtonEvent.PRESSED, on_up_pressed) +~ tutorialHint +if checks if the emotion is "happy". +else runs when the condition is false (not happy). +The info.change_score_by(1) updates an integer variable (score). +Step 4: Initializing the Game +Now, let's set up the initial state of the game. + +python +Copy +Edit +currentEmotion = "angry" # Start with "angry" +info.set_score(0) # Set initial score to 0 +nextEmoji() # Show the first emoji +~ tutorialHint +The integer variable info.set_score(0) keeps track of the score. +nextEmoji() runs at the start to display the first emotion. +Final Challenge +Test your game! Can you modify the code to add more emotions? Try adding a "surprised" emotion and update the logic to include it. + +~ tutorialCompleted +The game should: ✅ Start with "angry" +✅ Change emotions in the correct order +✅ Check for correct answers using if, elif, and else +✅ Update the score +✅ Display the correct sprite \ No newline at end of file diff --git a/Skillmap-details b/Skillmap-details new file mode 100644 index 0000000..a13d9f2 --- /dev/null +++ b/Skillmap-details @@ -0,0 +1,72 @@ +{ + "name": "Emotion Game", + "description": "Learn about variables in MakeCode Arcade by creating a game where a character's face changes emotions.", + "metadata": { + "usePython": true + }, + "activities": [ + { + "name": "Create Emotion Sprites", + "type": "tutorial", + "description": "Create sprite images for Happy, Sad, and Angry emotions.", + "url": "https://arcade.makecode.com/#tutorial:emotion-game-step1", + "tags": ["variables", "sprites"], + "editor": "arcade", + "reward": 10 + }, + { + "name": "Create Variables", + "type": "tutorial", + "description": "Set up variables to track the current emotion and the score.", + "url": "https://arcade.makecode.com/#tutorial:emotion-game-step2", + "tags": ["variables", "data"], + "editor": "arcade", + "reward": 10 + }, + { + "name": "Show Only One Emotion", + "type": "tutorial", + "description": "Use a function to display only the correct emotion sprite.", + "url": "https://arcade.makecode.com/#tutorial:emotion-game-step3", + "tags": ["functions", "visibility"], + "editor": "arcade", + "reward": 15 + }, + { + "name": "Cycle Through Emotions", + "type": "tutorial", + "description": "Write a function that changes the emotion in a set order.", + "url": "https://arcade.makecode.com/#tutorial:emotion-game-step4", + "tags": ["logic", "functions"], + "editor": "arcade", + "reward": 15 + }, + { + "name": "Add Button Controls", + "type": "tutorial", + "description": "Use A and B buttons to check answers and update score.", + "url": "https://arcade.makecode.com/#tutorial:emotion-game-step5", + "tags": ["input", "events"], + "editor": "arcade", + "reward": 20 + }, + { + "name": "Test Your Game!", + "type": "tutorial", + "description": "Run your game and check if everything works as expected.", + "url": "https://arcade.makecode.com/#tutorial:emotion-game-step6", + "tags": ["testing", "debugging"], + "editor": "arcade", + "reward": 20 + }, + { + "name": "Challenge: Add a New Emotion", + "type": "tutorial", + "description": "Extend the game by adding a new emotion and updating logic.", + "url": "https://arcade.makecode.com/#tutorial:emotion-game-challenge", + "tags": ["challenge", "creativity"], + "editor": "arcade", + "reward": 30 + } + ] +} From b452c33848120419bb66797b767d2b823162c211 Mon Sep 17 00:00:00 2001 From: PomPomMom <152030788+PomPomMom@users.noreply.github.com> Date: Mon, 17 Feb 2025 23:53:45 +0000 Subject: [PATCH 3/5] up to step 3 --- README.md | 88 +++++++++++++++++-------------------------------------- 1 file changed, 27 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index 5a9735d..8bbfb74 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ + # Emotion Game ## Introduction In this tutorial, you'll create a simple **Emotion Game** using **MakeCode Arcade** with Python. You'll learn about: - **Variables**: + - `None` variable types to initiage an empty variable - `Sprite` variables for character images - `Integer` variables for score - `String` variables for emotions @@ -15,32 +17,41 @@ In this tutorial, you'll create a simple **Emotion Game** using **MakeCode Arcad In this game, pressing **Up** when the emotion is "happy" gives you a point. Otherwise, you lose a point. The emotion changes in a loop between "happy", "sad", and "angry." ### + --- ## **Step 1: Setting Up Your Variables** Let's start by creating the necessary **global variables**. -```python +```python mySprite: Sprite = None mySprite2: Sprite = None mySprite3: Sprite = None -currentEmotion = "" -~ tutorialHint -mySprite, mySprite2, and mySprite3 are Sprite image variables. -currentEmotion is a string variable that tracks the emotion. +currentEmotion = "angry" +``` +### ~ tutorialHint +`mySprite`, `mySprite2`, and `mySprite3` are Sprite image variables. +`currentEmotion` is a string variable that tracks the emotion.` +### -Step 2: Creating the nextEmoji() Function -Now, let's define a function to update the emotion and display the correct sprite. -python -Copy -Edit -def nextEmoji(): - global mySprite3, mySprite2, mySprite, currentEmotion # Access global variables - - mySprite3 = sprites.create(assets.image(""" - angry - """), SpriteKind.player) +## **Step 2: Creating the nextEmoji() Function** +Now, let's define a function to update the emotion and display the correct sprite. in the tool kit, scroll down and click on the ```advanced``` section, then click on ```Functions```. Click on "Make a Function". Name the function: nextemoji. + +## **Step 3: Adding a sprite variable to your function`** +In Makecode Arcade, you must call a sprite with the `variable name`, Arcade `call code`, an `image`, and a `type`. +- Name the sprite `mySprite` +- Make it equal to the Arcade call code: `sprites.create` +- In parentheses, add a pre-made image by calling `"""happy"""` +- after a comma, make the sprite a player kind by adding `SpriteKind.player` + +## +```python + def nextEmoji(): + + mySprite = sprites.create(assets.image(""" happy """), SpriteKind.player) + ``` +## **Step 4: Adding two more sprites*** mySprite2 = sprites.create(assets.image(""" sad """), SpriteKind.player) @@ -63,48 +74,3 @@ def nextEmoji(): mySprite2.set_flag(SpriteFlag.INVISIBLE, True) if currentEmotion != "angry": mySprite3.set_flag(SpriteFlag.INVISIBLE, True) -~ tutorialHint -The if, elif, and else statements update the currentEmotion string. -We use Sprite Image Variables to display the correct emotion. -Booleans are used with set_flag(SpriteFlag.INVISIBLE, True) to hide incorrect sprites. -Step 3: Handling Player Input -Now, let's create the on_up_pressed() function to check the player's response. - -python -Copy -Edit -def on_up_pressed(): - if currentEmotion == "happy": # Check if the emotion is "happy" - info.change_score_by(1) - game.splash("Yes!") # Show a message - nextEmoji() # Move to the next emotion - else: - info.change_score_by(-1) - game.splash("Better Luck Next time!") - nextEmoji() -controller.up.on_event(ControllerButtonEvent.PRESSED, on_up_pressed) -~ tutorialHint -if checks if the emotion is "happy". -else runs when the condition is false (not happy). -The info.change_score_by(1) updates an integer variable (score). -Step 4: Initializing the Game -Now, let's set up the initial state of the game. - -python -Copy -Edit -currentEmotion = "angry" # Start with "angry" -info.set_score(0) # Set initial score to 0 -nextEmoji() # Show the first emoji -~ tutorialHint -The integer variable info.set_score(0) keeps track of the score. -nextEmoji() runs at the start to display the first emotion. -Final Challenge -Test your game! Can you modify the code to add more emotions? Try adding a "surprised" emotion and update the logic to include it. - -~ tutorialCompleted -The game should: ✅ Start with "angry" -✅ Change emotions in the correct order -✅ Check for correct answers using if, elif, and else -✅ Update the score -✅ Display the correct sprite \ No newline at end of file From 10e32cd548b0a8b564ce172e5ad143452f00d932 Mon Sep 17 00:00:00 2001 From: PomPomMom <152030788+PomPomMom@users.noreply.github.com> Date: Tue, 18 Feb 2025 00:21:42 +0000 Subject: [PATCH 4/5] Complete lesson 1 of skillmap tutorial --- README.md | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 8bbfb74..9ae1ab2 100644 --- a/README.md +++ b/README.md @@ -37,13 +37,16 @@ currentEmotion = "angry" ## **Step 2: Creating the nextEmoji() Function** Now, let's define a function to update the emotion and display the correct sprite. in the tool kit, scroll down and click on the ```advanced``` section, then click on ```Functions```. Click on "Make a Function". Name the function: nextemoji. +![Blue Function container witht the name newEmoji](https://raw.githubusercontent.com/PomPomMom/Images/refs/heads/main/next%20emoji%20function.png) -## **Step 3: Adding a sprite variable to your function`** +## **Step 3: Adding a sprite variable to your function** In Makecode Arcade, you must call a sprite with the `variable name`, Arcade `call code`, an `image`, and a `type`. - Name the sprite `mySprite` - Make it equal to the Arcade call code: `sprites.create` - In parentheses, add a pre-made image by calling `"""happy"""` - after a comma, make the sprite a player kind by adding `SpriteKind.player` +When you begin typine the call code `sprites.create` a popup should allow you to click to finish the code. +![Sprite initializing with popup to complete the code.](https://raw.githubusercontent.com/PomPomMom/Images/5d7ea68c31ab68517b403e690cee94b6c796d8ee/Create%20sprite%20python%20makecode%20arcade.png) ## ```python @@ -51,26 +54,26 @@ In Makecode Arcade, you must call a sprite with the `variable name`, Arcade `cal mySprite = sprites.create(assets.image(""" happy """), SpriteKind.player) ``` -## **Step 4: Adding two more sprites*** + +## **Step 4: Adding an Image to your Sprite Variable.** +When you have initialized your sprite, a paint palate icon will appear next to your code. Click on it. +![Paint palate icon next to sprite code](https://github.com/PomPomMom/Images/blob/5d7ea68c31ab68517b403e690cee94b6c796d8ee/Image%20chooser.png?raw=true) + +At the top, choose "My Assets" and pick the happy face emoji. Then click Done in the bottom left corner. +```mySprite = sprites.create(assets.image("""Happy"""), SpriteKind.player)``` + + +## **Step 5: Adding two more sprites** +Add two more sprites using the same procedure as before, but give `mySprite2` the `sad` image and `mySprite3` the `angry` image. + +``` mySprite2 = sprites.create(assets.image(""" sad """), SpriteKind.player) - mySprite = sprites.create(assets.image(""" - Happy + mySprite3 = sprites.create(assets.image(""" + angry """), SpriteKind.player) +``` - # Conditional Logic to Change Emotions - if currentEmotion == "happy": - currentEmotion = "sad" - elif currentEmotion == "sad": - currentEmotion = "angry" - else: # If it's "angry" - currentEmotion = "happy" - - # Show only the correct emotion - if currentEmotion != "happy": - mySprite.set_flag(SpriteFlag.INVISIBLE, True) - if currentEmotion != "sad": - mySprite2.set_flag(SpriteFlag.INVISIBLE, True) - if currentEmotion != "angry": - mySprite3.set_flag(SpriteFlag.INVISIBLE, True) +## **Complete!** +You have started your emoji game and learned about variables! Continue in the next lesson to add conditionals to your game. \ No newline at end of file From c7fc183e890310e28440ae7bf63ca5d0c2c67189 Mon Sep 17 00:00:00 2001 From: PomPomMom <152030788+PomPomMom@users.noreply.github.com> Date: Mon, 17 Feb 2025 18:11:30 -0700 Subject: [PATCH 5/5] Update README.md --- README.md | 65 ------------------------------------------------------- 1 file changed, 65 deletions(-) diff --git a/README.md b/README.md index 9ae1ab2..2d0bc27 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,4 @@ -# Emotion Game - -## Introduction -In this tutorial, you'll create a simple **Emotion Game** using **MakeCode Arcade** with Python. You'll learn about: - -- **Variables**: - - `None` variable types to initiage an empty variable - - `Sprite` variables for character images - - `Integer` variables for score - - `String` variables for emotions - - `Boolean` values for checking answers -- **Conditionals** (`if`, `elif`, `else`) to change game logic -- **Functions** (`def`) to organize your code - -### ~ tutorialHint -In this game, pressing **Up** when the emotion is "happy" gives you a point. Otherwise, you lose a point. The emotion changes in a loop between "happy", "sad", and "angry." -### - - ---- - ## **Step 1: Setting Up Your Variables** Let's start by creating the necessary **global variables**. @@ -33,47 +12,3 @@ currentEmotion = "angry" `mySprite`, `mySprite2`, and `mySprite3` are Sprite image variables. `currentEmotion` is a string variable that tracks the emotion.` ### - - -## **Step 2: Creating the nextEmoji() Function** -Now, let's define a function to update the emotion and display the correct sprite. in the tool kit, scroll down and click on the ```advanced``` section, then click on ```Functions```. Click on "Make a Function". Name the function: nextemoji. -![Blue Function container witht the name newEmoji](https://raw.githubusercontent.com/PomPomMom/Images/refs/heads/main/next%20emoji%20function.png) - -## **Step 3: Adding a sprite variable to your function** -In Makecode Arcade, you must call a sprite with the `variable name`, Arcade `call code`, an `image`, and a `type`. -- Name the sprite `mySprite` -- Make it equal to the Arcade call code: `sprites.create` -- In parentheses, add a pre-made image by calling `"""happy"""` -- after a comma, make the sprite a player kind by adding `SpriteKind.player` -When you begin typine the call code `sprites.create` a popup should allow you to click to finish the code. -![Sprite initializing with popup to complete the code.](https://raw.githubusercontent.com/PomPomMom/Images/5d7ea68c31ab68517b403e690cee94b6c796d8ee/Create%20sprite%20python%20makecode%20arcade.png) - -## -```python - def nextEmoji(): - - mySprite = sprites.create(assets.image(""" happy """), SpriteKind.player) - ``` - -## **Step 4: Adding an Image to your Sprite Variable.** -When you have initialized your sprite, a paint palate icon will appear next to your code. Click on it. -![Paint palate icon next to sprite code](https://github.com/PomPomMom/Images/blob/5d7ea68c31ab68517b403e690cee94b6c796d8ee/Image%20chooser.png?raw=true) - -At the top, choose "My Assets" and pick the happy face emoji. Then click Done in the bottom left corner. -```mySprite = sprites.create(assets.image("""Happy"""), SpriteKind.player)``` - - -## **Step 5: Adding two more sprites** -Add two more sprites using the same procedure as before, but give `mySprite2` the `sad` image and `mySprite3` the `angry` image. - -``` - mySprite2 = sprites.create(assets.image(""" - sad - """), SpriteKind.player) - mySprite3 = sprites.create(assets.image(""" - angry - """), SpriteKind.player) -``` - -## **Complete!** -You have started your emoji game and learned about variables! Continue in the next lesson to add conditionals to your game. \ No newline at end of file