Explorers – Week 3 – 2018, Your First Game!

Hi everyone!

Wow! what a fantastic turnout on Saturday again, 79 ninjas in the room! plus a few adults!

I hope you had a good time, I know that I really enjoyed it. There was a really great atmosphere and energy in the room.

A special thank you to Mentor Julia for getting 14 loaner laptops working for us this week, so that everyone that wanted to participate, could. Another thank you to the other Mentors in the room, Eoin and Ruaidhrí, it makes my job easy when they can get around the room and help out when needed. You are doing a great job.

One of the first things we must do before we start anything is make a plan.


We quickly learn when we begin our coding that it is very important to test our code as we go along. Making mistakes is good, but we must learn from them by spotting them (testing) and fixing them.

I am attaching my notes in PDF for you. CDA-S7 Week_03-FeedingtheFish.pdf

We will continue to add to the game next week but don’t worry if you weren’t here this week, I will have a copy of the game so that you can join in.

See you all nest week!

Martha and the Explorers Mentors, Julia, Eoin and Ruaidhrí

Creators – Basic Scripting

Screenshot 2018-09-30 at 11.22.16

 

This week we were joined by some additional ninjas, welcome! We had to do a little revision of the first week’s content and probably didn’t manage to get quite a much done as I’d hoped.

Let’s review what we did manage to get done.

Embed a simple script in a web-page

The first thing we did was to create our folders for this week and then create a brand new HTML file called index.html. We then embedded a simple script in our html file using the tag, like this:

window.alarm("I'm alarmed");

When we opened our page in Chrome, our message popped up as an alert.

Seperate that script into its own file

We then created a new file in our folder called script.js. We cut out everything from in between our and tags and pasted it into this new file:

window.alarm("I'm alarmed");

and in our HTML file we gave the tag the name of this file instead, using the src= attribute (short for “source”) :


Our script continued to work as before, as we’d hoped.

The advantage of moving scripts into their own files is that as we get more scripts and these scripts get more complex, keeping them all within the HTML file gets messy and difficult to work with.

Developer Tools

The developer tools build into Chrome, and some other browsers, help us see what is happening with our pages and scripts and helps us to fix them when they’re not working correctly.

To open the developer tools, open the menu in Chrome (the three dots in the upper-right of the program) and select More Tools | Developer Tools.

The console, part of the developer tools, is a place for us, as programmers, to write out things that will help us check if our script is doing what we want it to do. Ordinary users never see what developers write to the console.

To write to the console, we changed our script.js to read:

console.log("I'm alarmed");

The message box stopped appearing and this message could only be seen by looking at the console.

Basic Script Concepts

The most important basic concept in programming is that of a variable. A variable is just a place to store something and a name to refer to it by. We can make a new variable, in this case called a, like this:

let a;

The first word, let, is known as a keyword and tells JavaScript “we’re going to make a new variable”. The name of the variable, in this case a, comes next and finally a semi-colon (;) to show that this line is finished. The semi-colon is how we mark the end of a command in JavaScript and it’s an easy thing to forget.

We quickly made this example more complex:

let a = 4;
let b = 5;
let c = a + b;

console.log("c");
console.log(c);

In this extended example we defined three variables called a, b, and c respectively. Not only do we define them, we also assign them a value (using the operator =) at the same time. The first two are just given a simple value, but c has a value calculated from adding a and together.

The two console.log() line are to show the difference between actually writing the letter c to the console (as in the first line) and writing the value of the variable called c to the console (as in the second line).

Strings

Strings are how we hold a piece of text in a program. Strings are surrounded by quotations marks:

"This is a string"

I didn’t mention the last day, although I mean to, that JavaScript also allows strings with single quotes, which many other programming languages do not:

'This is also a string'

We experimented with changing our script so that instead of numbers we set our variable to strings:

let a = "4";
let b = "5";
let c = a + b;

console.log("c");
console.log(c);

and in the console saw the perhaps surprising result:

c
45

We determined that when we have two number variables the operator + does normal addition but when one or both are strings it makes a new string with the two stuck together (this is often called “concatenation”).

We introduced the following four mathematical operators:

  • + : Plus does addition
  • – : Minus does subtraction
  • * : Asterix does multiplication
  • / : Forward-slash does division  (don’t confuse with back-slash \)

Conditions

We looked at a simple condition. This allows us to choose between two options based on whether a check was true or not:

if (c < 1){
  console.log("c is less than one")
}
else {
  console.log("c is greater than one")
}

The keyword if  starts this check. The thing we’re testing is then inside roundy brackets (). Here we’re checking “is c less than one?”. After this we get a block of code (contained in the curly brackets {}) to do if it is true. Here we’ve also added (which is optional, you don’t have to have this if you don’t need it) the keyword else and another block of code to do if it is not true.

Basic Functions

Functions perform an action. They contain a bunch of commands to run together.

They’re great where we’re doing the same thing repeatedly but from different places and they help to logically break-up and organise our scripts.

Here’s a basic function that just writes to the console:

function SayHi(){
  console.log("Hi");
}

The keyword function indicates that we’re going to define a function. Next comes the function name, SayHi in this case, followed by roundy brackets (), followed by a block of code surrounded by curly brackets {}. Inside the curly brackets are the commands that make up this function.

To make this function actually run we need this in our script:

SayHi();

Without this the function would never run. Functions only run when we “call” them.

Function Arguments

Sometimes it’s nice to be able to give a function more information about what we want to do. A function can take several values as input, these are called arguments.

Let’s imagine we don’t want our function to log the same thing to the console every time. We want to tell it what to write. Let’s see what that looks like:

function MyFunction(what){
  console.log(what);
}

MyFunction("Testing the function");

Here our function is defined as before, but we have a name, what, inside the roundy brackets. Firstly, this means that when you call the function, you’re expected to provide a value. Secontly, inside MyFunction(), we have a new variable, here called what, containing the supplied value and usable like any normal variable.

Finally here’s a more complex example with two arguments:

function Divide(m, n){
  return m / n;
}

There’s a new keyword here, return. This means “send back this value to the place that called me”. Let’s see how we might use it:

let a = 4;
let b = 5;
let c = Divide(a, b);

The third line here both calls the Divide() function and stores the value sent back.

P5.js

We had the briefest of introductions to P5.js and a flying visit to the new P5.js web editor. We’ll follow up properly on these next week.

Download

Files from this week can be found on our GitHub page.

 

 

Explorers – Week 3 2018- Maths Game

Another great week, a lot of work was done in the Explorers room. Hope you all had fun making our Maths game!

CDA-S5-Challenge_10-Maths game-how to

A player picks a level of difficulty and the computer chooses 2 random numbers to add (subtract or multiply- whichever you choose!) together and show the numbers to the player. Fr this we needed 2 SPRITES and 4 VARIABLES called SCORE, LEVEL, NUMBER1 and NUMBER2 as well as 2 BACKDROPS. CDA-S5-Challenge_10-Maths game-ask questions1CDA-S5-Challenge_10-Maths game-ask questions

The player then has to enter an answer to the equation and the computer tells them whether they are wrong or right. CDA-S5-Challenge_10-Maths game-decisions alternative end

We repeated the ask/answer questions 5 or 10 times. Can you figure out where the REPEAT loop fits?

We also had a second sprite who reacted positively to correct answers BROADCAST and negatively to wrong answers BROADCAST. You can use whatever sprites you like and change their look whatever way you like. One coder added a puppy as their second and had him bark whenever an answer was correct. CDA-S5-Challenge_10-Maths game-sprite 2

After all the questions were asked we had the 1st Sprite SAY – Game Over! and BROADCAST Game over so that the backdrop changed and music played. There are two ways to change the backdrop- see below!CDA-S5-Challenge_10-Maths game-alt backdrop CDA-S5-Challenge_10-Maths game-backdropHere are this weeks notes in PDF CDA-S7-Week_3_18-MathsGame.pdf

Also I have uploaded the finished game to the www.Scratch.mit.edu website, just use the login details in the notes.

See you next week

 

Martha

Explorers Week 3 – Improving last Weeks Game!

Hi everyone,

Can you believe the crowds we had again last week, another record 251 Ninjas and Parents attended Coderdojo Athenry last week.

We were adding to and improving our game from last week. We added a sprite that would catch the fish and decided what could or would happen when this occurred.

We discussed how to make a game more fun we have to add some complexity to it….we need to make it harder to play!! so to this end we used some code from our operator palette to add some randomness.

I also introduced Variables and how we can use them to keep track of things like Score or Lives.

I am attaching the notes from last week as PDF CDA-S6-Week_03-FirstGame_Part2

See you all this Saturday again. We will be starting a new game and Ill need your help.

Martha

Creators – Covering the Basics

PhysicsTest

We’ve been busy the last two weeks covering the basics of Unity. Among the topics we’ve touched on are:

  • Customising the Unity layout
  • Explaining what the main Unity windows (Scene, Game, Hierarchy, Project and Inspector) are each for
  • Talked about 3D space and vectors and talked about the difference between local and global axes (child objects)
  • Shown how to place objects in the scene and how to position, rotate and scale them
  • Shown how to “fly” around the scene view
  • Explained how the physics engine works (Physics clock monitoring and moving rigidbodies and tracking collisions and other interactions)
  • Built a simple physics-based scene which had a ball fall, hit a ramp and roll into a bunch of stacked block
  • Wrote a script to have the camera follow the ball as it moves

 

Additionally Mike kindly filled in and talked about the basics of object oriented programming, classes and class diagrams. There is a post from last year that covers this well for those who’d like to read it.

Additionally, the basics of the C# language that we discussed are covered in both that post which we have already linked to above and another which can be found here. The topics we touched on were:

  • Curly braces as “containers” and the requirement that they occur in pairs.
  • How semicolons (;) mark the end of statements
  • Using directives and namespaces.
  • A basic class declaration
  • Properties, both public and private
  • Methods, both public and private
  • How Unity automatically calls certain methods at certain times, and some specific examples of this:
    • Start() called when we start the game
    • Update() called every time the scene is drawn

 

The up-to-date project file can be found here. Please note it will require Unity 4.5.1 or later.

ModderDojo Topic 7: Planning and Building a Complex Structure Mod in Minecraft

PyrimidInside

This topic continues from ModderDojo Topic 6: JavaScript Operators and ScriptCraftJS Drone Functions.

Sharing a Server:

In previous weeks before we stopped for Christmas, some people struggled to make progress through no fault of their own: they were hampered by CanaryMod crashing a lot on some people’s computers.

To work around this, everyone can connect to my computer as the Minecraft server, and I will also create a shared folder on the computer so you can drop your mods into it.

Please review these notes from several weeks ago: Topic 2: Connecting to Each Other’s Servers.

This Week’s Challenge:

This week (and for the next week or two), your challenge is build a substantial mod in ScriptCraft that, when you run it, will create an impressive-looking structure!

A key step to success here is planning and design: as I have said before, a  programmer’s most important tools are paper and pencils, for figuring out what you want to create before you write code for it.

You should review the following:

 

Tunnel1

 

ModderDojo Topic 5: Time to Get Constructive!

2013-12-07_12.25.59

This week builds on ModderDojo Topic 4, when we learned a bit about the basics of ScriptCraft and saw how it handles loops, decisions and variables compared to Scratch: https://cdathenry.wordpress.com/2015/11/11/modderdojo-topic-4-moving-from-scratch-to-javascript/

This week, our goal is to build a first structure mod in ScriptCraft. Ideally you should work in pairs. This to achieve this goal will involve:

During the session, I will ask people to load their mods onto my computer, demo them to the group, and explain how their code works. To get things started, at we can take a look at some mods from last year and how they work: https://cdathenry.wordpress.com/2013/11/10/modderdojo-athenry-our-scriptcraftjs-minecraft-mods/

Practical notes:

  • Read the ScriptCraftJS API reference to see what commands you can use for your structures: https://github.com/walterhiggins/ScriptCraft/blob/master/docs/YoungPersonsGuideToProgrammingMinecraft.md#building-stuff-in-minecraft
  • During development and testing, you can end up with lots of incomplete structures that slow down your CanaryMod server. A simple fix is to delete your world:
    • Stop your CanaryMod server
    • Open the CanaryMod folder on your computer: in it you will see a folder called worlds, and inside it one called default, and inside that default_NORMAL.  Delete default_NORMAL and all of its contents.
    • While you are at it, edit your world’s properties for when it is re-created: you can do this by opening canarymod – config – worlds – default – default_NORMAL.cfg. To make your new world superflat, write world-type=FLAT and you could also change other properties such as spawn-monsters=false
    • Restart CanaryMod to create a new, empty world
    • Re-run your scripts to recreate structures that you want

Week 3 – Scratch Beginners – Ghostcatcher

Hello Everyone

Great to see so many of you there on Saturday, 85 Ninjas!. Hope you had a good time. And a special welcome to our new Ninjas.

This week we created a Ghostcatcher game. We used the paint editor in Scratch for the first time. As I said on Saturday, It makes things easier if you think in shapes.

PACMAN

Using the code we have learned so far, we moved the Ghostcatcher with the mouse and the Ghosts randomly. We also added sounded and score.

PACMAN2

For those of you who would like to add more complexity, I have a couple of ideas at the end of the notes. Give it a go and if you need any help, just ask one of the mentors at the beginning of the next session.

From next week the Scratch Beginners Group will be given by Julie. I won’t be too far away, so you will see me around! We have a new session this year called Unity. It is a games platform and we expect a large number of the kids will take it so I am going to help out in that room with Kieran.

A big THANK YOU to Julie for taking over for me.

Here are this weeks notes in PDF. CDA-S5-Week_03-Ghostcatcher.pdf

Week 3 – Scratch Beginners – Ghostcatcher

Hello Everyone

Hope you are enjoying the Halloween break.

Great to see so many of you there on Saturday, especially since it was a bank holiday weekend.

This week we created a Ghostcatcher game. We used the paint editor in Scratch for the first time. As I said on Saturday, It makes things easier if you think in shapes.

PACMAN

Using the code we have learnt so far, we moved the Ghostcatcher with the mouse and the Ghosts randomly. We also added sounded and score.

PACMAN2

For those of you who would like to add more complexity, I have a couple of ideas at the end of the notes. Give it a go and if you need any help, just ask myself or one of the mentors at the beginning of the next session.

P.S. No session next week, hope you have fun over the Halloween and we will see you back on the 8th.

 

Here are this weeks notes in PDF. CDA-S4-Week_03-Ghostcatcher.pdf