Do you want to code video games but don't know where to start? Well give this tutorial a shot! This instructable will give step-by-step instructions as to how to make a spot the difference game using the Code.org app platform.

Feel free to customize the game however you want (such as adding a different theme, changing the button colors, adding funny pictures etc.) and have fun!

The link to the game we will be creating

Supplies:

Since you are creating an app, what you will need is:

A laptop or computer with internet access
A code.org account
Some basic coding knowledge (which I will include in this tutorial)*
Photos/pictures to use on the app

*The coding language this tutorial will use is Javascript however if this is too difficult, you can switch over to the block programming format

Step 1: Getting Started

In order to code on the Code.org app platform, you must create an account (if you have a school account feel free to use that). Once you have created this, you can begin coding!

On the home screen, click on the "Create" Tab (in the upper right corner) then scroll all the way down to the title reading "App Lab." Once you click on that, you should see a screen like that example above.

Here you can see 3 different tabs labeled: Code, Design and Data. We will only be focusing on the first 2 tabs in this tutorial though, Code and Design.

TheCode tab is where you do all the programming that allows the app to work. There are 2 different styles of programming used here: block and manual. If you want to use the block programming method (the easier of the two), simply drag and drop the code in the toolbox onto the workspace. If you choose to type everything out manually, you can click the arrow near the toolbox to hide it.

The Design tab allows the user to design the interface of the app - pretty much how it will interact with the people using it. Through the design tab you can customize the apps buttons, fonts, backgrounds and so much more! Much similar to how block programming works, you simply drag whatever you want from the design toolbox onto the screen. Afterwards, you can change the settings of it (font size, color etc) and give it a proper ID (this will be useful when coding later).

Since our focus is a spot-the-difference game, our screens will include (but are not limited to):

Winning and losing screens
An introduction menu (where you hit "start" for the game to begin)
A main menu that will allow the player to get a tutorial and pick levels
Different game layouts

Step 2: Coding

As previously mentioned, you need some coding knowledge when creating this project. Now you do not need years of experience in order to make this, however you should understand the basic functions being used in this project:

onEvent(id, type, callback)
- Used as a tool for documentation and allows the user to indicate a specific action when something is called
setScreen(screenid)
- Whenever you want to set a specific screen, you type this out with the corresponding screen you want to set in the (screenid)
console.log(message)
- When debugging a program, you can write specific message to print out that only you see
  - For example, if a certain part of the code is activated and you want to make a note, you can do: console.log("This program opened")
  - If you want to create comments in the code, simply put 2 backslashes // (in my code I use a lot of these only to help section each part off, but 2 will suffice)
function myFunction()
- This allows you set functions in your code that can be called later on
  - Make sure to label your functions at the top of your code and in throughout the body
setInterval()
- This works hand in hand with the setTimeout and sets the amount of time you will have that specific part run
setTimeout(callback, ms)
- Executes the callback function code every time a certain number of milliseconds has elapsed, until cleared
  - This function can help when creating a blinking effect (as shown in my winning and losing screens)
showElement(id)
- Will show a hidden element when you call it
  - For example, I used this function when wanting to show the hints. It was previously hidden however once you clicked the hint button, it allowed you to see the code
hideElement(id)
- Will hide an element when you declare it
var(x)=()
- Prompt the user for a value and stores it

Keep in mind that code is case sensitive! So if you capitalize a specific letter that should not have been capitalized, it will affect the code. Not only that, but you must add a semicolon (;) at the end of each statement and connecting braces ({}) when using code (you can click on the link below to understand).

After you have read that upper portion, let us begin coding! If you view my example, I began with variables, labeled score (set to 0)and guesses (set to 5) at the top, followed by my functions and the rest of the code.

In order to access the variables and functions, you must label these at the beginning of your code. The computer reads it from top to bottom, so it will read these files first.

After you have created the functions you wanted and set the variables to a specific number, you have to code for the body. During this part, you want to use the labels you set in the design to correspond with your commands. For example:

function main(){

onEvent("startBtn", "click", function (){

setScreen("mainScreen");

console.log("Main Screen Set!"); });

Once the button labeled startBtn is clicked, it will set the next screen called mainScreen. Then it will send a message (that only you can see) that reads "Main Screen Set!" Once you complete the first screen, all you have to do is repeat the code for the rest of the game (switching out the ID's as you go). In fact, if you carefully look at my code you can see that it is very repetitive - the only chances is the name and score required to win.

The thing with coding is that it takes a lot of patience. Don't expect to get everything to work on the first try when you code it - it takes some grit (the following section will better explain the math and special statements used).

Link to the code being used

Step 3: Understanding Math and Special Statements

As painful as it sounds, yes - there is math involved in this game. But don't worry, it is very easy to understand and requires only basic algebra.

The math used in this game is quite straightforward:

Addition
Subtraction
Special cases with equal signs
- When it comes to equal signs, it can get quite tricky. = means that it declares a number equal to that current one however == means if something is equal to that

The special statements used:

If statements
Else if statements

Math example:

score = 0;

onEvent("house", "clicked", function() ) {

score = score + 1; });

What that means is that the score initially equals 0 however it will later be updated when a certain action is done, thus making the score equal 1.

Special statements example:

onEvent("heartImage", "click", function(){
score = score + 1;

setText("total_score", score);

if(score == 2){

setScreen("winScreen");

} else if (guesses === 0 ) {

setScreen("loseScreen"); } });

This is where the special case statements come into play: if and else if statements. If the score equals 2, then it will show the winning screen else if is not 2 and guesses equals 0, then it will show the losing screen.

Step 4: Designing the Layout

When designing this project, I had a specific theme in mind that surrounded the Korean characters Kakao Friends. So when picking out backgrounds and pictures, I simply went on Google, searched up the following images and saved them onto my laptop (all photos used where found on the Google Public domain and I do not own these). Example searches that might help would be:

Kakao Friends
Kakao Friends background
Kakao Friends gif

The good thing about Code.org is that it allows for gifs (moving images) to be used on the app so it can enhance your design. Just make sure that the background is transparent! Incase you find an image that does not have a clear background, go to the following link to edit your photo: LunaPic.

Code.org also includes default images and colors but I found that looking up my own images made it more aesthetically pleasing. A good tool to use when wanting to add more colors is: HTMLcolors (when using this, copy the number after the word HEX and paste it into the color box).

After you have picked everything out, it is time to get designing! Drag the object you want, such as a photo or button, onto the screen and give it a specific ID. As previously mentioned, this is very important for the code. For example:

function main(){

onEvent("startBtn", "click", function (){

setScreen("mainScreen");

console.log("Main Screen Set!"); });

The button in the very beginning has the specific ID: startBtn (meaning the start button). When it is clicked, the next screen, labeled mainScreen, will appear. You want to be careful when naming each part or else the code will not work properly.

Another thing to keep in mind is the order of the objects. If you place multiple objects on top of each other then when you click on a button it might not work. To fix that, you can click on the arrows at the bottom: >> > < << (that should look like that). You can also use the hidden function to hide certain images or buttons until a given time or unless something activates.

Step 5: Repeat the Coding and Designing

As cliche as it sounds, that's all it really takes to create the app! Lots of repetition between coding and designing. Have fun and goodluck creating this!

Helpful links:

Code.org is a great platform to understand the basics of coding and teaches a variety of courses: Code.org Classes
- The main thing to keep in mind is that they do not teach other languages and specifically focus on Javascript (not C++ or Python)
Each year there is an Hour Of Code event that includes fun coding games for all ages: HourOfCode
- Anything from dance parties to fighting games can be found here! It has the user build games and let's you play the finished product
- It also includes various settings (beginner and comfortable)