The Arizona STEM Acceleration Project

Introduction to MS Make Code

(Eat the Food)

Introduction to MS Make Code (Eat the Food)

A [4th - 8th] Grade STEM Lesson

Robert Lane

January 2024

Notes for Teachers

See next slide for a video introduction to MS MakeCode and how I use it in my classroom. I am passionate about MS Makecode for a quick introduction to video game development before you dive into Scratch which can be overwhelming at times. There is not a better coding program to make video successfully in a short amount of time.

List of Materials

• Chromebook/Computer
• No Student Login Required
• MS Makecode Video Game Console’s (Optional)
• Ms MakeCode Arcade

​

Standards

4th Grade :Concept: Algorithms and Programming (AP)

​

Subconcept: Algorithms (A)

​

4.AP.A.1 Compare and refine multiple algorithms for the same task and determine which is the most effective. Different algorithms can achieve the same result, though sometimes one algorithm might be most appropriate for a specific situation. Students should be able to look at different ways to solve the same task and decide which would be the best solution. For example, students might compare algorithms that describe how to get ready for school or how to tie their shoes. Students could use a map and plan multiple algorithms to get from one point to another. They could look at routes suggested by mapping software and change the route to something that would be better, based on which route is shortest or fastest or would avoid a problem. Another example might be to write different algorithms to draw a regular polygon and determine which algorithm would be the easiest to modify or repurpose to draw a different polygon.

​

• ​
• ​

4th Grade Writing Standards

Text Types and Purposes

Production and Distribution of Writing

4.W.4 Produce clear and coherent writing in which the development and organization are appropriate to task, purpose, and audience. (Grade-specific expectations for writing types are defined in standards 1–3 above)

4.W.5 With guidance and support from peers and adults, develop and strengthen writing as needed by planning, revising, and editing. (Editing for conventions should demonstrate command of Language standards 1–3 up to and including grade 4).

4.W.6 With some guidance and support from adults, use technology, including the internet, to produce and publish writing as well as to interact and collaborate with others; demonstrate sufficient command of keyboarding skills to complete a writing task.

National Standards

Computer Science (CSTA K-12 Standards)

• 1B-AP-10: Create programs that include sequences, events, loops, and conditionals.
• Connection: Students build a game where events (pressing a button) trigger actions (movement), and conditionals determine game states (if player touches food, score increases).
• 1B-AP-15: Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.
• Connection: A core assessment requirement is for students to identify bugs in their game (e.g., character not moving correctly) and fix the code independently.
• 1B-AP-11: Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.
• Connection: Students build the game in stages: first creating the sprite, then adding movement, then the food mechanic, and finally the scoring system.

​

Common Core English Language Arts (CCSS.ELA)

• RST.6-8.3: Follow precisely a multistep procedure when carrying out experiments, taking measurements, or performing technical tasks.
• Connection: Students follow a specific tutorial or set of slide instructions to build their game code block by block.
• L.4.6 / L.5.6: Acquire and use accurately grade-appropriate general academic and domain-specific words and phrases.
• Connection: Students are assessed on their ability to understand and apply specific coding vocabulary (e.g., "sprite," "variable," "loop," "event") during the lesson.

Next Generation Science Standards (NGSS)

• MS-ETS1-4: Develop a model to generate data for iterative testing and modification of a proposed object, tool, or process such that an optimal design can be achieved.
• Connection: The game itself acts as a digital model where students test different parameters (speed, number of lives) and modify the code to improve playability.

​

Piskel - Sprite Editor

4th Grade Piskel App Padlet

5th Grade Piskel Padlet

Objectives:

Today students will create Pixel Art for their video game.

Today students will take a stroll down memory lane and learn about the history of video games and why their has been a resurgence in retro pixelated video games.

Today students will write a computer algorithm for their character to eat food.

Today students will debug their computer program to ensure their video game works.

Today students will mod their video game to make the food move and add enemies.

Agenda (lesson time)

To complete this lesson it will take four class periods of 45 minutes.

Class #1 - History/Pixel Art/Game

Class #2 - Make the food move/Countdown

Class #3 - Add Enemy/Mod

Class #4 - Download games onto Gameboy like consoles.

Intro/Driving Question/Opening

​

​

How do video games work?

What makes video games fun?

Microsoft MakeCode

Hands-on Computing Education

#hourofcode

MS Make Code Arcade Compatible Devices

MakeCode Arcade

• Arcade Games & Game-based Learning
• Tour around MakeCode Arcade
• 1^st Game – Eat the Doughnut (Sprites, screen)
• Arcade Hardware

​

​

History of Arcade Games

An arcade game is a coin-operated video game machine installed in a public place like a restaurant, or an amusement park.

Arcade games rose to popularity in the 1970’s and 1980’s.

For a complete history, see: https://en.wikipedia.org/wiki/Timeline_of_arcade_video_game_history

The first successful Arcade game was called Pong, created by Atari in 1972.

Your favorite Arcade Games?

Pac-Man

Space Invaders

Donkey Kong

Resurgence of interest…

MakeCode Arcade

• 1980’s Retro Arcade Game Development Platform
• Built to replace Touch Develop & CCGA
• Friction-free (no hardware/software required)
• Intro level High School CS

MakeCode.com

Getting familiar with MakeCode Arcade

Home Page

Create a New blank Project

Open your recent Projects

Import Projects (via a file or URL)

Step-by-step Tutorials

Game examples

Tutorials, Examples, Lessons

1. Tutorial – step-by-step self-guided activity

2. Games – example code to mod or study

3. Lessons – instructions with code snippets

Getting familiar with MakeCode Arcade

Game Simulator

shows what your game looks like

Block Toolbox

Name and Save game to a file

Game controls hover mouse to activate

Simulator Toolbar

• Stop
• Restart
• Mute
• Screenshot
• Full screen

Programming

Workspace

Share game

via URL

Switch between

Blocks & JavaScript

Workspace Toolbar

• Undo / Redo
• Zoom

Hide Simulator

Download

to Hardware

Workspace Context Menu

(right-click)

Getting Started

Open your browser to arcade.makecode.com

Or, click on the Arcade card from the MakeCode.com landing page

Create your first game

Eat the Doughnut – move your sprite around the screen and eat the doughnut before the time runs out!

Set the background

• From the Scene Toolbox drawer, drag a Set Background Color onto the Workspace
• Drop into the On Start block

Select a background color

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

Design your Sprite

• In the Sprite block, click on the Image
• Design your own image using the Image Editor
• When done, click outside the Image Editor or click ‘X’ to close the window

Sprite Editor

Pencil

Size

Eraser

Fill

Shape

16 Color Palette

Canvas Size

Undo/Redo

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

Try it out in Simulator

• Click on the direction arrow 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)

Create a doughnut Sprite

• From the Sprites Toolbox drawer, drag another Set sprite block onto the Workspace
• Drop after the Move Sprite block

• In the Set sprite block, use the drop-down menu to select Rename variable
• Type ‘doughnut’

Set the image and type of doughnut

• In the Sprite block, click on the Image to open the Image Editor
• Click on Gallery, select the pink doughnut image

• In the Sprite block, click on the kind drop-down menu and select Food

Set the position of the doughnut

• From the Sprites Toolbox drawer, drag a Set Sprite Position block onto the Workspace
• Drop after the Set doughnut block
• Use the drop-down menu to select doughnut

Set the position of the doughnut

The Arcade game screen dimensions are 160 width x 120 height

0

120

Y

X

0

160

(0, 0)

(160, 120)

(160, 0)

(0, 120)

• Select any position on the screen to place your doughnut

Start the Countdown

• From the Info Toolbox drawer, drag a Start Countdown block onto the Workspace

• Drag after the Set Position block

​

• Set the Countdown time to 5 seconds

Win when you Eat the Doughnut

• From the Sprites Toolbox drawer, drag an On Sprite Overlaps block onto the Workspace

Win when you Eat the Doughnut

• In the On Sprite Overlaps block, use the drop-down menu to select Food for one of the sprite kinds

Win when you Eat the Doughnut

• From the Game Toolbox drawer, drag a Game Over block onto the Workspace
• Drop into the On Sprite Overlaps block

• In the Game Over block, click on the plus (‘+’) icon to set Win = true

​

Complete Program

Play!

• Press Play on the Simulator
• Move your cursor over the Game Controls to activate
• Use the arrow keys to move your player
• Eat the doughnut before the time runs out!
• Click to expand Simulator to full-screen

• Name your Game
• Click to Save as a file on your computer or to a shared drive

Save your Game

• Click Import from Home Page
• Or drag and drop file into editor to open

End of Class Period #1

Game Modding

“Modding” or Modifying existing games is a great learning activity

• Learn to read someone else’s code
• Don’t have to start from scratch
• Multiple different ways to create variations (constraints breed creativity)
• One game can have many ‘children’

• Use a Random position for the doughnut
• Make the doughnut appear/disappear
• Add sounds/score
• Add Enemy Sprites to avoid
• Add other types of Food for different points

Options

Try JavaScript!

Use a Random Position for doughnut

• From the Math Toolbox drawer, drag 2 Pick Random number blocks onto the Workspace
• Drop one Pick Random block into the X coordinate of the Set Position block, drop the other Pick Random block into the Y coordinate

Use a Random Position for doughnut

• In the Pick Random block in the X coordinate, set the maximum value to 160
• In the Pick Random block in the Y coordinate, set the maximum value to 120

Make the doughnut appear and disappear

• From the Game Toolbox drawer, drag a On Game Update Every block onto the Workspace
• Set the update interval to 1 second (1000 ms)

Make the doughnut appear and disappear

• Drag the Set Position block into the On Game Update block

Add sounds

• From the Music Toolbox drawer, drag a Play Sound Until Done block onto the Workspace
• Drop into the On Sprite Overlaps block, before the Game Over block

Add Score

• From the Info Toolbox drawer, drag a Change Score block onto the Workspace
• Drop into the On Sprite Overlaps block, after the Play Sound block
• Delete the Game Over block

Add Effects

• From the Sprites Toolbox drawer, drag a Sprite Start Effect block onto the Workspace
• Drop into the On Sprite Overlaps block, after the Change Score block
• Select an effect for a 1 second duration

Complete Program with Mods

https://makecode.com/_bWWVRu97b6CE

End of Class Period #2

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

Copy/Paste game link in email, Share on Facebook, Twitter, or scan QR code on phone

Class #3 & 4

Arcade Hardware

arcade.makecode.com/hardware

Trade your Meowbits with your Neighbors to play your game!

Download your game to Meowbit

Build your own Arcade Cabinet!

Cardboard Control Panel

4th and 5th Grade Padlets

4th Grade Padlet

5th Grade Padlet

Assessment

• Students produce a game without bugs.
• Students can debug a bug in their program on their own.
• Students can download their software to the hardware.
• Students can understand coding vocabulary and apply coding vocabulary into practice.
• Students can read computer programs and modify their own game because of their understanding of code.

Differentiation

I always have the code available to to students in the form of a slide or a video. Some students prefer text and others are visual learners. Making sure students have access to what you are doing at all times is essential to getting an entire class with a working game with no bugs.

Remediation

Extension/Enrichment

MS MakeCode challenge cards. Students can be challenged to add lives for their player. They can add levels and change scenes. There really is no limit to what students can produce when you introduce them to the basics of computer science. There is no ceiling for extension or enrichment with this lesson. Just take a look at the Padlet how students have gone above and beyond.

Follow me on X

The Nailed It Wall