CHARACTERS AND ITEMS 👁️
GAME CONTROLS
🚨It looks like you may be trying to move your character. Click start game to start ⬇️🚨
HTML Space 👁️ ↕️
Variable Space 👁️ ↕️
NEXT LEVEL
Drag Mode
🎮 The link to your app as a game is 🎮
🌐 The link to your app as a webpage is 🌐
Edit your element then make it!
Select blocks to choose what happens when this is clicked
Edit your pattern here
Coding Curriculum
Lesson 1: Mosaic about your favorite place or animal HTML and the audio add-on
Try this example app first: https://tinyurl.com/vacgame?a=221147 1: Try making a mosaic page about your favorite class at school, or your favorite person that you want to thank (we’ll send them the project at the end). Your project should combine pictures of your person place or thing with text and other buttons. We’ll have some of the pictures Here’s how to write the code to make new things: * To make regular words: <p></p> * To make a title: <h1>Title</h1> * To make an image: <image>LINK HERE</image> (Use the image search button to find links to images * To make a button: <button>Click me</button> And here’s how you make an image that speaks: <image say = “hello>LINK HERE</image> At the end, click share my app with friends and we’ll look at each others projects.
Lesson 2: Menu + Maze Runner HTML + Styling:
Try this example Maze App (this is the second app we'll make today): (https://tinyurl.com/vacgame?a=220811) Next, we’re going to learn to add styles. We’ll create a menu app for a fake website. First write a title for your restaurant website like this: <h1>Your restaurant name here</h1> Then add a style to it like this (this will make it a different color, background color, and font size): <h1 style = “color:blue; background:red; font-size:12px ”>Your restaurant name here</h1> Now play around by adding other pieces of text. Try to apply different styles. Try adding images of different recipes, using different size images. Make images with styles like this for different sizes: <image style = “width:10%;height:10%”>YOUR LINK HERE</image> Play around with styles and make the best menu possible. Here are the different styles you can use: * Color: Changes font color * Background: Changes background color * Font-size: Changes font color (needs a number with ‘px’ at the end) * Width: Changes width (needs a %) * Height: changes height (needs a %) Now make a maze app: Add an image to be the main character. Make it small by giving it a small size, like this: <image style = “width:5%; height:5%”>LINK HERE</image> Now add the special character attribute. This means you can move the character with the arrow keys! Try it out! (If you’re on an iPad, click the controls button to see the controls) <image style = “width:5%; height:5%” controls = “true”>LINK HERE</image> Now that you have a character, add a box like this (div makes a block that can hold things in it). Make sure to give it a background color and make it thin but long): <div style = “height:2%; width:25%; background:red”></div> OK! Now add the special hard attribute like this. This means characters can’t go through it! Test it out, try walking through it. <div style = “height:2%; width:25%; background:red” hard = “true”></div> OK! Now add an image as the prize at the end and finish your maze. We’ll share at the end.
Lesson 3: Simple Waldo and Going To Other Pages
Example App: https://tinyurl.com/vacgame?a=220606 We’re going to learn more about adding styles and going to other pages in our apps. Here’s how to create a button that goes to another page: <button go = “SecondPage”>Next Page</button> Make a where’s Waldo game. Add a complicated background image with height 100% and width 100%: <image style = “width:100%;height:100%” >LINK HERE</image> Then add a smaller image in front of its that’s hard to see. Make it much smaller and give it the special Waldo attribute that will make it move randomly every time its clicked: <image style = “width:10%;height:10%” waldo = “true”>LINK HERE</image> Now, play the game! Try to find the image 10 times. Then, add a button that goes to the Second app page like this (by default there are fifty pages called FirstPage, SecondPage, ThirdPage, FourthPage, etc): <button go = “SecondPage”>Next Page</button> On the second page, create a different Where’s Waldo challenge. Create a bunch of pages and share your games with friends to play with each other!
Lesson 4: First group work, app that texts and explains things. Your First Store App
Example App: https://tinyurl.com/vacgame?a=221327 We’re going to start working the way real software engineers do: in groups. We’re going to make a “store” app that indicates some things your group can sell (it will also show us how to make apps that can contact people through text messages or emails!) First you and your group should choose something you could sell as a group (for example, Girl Scout cookies or homework help). Your app will have a menu of options for things to buy, and when someone wants to buy one, they will be able to click on the button to send you a text message. Here’s an example: https://tinyurl.com/vacgame?a=221327 Real software engineering teams do what’s called wire framing, where they draw out what they want to code before they make it. Here’s an example of a wireframe (you can copy this presentation to make yours), https://docs.google.com/presentation/d/1e_f1klK88V4FObtkVGLakyLpsYTCr32skYhKXFtnu-I/edit#slide=id.gaa1f4a1709_0_84 . First, you and your team should decide together what you want to sell and then draw out a wireframe of all the pages you’ll need. Write down your idea on the board and show the wireframe to your teacher. Then code the app. Remember, here’s how to make a button that goes to another page! And here’s how to make a button that sends your group a text message: <button style = "top:30%" textaddress = "9737689820" textmessage = "I want to buy cookies">Send</button> Share your app with your group when you’re done.
Lesson 5: Making an app for your school
Now, in your same group, work for an app for your school! Make an app for new students at your school. Your group can choose a couple of themes, an app to help new students get around, an app to help new students understand what they can do at your school, or a trivia app with questions. Here’s an example trivia app: https://tinyurl.com/vacgame?a=220658 Make a wireframe for your school app and share your idea with the whole group. Then code it! At the end of this lesson, make sure to reach out to nonprofits. Building an app for a nonprofit will be your groups big project. First, google around for small nonprofits in your area (for example a local library or animal shelter). Find nonprofits that you ould be excited to build an app for. Then find an email for the nonprofit on their website. Your group should find at least ten potential nonprofits — we need to reach out to a lot because not all will respond. Once your group has 10 nonprofits, go to this link, and send them each your email. (You will need to fill in the details for your group). Have your teacher send the email on your behalf if you don’t have access to one because you’re too young. Email template: https://docs.google.com/document/d/1yptSYT5rsxAeuBiNmlIcAGHVF4jrsxGDHAOYBmfvm0A
Lesson 6: Groups and Nonprofits App Work (If no nonprofits respond, make another app for your school! )
In your group, check the nonprofits that have responded. Wireframe and work on your project! If more than one has decided, split up into smaller groups within your groups and each of you work on one. Make sure to wireframe. If no nonprofits have responded, build another app for your school! See if you can get in touch with someone at the office, and ask what simple app they need to make their job easier. (The simplest way to do this might be for your teacher to talk to them and ask If they want to visit your class).
Lesson 7: Groups and Nonprofits App Work 2 (If no nonprofits respond, make another app for your school! )
Continue your group nonprofit app!
Lesson 8: Javascript and Variables, Clicker App Work on your own clicker app, plus some puzzles
Lesson 9: Javascript and Variables and Control Flow Trivia Game
Lesson 10: Your Own Project
Gaming Class Activities
🗣️Lesson 1: Character Page (Using The Audio Action)
Example App
Using the audio action: 🗣️ .Add pictures of your favorite character and use the audio action (🗣️) to make a speaking mosaic!
🌀Lesson 2: Simple Waldo (Using the Whirlwind Action)
Example App
Using the whirlwind action: 🌀 . Add a complicated image (try searching waldo background to find a good one.) Make it width 100% and height 100% so that its a background image for your game!
Add a small cartoon character or picture. Make it tiny, 2% by 2%. Give it the whirlwind action 🌀 so that it moves randomly whenever you click it.
Play the game! You can make multiple levels by giving the character both the move randomly action and the Go To Page action 🔗📱. On the next page, make a different Wheres Waldo level.
🎮Lesson 3: Maze Runner
Example App
Using the controls action to make moving characters: 🎮 . Add a character picture to be the main player of your game (Hint: search for gifs to find moving images for your characters). Then, give the character the 🎮 action. Now you can move it with the arrow keys! (Or an ipad with the in-game controls; click the controls button to see those).
Make the character small, 10% by 10% or 2% by 2%
Make a box, give it a background color, and make it thin but long, height 2% and width 25% or 50%. Give it the hard action 🧱. Now the character cant go through it!
Now make a vertical wall, width 2% and height 25% or 50%. You can use these walls to make a maze. Just copy these 2 walls over and over and move around the copies to make a maze. The end of the maze should be a button that goes to another page. If you give a button the next page action (🔗📱), the game will go to that page when the character touches it.
Make a multi-page maze game! Add the kill action to the walls or the move action to the walls to make it even more challenging.
💬Lesson 4: Trivia
Example App
Add a question to a page by adding the 'words' option. (For example, 'What color is a blue whale?')
Under the question, add two (or more buttons), for each of the possible answers. (For example, the buttons for our whale question might be 'blue', 'grey','green','yellow.')
Assign the wrong answer buttons the popup action 💬. Make them say something like 'Wrong!'
Assign the right answer buttons the action to go to a new page. On that new page, add another trivia question.
Finish your game by adding a lot of questions
💀Lesson 5:Obstacles
Example App
Using the controls action to make moving characters: 🎮 . Add a character picture to be the main player of your game (Hint: search for gifs to find moving images for your characters). Then, give the character the 🎮 action. Now you can move it with the arrow keys! (Or an ipad with the in-game controls; click the controls button to see those).
Make the character small, 10% by 10% or 2% by 2%
Make a box, give it a background color, and make it thin but long, height 2% and width 25% or 50%. Give it the kill action 💀 and the move down obstacle action (⬇️Obstacle). Now when you start the game it will fall and kill the character if they hit it
Add lots of obstacles and a button that takes the character to a new page (this is the goal)
🚣Lessons 6: CYOA (Solo)
Example App
Add a scenario question to a page by adding the 'words' option, where you ask the player what they would do in a certain situation. (For example, 'You wake up in a dark forest with no idea how you got there. What do you do?')
Under the question, add two (or more buttons), for potential actions. (For example, the buttons for our question might be 'I call out for help', 'I try to look around for anyone else', and 'I wait')
Assign all the buttons the action to go to a new page. On the new page, write what happens when the player makes that choice! And then give them new choices. Play the example game to see what we mean.
Create your own Choose Your Own Adventure scenario. Try adding music for atmosphere!
🚣Lessons 7 & 8: CYOA (Group)
Example App
Same as above, but create a complex, awesome CYOA game in a group! Work in a group of 2 or 3. At least one of you should be the artist (who chooses how pages look and makes the game look awesome). And someone else should be the writer, who leads writing the story.
⛰️Lesson 9: Story
Example App
❓Lesson 10: Clicker Game 💯
Its time to make a clicker game!
First, add text and give it the score ability (💯). Now it will show the game score!
Then, add a button (or image) and give it the ability to increase the score by 1 using the scoreup action 🆙 Now click on it! The score will increase by 1
❓Lesson 11: Choose any previous game type that you liked, and make a better version!
