![\"hour](\"https://code.org/api/hour/begin_makeschool_wizard.png\" "\\"Hour")
\n This tutorial is a beginner-friendly introduction to the basics of programming.
You'll start out by copying code, then learning to modify parts of the code, and finally you will start writing your own code from scratch.
At the end of the tutorial are additional challenges, for beginners and advanced learners, to push your programming understanding even further.
Along the way, important information will be highlighted in an...
\ninformation box
\nAny time you need to add some code or complete and important step, you'll find it in an...
\naction box
\nAfter you've come up with your own answer, you can expand the...
\nsolution box
\nAlong the way and at the end of the tutorial, you can push yourself by tackling all of the...
\nchallenges in boxes like this
\n\nIn this tutorial you will build up your comfort working with the basic building blocks of programming:
\n\nStarting from an empty canvas, you will soon be creating and customizing your own wizard and castle, and giving your wizard magical powers to interact with the world around you.
"},{"id":"T0E6OlNlY3Rpb24tNTk5NA==","title":"Accessing the Starter Project","htmlContent":"Where will you actually write the code? There are two options for getting the starter project.
Repl.it is a website makes it easy to jump right in to programming without having to set up a local environment. Whether you are a beginning or advanced programmer, it's a great way to jump right into the code.
\nIn a new window, go to CodeWizardCastleTutorial on Repl.it
\nThis tutorial does not cover working with GitHub or getting set up for local development of web projects, but if those are things you are already comfortable with, you can clone the starter project from GitHub.
\nIn a new window, go to Code-Wizard-Castle-Starter on GitHub
\nWhen viewing the starter project, you should see the following files:
index.html\nsketch.js\nwizardClass.js\nspellFunctions.js\ndrawFunctions.js\nhelperFunctions.js
The index.html page loads the content that you see in the browser when you run the program. Between the <body> and </body> tags is where things like page headers and paragraph text are found.
\nIn index.html, find <h1>Code Wizard Castle</h1> and change it to <h1>YOUR_NAME's Code Wizard Castle</h1>
Also in index.html are some script tags that load all of the .js (JavaScript) files needed for this project.
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js\"></script>\n<script src=\"wizardClass.js\"></script>\n<script src=\"helperFunctions.js\"></script>\n<script src=\"spellFunctions.js\"></script>\n<script src=\"drawFunctions.js\"></script>\n<script src=\"sketch.js\"></script>
The first one, that ends in libs/p5.js/0.6.1/p5.js loads in helper functions from the p5.js Library, which provides helper functions make it easier to display the visual elements of the project.
The rest of the loaded files are the files that belong to this project.
The main reason for having multiple files is to keep the code organized.
\nThe sketch.js file is loaded last in index.html because it uses code from the other files to control the overall program.
The majority of this tutorial will be making changes in sketch.js, with a few updates inside some of the other .js files as well towards the later part of the tutorial.
When viewing sketch.js you should see this starter code:
function setup() {\n createCanvas(400, 400);\n}\n\nfunction draw() {\n background(\"lightgray\");\n}
When you first run the program you should see that right now it just has a light gray square on the page.
The setup() function only runs one time at the start of the program. Code should be added here if it only needs to run once, usually to assign initial values to things.
The line createCanvas(400,400) creates the canvas with a width and height of 400.
\nTry adjusting the values passed to createCanvas(width,height) to see how the shape of the canvas changes
Don't forget to reset it back to createCanvas(400,400) before you continue!
The draw() function is a loop that runs forever for as long as you are running the program. This is the place for code that needs to update values or perform actions that should always happen.
The line background(\"lightgray\") fills the entire canvas with the color given.
\nTry changing the color name in background(\"colorName\") to see if you can fill the canvas with different colors.
Reset back to background(\"lightgray\") before you continue (unless you want a castle floor that's a unique color).
These four helper functions are provided by the p5.js Library, which has been designed to make creating art and designs with code more accessible.
"}]},"next":{"id":"T0E6OlBhZ2UtMTQ4NQ==","slug":"create-wizard","title":"Create Your Wizard"},"previous":{"id":"T0E6OlBhZ2UtMTQ4NQ==","slug":"create-wizard","title":"Create Your Wizard"}},{"id":"T0E6OlBhZ2UtMTQ4NQ==","title":"Create Your Wizard","slug":"create-wizard","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNTk5Ng==","title":"Create Your Wizard","htmlContent":"Now, let's start adding some magic. But first, we'll need a wizard!
\nAdd var wizard, pet, magicScroll, broom;\n to the very top of sketch.js, above function setup()
You've just declared 4 global variables that will be available for all of your code to access.
\nVariables are how you save and refer to existing objects or values.
\nNext up, make and save a Wizard to the wizard variable, and then call the drawWizard() function to make it appear.
![\"code](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P00-Getting-Started/assets/cover.png\" "\\"code")
\n ![\"screenshot](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P00-Getting-Started/assets/final_castle.png\" "\\"Final")
\n setup(), on a new line, add wizard = new Wizard();\ndraw(), on a new line, add drawWizard();\nRun your program and you should now see a shadowy wizard form!
Take a moment to check your code so far.
var wizard, pet, magicScroll, broom;\n\nfunction setup() {\n createCanvas(400, 400);\n\n wizard = new Wizard();\n}\n\nfunction draw() {\n background(\"lightgray\");\n\n drawWizard();\n}\n
Time to bring your shadowy wizard to life with some colors.
\nThere are 4 main ways to use the color() function to create colors.
![\"shadowy](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P01-Create-Your-Wizard/assets/shadow_wizard.png\" "\\"Shadowy")
\n color(number); // grayscale, 0-255, 0 for black, 255 for whitecolor(\"colorname\"); // named colorscolor(number1, number2, number3); // RGB (red, green, blue), 0-255 eachcolor(\"#abcdef\"); // hexcode colorsTry one of each.
\nOn a new line at the end of setup(), paste in the following, which will create and assign colors to several properties on wizard:
wizard.wandColor = color(200); // grayscale, 0 for black, 255 for white\nwizard.hatColor = color(\"teal\"); // named colors\nwizard.robeColor = color(100, 50, 200); // RGB (red, green, blue), 0-255\nwizard.skinColor = color(\"#9e81f4\"); // hexcode colors\n
\nPlay with the 4 ways of making colors by changing the values until your wizard has a custom appearance.
\nExplore by changing the numbers, color names, and hexcodes and seeing what happens. Then you can search for \"color picker\" to find tools that will help you get the values for any color you desire.
\nAdd a few more lines to give your wizard a name:
wizard.magicalName = \"Wizard\";\nwizard.magicalNameColor = color(\"#e8b255\");\n
\nCustomize your wizard's name and the color of the letter on their chest.
\nYou should now have a custom and colorful wizard in the middle of your canvas!
\n\n ![\"custom](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P01-Create-Your-Wizard/assets/colorful_wizard.png\" "\\"custom")
\n
var wizard, pet, magicScroll, broom;\n\nfunction setup() {\n createCanvas(400, 400);\n\n wizard = new Wizard();\n wizard.wandColor = color(200); // grayscale, 0 for black, 255 for white\n wizard.hatColor = color(\"teal\"); // named colors\n wizard.robeColor = color(100, 50, 200); // RGB (red, green, blue), 0-255\n wizard.skinColor = color(\"#9e81f4\"); // hexcode colors\n wizard.magicalName = \"Wizard\";\n wizard.magicalNameColor = color(\"#e8b255\");\n}\n\nfunction draw() {\n background(\"lightgray\");\n\n drawWizard();\n}\n
There is no castle to decorate quite yet. Let's add one.
\nInside of draw(), add drawCastle(); on a new line
Did you put it before or after drawWizard()? Try switching the order to see what happens.
\nOrder matters! If you call drawCastle() last, your wizard looks like he is stuck in the floor, because the floor tile lines were drawn after the wizard.
function draw() {\n background(\"lightgray\");\n\n drawWizard();\n drawCastle(); // <---\n}\n
When you draw the castle after the wizard...
\n\n\n\nPut the two functions in the correct order so that the wizard is on top.
Now your wizard has a 4-room castle, nice!
There are still 3 global variables for other objects to add to the castle: pet, magicScroll, and broom.
A wizard would be lonely without their familiar, their magical pet friend. Let's summon one and use some new code magic along the way!
So far, you've seen how to update values on an object using the objectName.propertyName = value format. Here's another way of creating and assigning values to an object all at once.
\nInside of the setup() function, after everything else, add:
pet = {\n x: 100,\n y: 350,\n type: \"cat\",\n color: color(\"black\"),\n}\n
\nInside of draw(), add drawPet(); (remember that order matters!)
You should see a black cat in the lower left corner of the castle:
function setup() {\n createCanvas(400, 400);\n\n wizard = new Wizard();\n // ... code skipped for brevity\n\n // <--- start\n pet = {\n x: 100,\n y: 350,\n type: \"cat\",\n color: color(\"black\"),\n walkSpeed: 0.5,\n }\n // <--- end\n}\n\nfunction draw() {\n background(\"lightgray\");\n\n drawCastle();\n drawWizard();\n drawPet(); // <---\n}\n
Feel free to play with the values to change things and explore. You can change the pet's location by adjusting the x and y values inside of pet = { ... }.
\nFor help getting exact coordinates, you can add the following helper code to the end of the draw() function: reveal(mouseLocation(), \"mouseInfo\");
\nHave you noticed that bigger y values are lower on the canvas? That's because position 0, 0 is in the upper left corner, not the bottom left.
Now you should see the coordinates that your mouse is at on the top left corner above the canvas.
function draw() {\n background(\"lightgray\");\n\n drawWizard();\n drawCastle();\n drawPet();\n\n reveal(mouseLocation(), \"mouseInfo\"); // <---\n}\n\n
\nIf you don't want a \"cat\", you can also try a \"frog\", or \"ghost\" for your pet's type.
Let's add object properties for the last two global variables, magicScroll and broom, so your wizard can have a full collection of magical objects.
Just like you did for adding the pet, you'll add some properties to each object in setup() and then call the function that draws it inside of draw().
\nInside of setup(), after pet = { ... }, add:
magicScroll = {\n x: 300,\n y: 50,\n}\n\nbroom = {\n x: 350,\n y: 350,\n}\n
\nInside of draw(), add drawScroll(); and drawBroom();
\nAdjust the values so that the magicScroll is on the desk in the study, and the broom is by the fireplace in the kitchen.
var wizard, pet, magicScroll, broom;\n\nfunction setup() {\n createCanvas(400, 400);\n\n wizard = new Wizard();\n wizard.wandColor = color(200);\n wizard.hatColor = color(\"teal\");\n wizard.robeColor = color(100, 50, 200);\n wizard.skinColor = color(\"#9e81f4\");\n wizard.magicalName = \"Wizard\";\n wizard.magicalNameColor = color(\"#e8b255\");\n\n pet = {\n x: 100,\n y: 350,\n type: \"cat\",\n color: color(\"black\"),\n walkSpeed: 0.5,\n }\n\n // <--- start\n magicScroll = {\n x: 380,\n y: 50,\n }\n\n broom = {\n x: 50,\n y: 350,\n }\n // <--- end\n}\n\nfunction draw() {\n background(\"lightgray\");\n\n drawCastle();\n drawWizard();\n drawPet();\n drawScroll(); // <---\n drawBroom(); // <---\n\n reveal(mouseLocation(), \"mouseInfo\");\n}\n
Right now your castle is pretty static, with no movement other than your wizard looking around. Let's bring things to life!
First let's give your wizard the ability to walk around, by adding another property walkSpeed and then calling a helper function that will update the position for you.
\nInside of setup(), at the end of the other wizard properties, add wizard.walkSpeed = 0.5;
\nInside of draw(), add wizard.updatePosition();
Now you should see your wizard automatically walking towards wherever your mouse is.
function setup() {\n createCanvas(400, 400);\n\n wizard = new Wizard();\n // ... code skipped for brevity\n wizard.walkSpeed = 0.5; // <---\n\n // ... code skipped for brevity\n}\n\nfunction draw() {\n background(\"lightgray\");\n\n wizard.updatePosition(); // <---\n // ... code skipped for brevity\n\n reveal(mouseLocation(), \"mouseInfo\");\n}\n
But let's give you a little more control - instead of the wizard walking all of the time, let's change it to only update position when you have pressed the SHIFT key on the keyboard.
To accomplish this, you'll add your first custom function and then call it!
\nAt the end of sketch.js, after the end of the draw() function, add a new custom function called updateWizardPosition():
function updateWizardPosition() {\n if (keyIsDown(SHIFT)) {\n wizard.updatePosition();\n } else {\n // do not move the wizard\n }\n}\n
This function contains an if else statement that checks if the SHIFT key is currently being pressed using the helper function keyIsDown(). If the result is yes, or true, then it will call wizard.updatePosition();, if not, it will do nothing.
\nIncluding an else statement that doesn't do anything isn't required, but it is a good way to keep things easy to read and to add a note about the effect of doing nothing.
Now that we have this new function, let's call it:
\nBack up in draw(), remove wizard.updatePosition(); and replace it with a call to your new function: updateWizardPosition();
Now, your wizard should only walk towards the mouse when you are pressing the SHIFT button.
\nNOTE: Be sure to click onto the canvas first, otherwise the key press won't be correctly captured and your wizard won't walk.
\nfunction draw() {\n background(\"lightgray\");\n\n updateWizardPosition(); // <---\n // ... code skipped for brevity\n}\n\n// <--- start\nfunction updateWizardPosition() {\n if (keyIsDown(SHIFT)) {\n wizard.updatePosition();\n } else {\n // do not move the wizard\n }\n}\n// <--- end\n
Let's get your pet moving now, too.
Just like we gave the wizard a walkSpeed we need to give one to the pet.
\nAdd a new property to the end of the pet object properties:
pet = {\n x: 100,\n // ... code skipped for brevity\n color: color(\"black\"),\n walkSpeed: 0.5, // <---\n}\n
Like before, we're also going to add a new custom function, updatePetPosition(), that will help control how the pet moves. For this one you'll learn how to work with an even bigger if statement.
\nAt the end of sketch.js, add:
function updatePetPosition() {\n if (pet.x > width) {\n pet.walkSpeed = pet.walkSpeed * -1;\n } else if (pet.x < 0) {\n pet.walkSpeed = pet.walkSpeed * -1;\n } else {\n // leave walkSpeed the same\n }\n\n pet.x = pet.x + pet.walkSpeed;\n}\n
Take a few minutes to examine the 3-part if else statement.
The first if checks if the pet has walked past the right edge of the canvas (the variable width is automatically assigned to match the size of the canvas from createCanvas).
The second part, else if, checks if the pet has gone off the left side of the canvas.
In either of those cases, pet.walkSpeed is multiplied by -1 in order to reverse the direction the pet is walking.
Lastly, the else statement is for any time the pet is not on either edge, and should not alter walkSpeed.
Positive speed walks to the right, negative to left, as the pet.x value is updated in the last line of the function.
Now we need to call our new function to get that familiar frolicking back and forth in the castle.
\nInside of draw(), add updatePetPosition();
Your wizard's familiar should now be moving back and forth horizontally in the castle.
function setup() {\n // ... code skipped for brevity\n\n pet = {\n // ... code skipped for brevity\n walkSpeed: 0.5, // <---\n }\n\n // ... code skipped for brevity\n}\n\nfunction draw() {\n background(\"lightgray\");\n\n updateWizardPosition();\n updatePetPosition(); // <---\n // ... code skipped for brevity\n}\n\nfunction updateWizardPosition() {\n // ... code skipped for brevity\n}\n\n// <--- start\nfunction updatePetPosition() {\n if (pet.x > width) {\n pet.walkSpeed = pet.walkSpeed * -1;\n } else if (pet.x < 0) {\n pet.walkSpeed = pet.walkSpeed * -1;\n } else {\n // leave walkSpeed the same\n }\n\n pet.x = pet.x + pet.walkSpeed;\n}\n// <--- end\n
Stone castles get cold. Let's add one more touch of motion to warm up this castle - a nice roaring fire in the kitchen!
To add this effect, you'll make a tiny change to an existing function inside of the drawFunctions.js file.
\nNavigate to the drawFunctions.js file, scroll down to find the drawKitchen() function, and locate the // draw fire section (just after line 150).
Take a look at the existing code:
// draw fire\nvar fireX = x + 15;\nvar fireY = y + 95;\n\nfill(\"orange\");\n\nwhile (fireX < cauldWidth) {\n var flameHeight = 10; // TODO: update flameHeight value\n\n triangle(fireX, fireY, fireX + 10, fireY, fireX + 5, fireY - flameHeight);\n fireX += 7;\n}
This code is using local variables, fireX, fireY, flameHeight, and cauldWidth (defined a few lines above in drawKitchen()).
\nLocal variables are defined, assigned, and used within a single code block, between { and }.
\nThat means that these variables are not visible or available for use outside of the drawKitchen() function.
The part that needs to change is flameHeight. This variable is used in the triangle() function to create the top point of the triangle. Right now it's set to 0, which is why we don't see any triangle flames.
\nChange the value to 10 and see how the fire appears under the cauldron: var flameHeight = 10;
The flames are created using a while loop.
\nUnlike if statements, which run once if true, as long as the conditional statement of a while loop is true, the contents of the loop are repeated.
Notice that the value of fireX is updated each time it reaches the end of the loop. Eventually, fireX will increase until it is more than cauldWidth (currently assigned to 40), and the condition will be false and the loop is ended.
\nPlay with changing the value of cauldWidth - what effect does it have?
Since the code that assigns flameHeight is called each time the loop repeats, let's change the value each time for a more lively fire effect.
We can use the helper function random().
\nReplace var flameHeight = 10; with var flameHeight = random(10,20);
Watch the flames come to life.
\nThe two values passed to random() are the low and high numbers that you want it to randomly select from.
In this case the smallest a flame could be is 20, and the biggest is 15.
\nTry out other values to create a bigger or smaller fire effect.
\n// inside of drawFunctions.js\n\nfunction drawKitchen(x, y) {\n drawRoomLabel(\"Kitchen\", x + 5, y + 190);\n // ... code skipped for brevity\n\n // draw fire\n var fireX = x + 15;\n var fireY = y + 95;\n\n fill(\"orange\");\n\n while (fireX < cauldWidth) {\n var flameHeight = random(10, 20); // <---\n\n triangle(fireX, fireY, fireX + 10, fireY, fireX + 5, fireY - > flameHeight);\n fireX += 7;\n }\n}\n
The time has come to add some interaction by giving your wizard some spells to cast.
We'll make it so that your wizard casts a spell when you click the mouse.
\nAt the end of sketch.js, after your other custom functions, add:
function mousePressed() {\n wizard.castSpell();\n}\n
If you peek inside of wizardClass.js file to look at the castSpell() function, you can see that it checks if currentSpell exists, and if it does, it will call it:
// inside of wizardClass.js\n\ncastSpell() {\n if (this.currentSpell) {\n this.currentSpell();\n }\n}\n
\nWhat is this?
this.propertyName or this.functionName() is the way that class objects refer to their own values and call class functions.
It can take some time to get used to working with this - for now you can think of it working just as if you were to use wizard.propertyName or wizard.functionName().
So far, every time we've added a new function we have also had to then call the function from somewhre. But the mousePressed() function is special.
\nThe mousePressed() helper function is part of the p5.js library, and is automatically called when you click the mouse on the canvas, so you do not need to call it from anywhere.
var wizard, pet, magicScroll, broom;\n\nfunction setup() {\n // ... code skipped for brevity\n}\n\nfunction draw() {\n // ... code skipped for brevity\n}\n\nfunction updateWizardPosition() {\n // ... code skipped for brevity\n}\n\nfunction updatePetPosition() {\n // ... code skipped for brevity\n}\n\nfunction mousePressed() {\n wizard.castSpell();\n}\n
Even though mousePressed() is automatically called for you, if you try the program now you won't see any change because we haven't given the wizard a .currentSpell yet, so if (this.currentSpell) will always be false.
We have several different spells to use, so let's add function updateCurrentSpell() that will control which one to use based on which room the wizard is in.
By the end, updateCurrentSpell() will help the wizard to:
Start by adding the beginning of the if else statement that will help switch between spells.
\nAt the end of sketch.js, add:
function updateCurrentSpell() {\n if (false) {\n wizard.currentSpell = changeOutfitSpell;\n\n } else {\n wizard.currentSpell = noSpell;\n }\n}\n
\n Inside of draw(), add updateCurrentSpell();
If you try it now, you should see your wizard saying \"Hmmm...\" when you click the mouse.
Because the if condition is currently set to false it will always use the final else statement and assign .currentSpell to noSpell.
If you look in spellFunctions.js, you'll see that noSpell doesn't do anything other than have the wizard say Hmmmm..., just as you saw.
// at the top of spellFunctions.js\n\nfunction noSpell() {\n wizard.say(\"Hmmm...\");\n}
This is exactly what we want, so that there's always a backup assigned in case none of the other if conditions are true, so that from now on, wizard.currentSpell always has a value.
If you change false to true, then it will always assign the changeOutfitSpell.
If you look closely, you may see that in updateCurrentSpell we aren't using () at the end of the function names - this is intentional!
\nIn JavaScript, the way that you call or perform a function is by adding () to the end.
But in this situation, we just want to refer to the function by using it's name without the parentheses ().
\nIn JavaScript, named functions are really just variables that point to function objects!
\n// try this at the end of the setup function\n\nvar namedFunction = function () {\n wizard.say(\"Mind blown!\")\n}\nnamedFunction();\n
If you look at the castSpell() function in wizardClass.js again, you can see that it first refers to currentSpell and then it calls the function with ():
castSpell() {\n if (this.currentSpell) { // refers to it\n this.currentSpell(); // calls it\n }\n}
Getting back to the updateCurrentSpell() function, we don't want to hardcode true or false, we want to use some code that will be true or false depending on which area of the castle the wizard is in, so that we cast a different spell in each room.
We'll do this by adding helper functions that return a boolean value (true or false) so that we can tell which room the wizard is in.
\nAt the end of sketch.js, add:
function inBedroom() {\n if (wizard.x < width/2 && wizard.y < height/2) {\n return true;\n } else {\n return false;\n }\n}\n
Now the condition of the if statement is a bit more complex, so let's break it down.
The first part is checking if the wizard is in the left half of the canvas, by checking if wizard.x is less than (<) half the canvas (width/2). If the first part is true, the && AND operator continues to the condition on the right, to see if the wizard is in the top half of the canvas by checking if wizard.y is less than (<) half the canvas height (height/2).
When both of these conditions are true, the function returns true. If either one is false, it returns false.
\nOnly when both sides of an && condition are true is the whole condition true.
var trueTrue = true && true; // true\nvar falseTrue = false && true; // false\nvar trueFalse = true && false; // false\n
Just one more change is needed before updateCurrentSpell() can start switching correctly between spells.
\nInside of updateCurrentSpell(), change the first if condition to call the new helper function:
function updateCurrentSpell() {\n if (inBedroom()) { // <---\n // ... code skipped for brevity\n }\n}\n
Try it out, and check that when wizard is in the bedroom area that it uses changeOutfitSpell() but still uses noSpell() everywhere else.
Right now only wizard.wandColor is changing.
\nGo into spellFunctions.js, in the changeOutfitSpell() function, and use the helper randomColor() to assign new colors to each of the other wizard colors:
Awesome, right?!
// in sketch.js\nvar wizard, pet, magicScroll, broom;\n\n// ... code skipped for brevity\n\nfunction draw() {\n background(\"lightgray\");\n\n updateWizardPosition();\n updatePetPosition();\n updateCurrentSpell();\n\n // ... code skipped for brevity\n}\n\n// ... code skipped for brevity\n\nfunction mousePressed() {\n wizard.castSpell();\n}\n\n// <--- start\nfunction updateCurrentSpell() {\n if (inBedroom()) {\n wizard.currentSpell = changeOutfitSpell;\n\n } else {\n wizard.currentSpell = noSpell;\n }\n}\n\nfunction inBedroom() {\n if (wizard.x < width/2 && wizard.y < height/2) {\n return true;\n } else {\n return false;\n }\n}\n// <--- end\n
// in spellFunctions.js\n\nfunction changeOutfitSpell() {\n wizard.say(\"Changicus!\");\n\n wizard.wandColor = randomColor();\n wizard.hatColor = randomColor(); // <---\n wizard.robeColor = randomColor(); // <---\n wizard.skinColor = randomColor(); // <---\n wizard.magicalNameColor = randomColor(); // <---\n}\n
Next up, you'll need to create the 3 remaining spells - readScrollSpell(), levitateBroomSpell(), and transformPetSpell() - and the helper functions - inStudy(), inKitchen(), and inGreatRoom() - that we'll need to assign a different spell in each room.
Let's make each new spell and the helper for the room to cast it in at the same time.
In the study your wizard will cast a readScrollSpell to read the hidden message on magicScroll.
\nAt the bottom of the spellFunctions.js file, add:
function readScrollSpell() {\n wizard.say(\"Presto inko!\");\n magicScroll.inkVisibility = 255;\n}\n
\nRead the contents of drawScroll() in drawFunctions.js to try and guess what effect assigning magicScroll.inkVisibility = 255 will have.
A short explanation is given further below.
\nNow we need the inStudy() helper and then to use it inside of updateCurrentSpell().
\nAt the bottom of sketch.js, create a new inStudy() helper function.
Using inBedroom() as your example, modify the the if conditions to correctly compare the wizard x and y values with the correct location of the study.
In addition to using < (less than), you may also need to use > (greater than). Be sure to combine two conditions using && to ensure the wizard is in the correct corner of the castle.
\n Next, add a new else if condition in the middle of updateCurrentSpell() that uses your newly made inStudy() function.
if (inBedroom()) {\n wizard.currentSpell = changeOutfitSpell;\n\n} else if (inStudy()) {\n wizard.say(\"Study time!\");\n\n} else {\n wizard.currentSpell = noSpell;\n}\n
When you cast your new spell in the Study, you should see a magical message appear and then disappear on the scroll.
The inkVisibility property on magicScroll is used to assign a transparency value when displaying the scroll's message. readScrollSpell sets magicScroll.inkVisibility to the maximum value of 255 (same as the 0 to 255 range for colors), which makes it fully visible. But over time, the value of inkVisibility decreases back to 0 using disappearSpeed, making it fully transparent and no longer visible:
You may have noticed that the readScrollSpell() function uses 3 other properties of magicScroll that you can adjust: message, color, and disappearSpeed.
\nIn setup(), add and customize the extra properties in the existing magicScroll object:
magicScroll = {\n x: 380,\n y: 50,\n message: \"Hello World\", // <---\n color: color(\"orange\"), // <---\n disappearSpeed: 1, // <---\n}\n
In the kitchen, your wizard will call levitateBroomSpell(). Why sweep when you can use magic, right?
\nAt the bottom of file spellFunctions.js, add:
function levitateBroomSpell() {\n wizard.say(\"Levi broomi!\");\n broom.levitate = !broom.levitate;\n}\n
This spell uses the ! (bang) to toggle the boolean true / false value of broom.levitate.
\nAdding ! in front of a boolean value will return the opposite value.
var bangTrue = !true; // false\nvar bangFalse = !false; // true\n
So if broom.levitate is currently true, it will be assigned to false, and vice versa.
\nCreate the inKitchen() helper function at the bottom of sketch.js
\nAdd a new else if inside of updateCurrentSpell() and assign wizard.currentSpell to levitateBroomSpell when inKitchen() is true
Now your wizard has the power to levitate and move the broom with the mouse.
\nCheck out the drawBroom() function in drawFunctions.js to better understand the effects of changing the value of broom.levitate.
Lastly, in the Great Room, your wizard will practice transforming your pet into different creature forms.
\nAt the bottom of spellFunctions.js, add:
function transformPetSpell() {\n wizard.say(\"Switcha petta!\");\n\n var petTypes = [\n \"cat\",\n \"frog\",\n \"ghost\"\n ]\n\n var newType = random(petTypes);\n var newColor = randomColor();\n\n pet.type = newType;\n pet.color = newColor;\n}\n
Previously you used random to select a number value from a range, but it can also be used to randomly select an item from a list - an Array object JavaScript.
\nArrays are created by putting values inside of square brackets: var array = [1, 2, 3]
petTypes is an array of names of the possible pet types.
One final step to finish adding the ability to cast the fourth spell.
\nCreate the inGreatRoom() helper at the bottom of sketch.js
\nAdd a new else if inside of updateCurrentSpell() to use transformPetSpell when inGreatRoom() is true.
Have fun transforming your pet! (I'm pretty sure it doesn't hurt...)
// in sketch.js, after mousePressed()\n\n// <--- start\nfunction updateCurrentSpell() {\n if (inBedroom()) {\n wizard.currentSpell = changeOutfitSpell;\n\n } else if (inStudy()) {\n wizard.currentSpell = readScrollSpell;\n\n } else if (inKitchen()) {\n wizard.currentSpell = levitateBroomSpell;\n\n } else if (inGreatRoom()) {\n wizard.currentSpell = transformPetSpell;\n\n } else {\n wizard.currentSpell = noSpell;\n }\n}\n\nfunction inBedroom() {\n if (wizard.x < width/2 && wizard.y < height/2) {\n return true;\n } else {\n return false;\n }\n}\nfunction inStudy() {\n if (wizard.x > width/2 && wizard.y < height/2) {\n return true;\n } else {\n return false;\n }\n}\n\nfunction inKitchen() {\n if (wizard.x < width/2 && wizard.y > height/2) {\n return true;\n } else {\n return false;\n }\n}\n\nfunction inGreatRoom() {\n if (wizard.x > width/2 && wizard.y > height/2) {\n return true;\n } else {\n return false;\n }\n}\n// <--- end\n
// spellFunctions.js\n\nfunction noSpell() {\n wizard.say(\"Hmmm...\");\n}\n\nfunction changeOutfitSpell() {\n wizard.say(\"Changicus!\");\n\n wizard.wandColor = randomColor();\n wizard.hatColor = randomColor(); // <---\n wizard.robeColor = randomColor(); // <---\n wizard.skinColor = randomColor(); // <---\n wizard.magicalNameColor = randomColor(); // <---\n}\n\n// <--- start\nfunction readScrollSpell() {\n wizard.say(\"Presto inko!\");\n magicScroll.inkVisibility = 255;\n}\n\nfunction levitateBroomSpell() {\n wizard.say(\"Levi broomi!\");\n broom.levitate = !broom.levitate;\n}\n\nfunction transformPetSpell() {\n wizard.say(\"Switcha petta!\");\n\n var petTypes = [\n \"cat\",\n \"frog\",\n \"ghost\",\n ]\n\n var newType = random(petTypes);\n var newColor = randomColor();\n\n pet.type = newType;\n pet.color = newColor;\n}\n// <--- end\n
Congratulations, you've done it! You've completed the first steps on your Code Wizard journey.
In this tutorial, you've worked with many of the fundamental building blocks of programming:
Want to view the full project solution?
\nView at Code Wizard Castle Solution
\nYou are well on your way to becoming a Master Code Wizard.
Best of luck in your future code adventures!
These will help as you tackle the extra challenges below or head off into new programming territory to further grow your code magic skills.
You've completed the tutorial, but can you complete all of the bonus challenges below?
"},{"id":"T0E6OlNlY3Rpb24tNjAwOQ==","title":"Challenge 1 (Easy)","htmlContent":"Make the pet change directions before it runs in the edge of the canvas so it doesn't look like it's walking into the walls.
Further customize the appearance of your castle by modifying more functions in drawFunctions.js
Add a new pet type by adding it to the array in transformPetSpell(), creating a new drawName() function for it, and modifying the if statement in drawPet() to call your new function
You may have noticed that if you levitate the broom and then leave the kitchen area that the broom stays levitated while you cast other spells.
Modify updateCurrentSpell() so that whenever broom.levitate is true the .currentSpell stays assigned to levitateBroomSpell(). That way you can drop the broom even if you move between rooms.
Come up with your own totally unique customization of the Code Wizard Castle and share it with us!
Send us a link to your custom code and a short description of your changes: Email Us
We can't wait to see what you'll create!
"}]},"next":null,"previous":null}]}},"page":{"id":"T0E6OlBhZ2UtMTQ4OQ==","title":"Expand Your Powers","slug":"expand-powers","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjAwOA==","title":"Expand Your Powers","htmlContent":"Congratulations, you've done it! You've completed the first steps on your Code Wizard journey.
In this tutorial, you've worked with many of the fundamental building blocks of programming:
Want to view the full project solution?
\nView at Code Wizard Castle Solution
\nYou are well on your way to becoming a Master Code Wizard.
Best of luck in your future code adventures!
These will help as you tackle the extra challenges below or head off into new programming territory to further grow your code magic skills.
You've completed the tutorial, but can you complete all of the bonus challenges below?
"},{"id":"T0E6OlNlY3Rpb24tNjAwOQ==","title":"Challenge 1 (Easy)","htmlContent":"Make the pet change directions before it runs in the edge of the canvas so it doesn't look like it's walking into the walls.
Further customize the appearance of your castle by modifying more functions in drawFunctions.js
Add a new pet type by adding it to the array in transformPetSpell(), creating a new drawName() function for it, and modifying the if statement in drawPet() to call your new function
You may have noticed that if you levitate the broom and then leave the kitchen area that the broom stays levitated while you cast other spells.
Modify updateCurrentSpell() so that whenever broom.levitate is true the .currentSpell stays assigned to levitateBroomSpell(). That way you can drop the broom even if you move between rooms.
Come up with your own totally unique customization of the Code Wizard Castle and share it with us!
Send us a link to your custom code and a short description of your changes: Email Us
We can't wait to see what you'll create!
"}]},"next":null,"previous":null}}},"staticQueryHashes":[]}![\"wizard](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P02-Decorate-Your-Castle/assets/floor_wizard.png\" "\\"wizard")
\n ![\"black](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P02-Decorate-Your-Castle/assets/black_cat.png\" "\\"black")
\n ![\"mouse](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P02-Decorate-Your-Castle/assets/coords.png\" "\\"mouse")
\n ![\"decorated](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P02-Decorate-Your-Castle/assets/decorated_castle.png\" "\\"decorated")
\n ![\"frolicking](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P03-Animate-Your-Castle/assets/frolicking.png\" "\\"frolicking")
\n ![\"cauldron](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P03-Animate-Your-Castle/assets/cauldron_flames.png\" "\\"cauldron")
\n ![\"random](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P03-Animate-Your-Castle/assets/random_flames.png\" "\\"random")
\n ![\"random](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P03-Animate-Your-Castle/assets/random_flames_2.png\" "\\"random")
\n ![\"wizard](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/hmmm.png\" "\\"wizard")
\n ![\"change](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/outfit_spell_1.png\" "\\"change")
\n ![\"change](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/outfit_spell_2.png\" "\\"change")
\n ![\"change](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/outfit_spell_3.png\" "\\"change")
\n ![\"change](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/outfit_spell_4.png\" "\\"change")
\n ![\"magic](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/magic_message.png\" "\\"magic")
\n ![\"levitate](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/levitate_up.png\" "\\"levitate")
\n ![\"levitate](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/levitate_down.png\" "\\"levitate")
\n ![\"transforming](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/pet_1.png\" "\\"transforming")
\n ![\"transforming](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P04-Cast-Your-Spells/assets/pet_2.png\" "\\"transforming")
\n ![\"hour](\"https://code.org/api/hour/finish_makeschool_wizard.png\" "\\"Hour")
\n ![\"completed](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Code-Wizard-Castle-Tutorial@master/P05-Expand-Your-Powers/assets/final_castle.png\" "\\"completed")
\n