Mole Mash Here’s an idea for a fun App that’s quite easy to create You will need to create or collect the following resources: • A background picture, we used one to represent grass, don’t get a super high res one, it will be to large. • A mole hill picture - this needs to be quite small. Ours are only 100 x 30 pixels in size • A cartoon type picture of a picket fence, this is a png file with a transparency • Mole - again this icon is quite small, only 44x44 pixels. • A ‘boing’ sound file. If you use graphics that are very large, it will slow down your App, so only make them as big as they need to be. You also need to initially be aware of the screen size that you are writing your App for. EXAMPLE SCREEN SIZES (Pixels Per Inch) iPhone 4/S - 320 x 480 iPhone 5 - 640 x 1136 Design Before starting to create and code your game it is good practice to fully design it to begin with. This is easily done with pencil and paper. Draw out where you want graphics to be and if you have more than one screen, how they link together. You can also include what you want to happen in the App. It’s a bit like creating a story board and will save you time later. The more you plan for at this stage the easier it will be to implement and the less chance of finding major issues later on. Level 5 Project http://www.kudlian.net
Transcript
Mole MashHere’s an idea for a fun App that’s quite easy to create
You will need to create or collect the following resources:
• A background picture, we used one to represent grass, don’t get a super high res one, it will be to large.
• A mole hill picture - this needs to be quite small. Ours are only 100 x 30 pixels in size
• A cartoon type picture of a picket fence, this is a png file with a transparency
• Mole - again this icon is quite small, only 44x44 pixels.
• A ‘boing’ sound file.
If you use graphics that are very large, it will slow down your App, so only make them as big as they need to be.
You also need to initially be aware of the screen size that you are writing your App for.
EXAMPLE SCREEN SIZES (Pixels Per Inch)!! iPhone 4/S - 320 x 480
! iPhone 5 - 640 x 1136
DesignBefore starting to create and code your game it is good practice to fully design it to begin with. This is easily done with pencil and paper. Draw out where you want graphics to be and if you have more than one screen, how they link together.
You can also include what you want to happen in the App. It’s a bit like creating a story board and will save you time later. The more you plan for at this stage the easier it will be to implement and the less chance of finding major issues later on.
Level 5 Project
http://www.kudlian.net
Step 1
• Log into your AppFurnace account and start a new App, you’ll need to give it a name.
You will also need to decide if you want it create it for a tablet or phone sized device. We would recommend phone sized as you can always scale it up if it gets installed to a tablet.
Step 2
• Upload all the resources you have ready to use, the pictures and audio files, to your AppFurnace Files folder.
To do this click the Files button in the menu at the top of the Browser window to open the Files window.
Level 5 Project
http://www.kudlian.net
To upload your files;
• Select the Default folder.• Click the Upload button, a filer
window will open.• Navigate to the resources you wish to
upload, select them all and click Choose button.
The files will all be uploaded to the folder
It is also a good idea to create a separate Audio folder to move your audio file to. This just keeps things tidy.
• Click the Add Folder button• Make sure the new folder is selected and then click Rename and enter Audio for
the new name.• Drag your Audio file into this folder.• Click on the Layout button to return to the Preview.
Step 3
The resources that you add this App will need to built up in layers in order for it to work properly. Imagine the screen being built up as thin layers. Each ‘layer’ is one of the resources as shown in the diagram below.
Layer 1 to add is the background, in our App, the picture of grass;
•Select the Preview , and in the Properties click the Shape Color Border & Shadow tab• From the Image drop down, choose your picture.
We also set the Image Size to be stretch and the Image Position of the graphic to be the center of the screen.
Layer 2 contains the Mole hills and the Picket Fence. We are going
Transparent layer - actually a big transparent button
Level 5 Project
http://www.kudlian.net
to need a total of 9 hills on screen and they need to be positioned in the correct places so that the mole will appear just above them. You could do this by trial and error as a prototyping exercise but for the App it’s best to do it correctly and accurately. Although we won’t be storing exact coordinates of objects, it’s useful to understand how things work.
Imagine the screen of the mobile device is a grid. Each point on the grid has its own coordinates. The coordinates refer to top left hand corner of the grid square. In the diagram opposite the top left most corner is coordinate 0,0.
The X, or horizontal axis, coordinate is written first followed by the Y, or vertical axis, coordinate. If you look carefully at the second point, 11,16 that refers to a position 11 pixels in from the left hand side of the screen on the X axis and 16 pixels from the top of the screen on the Y axis.
AppFurnace is great for prototyping layout as it is very quick and easy to alter the size of the graphics in the Preview.
Prototyping our Graphics
• Click the Image Widget tab and drag and drop an Image Fit widget to the Preview.• With the Widget still selected, click the Image drop down under Settings and choose
the Mole Hill graphic.• Select the Size and Position tab and change the Width to 100 and the Height to 60
pixels.• Click the ImageButton widget and drag and drop the widget to the Preview.• With the widget still selected, click the Settings tab and change the Image to the Mole
graphic.• Repeat this for the Tapped Image.• Select the Size and Position tab and change the Width to 45 and the Height to 45
pixels.
The graphics are now sized as we want them, we might have to tweak them a little bit when we work out how it will all fit onto the screen correctly.
You could now move your Mole graphic and position it on the first mole hill.
You will notice that when a Graphic is selected, there is a small diamond symbol in the top left hand corner. This indicates where the coordinate position is taken from and the values can be seen in Properties, by clicking the Size & Position tab.
Level 5 Project
http://www.kudlian.net
The iPhone 4s screen size is 320 x 480 and we will use this in the example. All sizes are in points per inch (PPI).
The Mole Hill graphic is 100 x 30 and we need three of them spaced equally across the screen and not forgetting we need to leave space for the mole to appear above them as well.
Mole graphic is set to 44 x 44.
Now for a bit of Maths...
Our three mole hills add up to a total width of (fill in the answers) :
100 x 3 =! Total Width
If the screen is 320 wide, that leaves a total of how much space?
320 - Total Width = Remaining Space
We need to place the mole hills equal distance apart and from the left and right side of the screen. That is a total of four spaces.
Remaining Space / 4 = Single Space
We could try to position our graphics equally on screen by modifying the Size & Position settings for each one but this would then not display correctly on a mobile device with a different screen size. In our App we are going to add a bit of code that will calculate this all for us automatically.
• Select the image widget of the first mole hill in the Preview.
• Click the Size and Position tab in Properties, and enter the X and Y values as shown in the diagram left.
• Next copy and paste the graphic. (Ctrl X & Ctrl Z , Windows or ⌘C, ⌘V Mac)
• The newly pasted graphic sits directly over the top and is currently selected.
• You could drag and drop it but instead simply change value of the X coordinate to be 110.
• Repeat with the process and change the value of the X coordinate to 215.
You now have a row of mole hills.
Level 5 Project
http://www.kudlian.net
Remember to regularly save your work.
Two more rows of Mole hills should be added in a similar way. The diagram has the coordinates of each of the mole hills below it in our design for the iPhone 4S.
The coordinates are going to different if you are designing for a different sized display screen.
What Else needs to be in this ‘layer’?
• A Start Button• A Score Display• A Time Display• Picket Fence divider
Start Button
• Drag and drop a button Widget to the bottom of the Preview.
• Change the text on the button to Start by selecting the Settings tab and changing the Text field.
• Change the buttons colour, click on the Shape Color, Border & Shadow tab, and change the Background Color using the color picker.
• Change the color of the border.
5, 56 110, 56 215, 56
215, 1565, 156 110, 156
5, 256 110, 256 215, 256
Level 5 Project
http://www.kudlian.net
Score & Time Display
These are both Label Widgets with another Label positioned above each identifying them.
• Drag and drop four Label Widgets to the Preview screen and position as shown in the diagram above.
• Click the Widget that will be labelled Score to and then change the text in Settings to what you want to appear, i.e. Score.
• You will also need to change the background color to transparent. You do this in the Shape Color, Border & Shadow Properties tab.
• Repeat this process entering the correct information for the Time label.
Picket Fence
Use an Image Widget and in the properties change the Image to that of the Picket Fence
In our initial planning, considering the function of the game, we came up with some key features;
1)The mole needs to move randomly on screen, appearing over a mole hill for a set period of time.
2) The game should run for 30 seconds3) Each time the mole appears the player can tap it.4) If the player taps on the mole, the score increments by 15) If the player misses the mole the score is reduced by 1.6) At the end of the game the score is displayed.7) We can reset/restart the game.
The functions can then be coded into the game. In the example code below we have annotated the code to explain what various functions do. The explanations are denoted by // and the text is in grey. Some of these comments can be deleted from your code.
The complete code can be downloaded from the website;
The Code // Here’s the code for the basic Mole Mash App. Comments are used to explain the function of parts of the code.
// Set up some global variables// Global variables allow information to be stored from multiple functionsvar score = 0;var speed = 2500;var time;var timeMole;var timeSeconds;
//Set a variable to be an array. An array is a special variable, which can hold more than one value at a time. // This array holds all of the moleHills in the layout
var moleHills=[ui.moleHill1,ui.moleHill2,ui.moleHill3,ui.moleHill4,ui.moleHill5,ui.moleHill6,ui.moleHill7,ui.moleHill8,ui.moleHill9];
// Assigned to the Start button, to start the App.
function start() { // Resets Game each time start button is tapped. First runs the endgame function endgame(); // Set up default variables time = 30; score = 0;
// Update the layout information ui.points.text(score); //which will be 0 ui.time.text(time); //which will be 30 ui.time.fontSize(36); ui.time.fontColor("#000000"); //font color black ui.score.fontColor(“#FFFF00”); //font color yellow ui.score.fontSize(36); ui.mole.hidden(false);
// Create timers // These run a function every time the interval is passed // The time is in milliseconds, so each 1000 milliseconds equals 1 second see Appendix for more details on Timers
//Then move the mole to its first destination by running the moveMole function.
moveMole();}
// Decreases the time by 1 if it is greater than 0
function timer() { if (time > 0) { time = time -‐ 1; ui.time.text(time); //changes the value displayed // Change the font color of the display if value of time is between certain parameters, less then 15 but equal or greater than 6.// && makes it evaluate both criteria
if (time <15 && time >=6) { ui.time.fontColor("#FF9900"); //Displays orange } // Time is less than 6 else if (time < 6){ ui.time.fontColor("#FF0000"); //Displays red } } else { endgame(); //runs the endgame function }}//Make sure you have got the right number of brackets to close off each block of code. The number of left and right parenthesis {} should be equal, in the example above there are five.
//Make the mole move
function moveMole() { // Select a molehill, set two variables
var index = (Math.floor((Math.random()*9))); var moleHill = moleHills[index]; var offsetY = -‐28; // The offset raises the mole by 28ppi
//Math.floor() returns the largest integer less than or equal to a number. Math.Random()*9 indicates it will be between 0 and 9.
Level 5 Project
http://www.kudlian.net
// Move the mole to the center of the selected molehill, note on the y axis there is an offset to position the mole higher.
// Function runs when mole is hit, initialises sound and plays the audio file, adds 1 to score and updates the score display, runs the moveMole function.
function mash() { af.audioChannel.init(1); af.audioChannel.add(0,"Audio/boing.wav"); score = score+1; ui.points.text(score); moveMole();}
// Function runs when mole is missed, decrements the score by 1, updates the score displayed, runs moveMole function
function missed() { score = score-‐1; ui.points.text(score); moveMole();}
//Runs to end the game
function endgame() { // Display Game Over instead of time value ui.time.text("Game Over"); ui.time.fontColor("FF0000"); //color red ui.time.fontSize(36); ui.mole.hidden(true); clearInterval(timeMole); //clears the variables clearInterval(timeSeconds);}
//End
Level 5 Project
http://www.kudlian.net
Making it Work
The next step is to make all the buttons and display work by linking them to the code.
• Save your work and select the Layout button.• Select the Start button in your preview• Click the Using Code tab in the properties panel on the
right of the window.• In the Tapped Function field type start• Select the score label, where score is to be displayed, and under the code tab in the
Code Name field type points. AppFurnace will automatically prefix it with ui. if you forget.
• Select the Time display and in the Code Name field enter time.• Next select the mole and make sure it is in the position over the first mole hill top left of
the screen.• In the Tapped Function enter mash and in the Code Name ui.mole
Tapped Function will run the function named mash in code when clicked in the Tapped Function enter mash, this will run the function named mash in code when clicked
All that is left to do is add in the large transparent button that will register when you miss tapping the mole.
• Drag a Button widget to the screen and set its properties to have no text and change its style so that it has no background colour, i.e. it is transparent.
• Resize it to cover the whole width of the screen down to just above your picket fence graphic.
• Under the Code tab type missed into the Tapped Function field.
At the moment this ‘button sits over the top of the mole graphic. You will need to move this button to one side so that you can select the mole graphic and then using the Order button in the toolbar, bring the mole graphic to the front.
Reposition your transparent ‘missed’ button and save.
You should now be able to Preview online and if everything works transfer it to our mobile device.
If you want to copy and paste the code to your own App, it can be downloaded through our website;! http://www.kudlian.net/Kudlian_Software/codemole.html
Note: Throughout this document the spelling of color uses the American English variant as this is the spelling used in coding languages.
Level 5 Project
http://www.kudlian.net
More to do...
The code, although it works is basic, for example if you tap on Mole or the mole hills the score either increases or decreases irrespective of if the game has been started!
The timer is always set to 30 seconds. Can you think of a way of allowing the user to alter the duration of the game?
You could also set a target value for the maximum number of hits. When the value is reached the game could also be over. You would then display the time it took to reach the goal.
How about different levels, add an additional level, once level one is completed the user could go onto level 2. You might even like to set a trigger for this to happen, for example the user can’t go onto the next level until a certain score is reached.
You could also explore how you might implement a score board, top ten scores for example.
Level 5 Project
http://www.kudlian.net
Appendix
JavaScript Timing EventsWith JavaScript, it is possible to execute some code at specified time-intervals. This is known as timing events.
It's very easy to time events in JavaScript. The two key methods that are used are:
• setInterval() - executes a function, over and over again, at specified time intervals
• setTimeout() - executes a function, once, after waiting a specified number of milliseconds
We are using the setInterval Method
Syntax! setInterval("function", milliseconds);
So what does it do?
The setInterval() method will wait a specified number of milliseconds, and then execute a specified function, continuing to execute the function, once at every given time-interval.
The first parameter of setInterval() should be a function.
The second parameter indicates the length of the time-intervals between each execution.
Milliseconds are written as;!! 5000 = 5 seconds! 2000 = 2 seconds
In Our Example
Run the moveMole function every 2.5 secs ( speed is a variable that has been set to 2500 milliseconds).! setInterval(moveMole, (speed));
How to Stop the Execution?
The clearInterval() method is used to stop further executions of the function specified in the setInterval() method.
Syntax Used
clearInterval(intervalVariable)
In our example we used the following;! clearInterval(timeMole);
Level 5 Project
http://www.kudlian.net
To be able to use the clearInterval() method, you must use a global variable when creating the interval method: We used a global variable of timeMole! e.g. var = timeMole;
Then you will be able to stop the execution by calling the clearInterval() method.
Brackets
We use three different types of brackets in JavaScript { }, ( ) and [ ].
The curly brackets, are used to define the start and end of the function, they also separate code into blocks within the function. Parenthesis help JavaScript to understand the structure of the script and what we want it to do.
function MyFunction(){ alert("Hello world!")! ! ! }
It is also used to separate blocks of code within the function, like this:
function MyFunction(){! if (a==1){! alert("Hello world!") } else{ alert("Goodbye world!") }}
In this example if the variable "a" is equal to 1 the message "Hello world!" is displayed, else the message "Goodbye world!" is displayed.
Indentations in the text make it easier to read and make it easier to see that all opening brackets are matched by closing brackets. It's also much easier to see where the "if" statement starts and ends and what the two options are.
When we send and receive parameters we use the standard parentheses "( )".
Note that the "alert" that displays an alert message also is a function, but it is one of the built-in functions in JavaScript.
"[ ]" brackets are used with arrays, a more advanced form of variables containing more than one value, as in our use for the molehills.
