Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade...
Transcript of Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade...
![Page 1: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/1.jpg)
Microsoft MakeCodeArcade Part 1—Blocks
Wednesday May 20th, 2020
7:30–8:00am PT
![Page 2: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/2.jpg)
Microsoft Code of ConductMicrosoft’s mission is to empower every person and every organization on the planet to achieve more. This includes all Microsoft events and gatherings, including on digital platforms, where we seek to create a respectful, friendly, fun and inclusive experience for all participants.
We expect all digital event participants to uphold the principles of this Code of Conduct, which covers the main digital event and all related activities. We do not tolerate disruptive or disrespectful behavior, messages, images, or interactions by any party participant, in any form, at any aspect of the program including business and social activities, regardless of location.
Microsoft will not tolerate harassment or discrimination based on age, ancestry, color, gender identity or expression, national origin, physical or mental disability, religion, sexual orientation, or any other characteristic protected by applicable local laws, regulations, and ordinances.
We encourage everyone to assist in creating a welcoming and safe environment. Please report any concerns, harassing behavior, suspicious, or disruptive activity to Business Conduct Hotline (1-877-320-MSFT or [email protected]). Microsoft reserves the right to refuse admittance to or remove any person from Microsoft Build at any time at its sole discretion.
![Page 3: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/3.jpg)
MakeCode Team
Peli de Halleux
@pelikhan
Jacqueline Russell
@jaqster
Joey Wunderlich
@joeywunderl
![Page 4: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/4.jpg)
![Page 5: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/5.jpg)
MakeCode Arcade home page
Create a New blank Project
Step-by-step Tutorials
Game examples
Import Projects (via a File, URL, Repo)
Open your recent Projects
![Page 6: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/6.jpg)
Mod Eat the Fruit Game
Eat the Fruit—move your sprite around the screen and eat as much fruit as you can before the time runs out!
![Page 7: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/7.jpg)
Create a new Project
![Page 8: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/8.jpg)
Getting familiar with MakeCode Arcade
Game Simulator
Block Toolbox
ProgrammingWorkspace
![Page 9: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/9.jpg)
Set the background
• From the Scene Toolbox drawer, drag a Set Background Color onto the Workspace
• Drop into the On Start block
Pick a background
color
![Page 10: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/10.jpg)
Create a Player Sprite
• From the Sprites Toolbox drawer, drag a Set sprite block onto the Workspace
• Drop into the On Start block after the Set Background block
![Page 11: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/11.jpg)
Pencil SizePencil
Rectangle
Circle
Marquee—select an area
and move
Shortcut
colors
16 Color
Palette
Canvas Size
Eraser
Fill
Line
Pan
Switch between Editor and Gallery
of existing Sprite designs
Undo/
RedoZoom
![Page 12: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/12.jpg)
Control the movement of your Sprite
• From the Controller Toolbox drawer, drag a Move block onto the Workspace
• Drop into the On Start block after the Set sprite block
![Page 13: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/13.jpg)
Try it out in Simulator
• Click on the joystick buttons in the Simulator to move your Sprite around the screen
• Or use the arrow keys on the keyboard (make sure the mouse is hovered over the Simulator to activate controls)
![Page 14: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/14.jpg)
Keep Sprite in screen
![Page 15: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/15.jpg)
Initialize Score and Start Countdown
![Page 16: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/16.jpg)
Create a flying fruit Sprite
• From the Game Toolbox drawer, drag a On Game Update Everyblock onto the Workspace
• From the Sprites Toolbox drawer, drag a Set Projectile from side block into the On Game Update Every block
• Set vx to 50 and vy to 0
![Page 17: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/17.jpg)
Velocity = speed and direction
– vx
– vy
+ vy
+ vx
![Page 18: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/18.jpg)
Draw a Fruit Sprite (or pick one from the Gallery)
![Page 19: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/19.jpg)
Set the fruit starting position
• From the Sprites Toolbox drawer, drag a Set Position block into the On Game Update Every block
• Change mySprite variable to projectile
![Page 20: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/20.jpg)
Coordinates
The Arcade game screen dimensions are 160 width x 120 height
(0, 0)
(160, 120)
(160, 0)
(0, 120)
y
x
![Page 21: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/21.jpg)
Set the fruit starting position
• From the Math Toolbox drawer, drag a Pick Random block, and drop into the y field of the Set Position block
• In Pick Random block, change maximum value to 120
![Page 22: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/22.jpg)
Add a point when you eat fruit
• From the Sprites Toolbox drawer, under the Overlaps category, drag an On Sprite Overlaps block onto the Workspace
• Change the second kind to Projectile
![Page 23: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/23.jpg)
Add a point when you eat fruit
• From Info Toolbox drawer, add Change Score block
![Page 24: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/24.jpg)
Destroy the Fruit
• From the Sprites Toolbox drawer, add Destroy mySprite block
• Drag the otherSprite local variable block into the Destroy block
![Page 25: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/25.jpg)
Add effects and music
• In the Destroy block, click the plus (+) icon
• Select an effect to play
• From the Music Toolbox drawer, drag a Play Sound block into the On Sprite Overlaps block
![Page 26: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/26.jpg)
Complete Program
![Page 27: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/27.jpg)
Other mod options
• Change the Fruit or Junk food Sprites
• Add other types of Food for different points
• Change how often each type of food appears
• Change the speed of the food or player
• Change the direction of the food sprites
![Page 28: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/28.jpg)
Share your game!
Click the Share button in the top left of the screen
Name your Game
Take a screenshot
of your Game
Click to
Publish
Share on Facebook, Twitter or Email URL
Play on your Phone!
![Page 29: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/29.jpg)
Arcade hardware
arcade.makecode.com/
hardware
![Page 30: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/30.jpg)
Arcade cabinets
![Page 32: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/32.jpg)
What next?
Microsoft student resources can be found at the GitHub repository for further learning opportunities.aka.ms/StudentsAtBuild
Microsoft Learn for Students is the place to develop practical skills through fun, interactive modules and paths. Plus, educators can get access to Microsoft classroom materials and curriculum. Find it all at: aka.ms/learnforstudents
Azure for Students gives you $100 in credit on the Azure Cloud. Build your skills in trending tech including data science, artificial intelligence (AI), machine learning, and other areas with access to professional developer tools. Start here: aka.ms/azureforstudents
Imagine Cup is more than just a competition—you can work with friends (and make new ones), network with professionals, gain new skills, make a difference in the world around you, and get the chance to win cash and cloud credits. To find out more: Higher education students: imaginecup.com/. Educators of students ages 13–18 start with Imagine Cup Jr.
Microsoft Student Learn Ambassadors are a global group of campus leaders who are eager to help fellow students, lead in their local tech community, and develop technical and career skills for the future. Learn more at: studentambassadors.microsoft.com/
![Page 33: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/33.jpg)
Links
About MakeCode—aka.ms/makecode
Online MakeCode editors—makecode.com
Buy hardware—aka.ms/makecodestart
Arcade curriculum—arcade.makecode.com/courses
MakeCode Forum—forum.makecode.com
![Page 34: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/34.jpg)
Thank you!
![Page 35: Microsoft MakeCode · Jacqueline Russell @jaqster Joey Wunderlich @joeywunderl. MakeCode Arcade home page Create a New blank Project Step-by-step Tutorials Game examples Import Projects](https://reader036.fdocuments.us/reader036/viewer/2022071003/5fc004a3d4ac2873b84981c0/html5/thumbnails/35.jpg)
© Copyright Microsoft Corporation. All rights reserved.