Javascript Intro

Today the Bodgers and Creators were on a hiatus so Mark took a few folks and covered some web development – with a particular focus on Javascript.

We reviewed:

  • How the internet works and how web pages get from the internet to your computer using DNS and HTTP.
  • Talked a bit about the two main kinds of code that our browsers understand:
    • HTML which is great for documents and static content
    • Javascript which is great for dynamic content like animations and games

We then spent the rest of the time playing with Javascript, using the p5.js framework to do some graphical stuff.  We learned about:

  • Functions which is where code is written
    • We wrote two functions: setup() and draw()
    • We called several functions which were written in the p5 framework such as ellipse(..), rect(…), random(..)
  • Variables which is where data is stored.  We learned that in javascript, unlike c# or java, all variables are declared with the “var” keyword.
  • Decision statement which is used to decide between options – in javascript the “if” statement is used for this purpose

We built quite a few cool things to draw interesting patterns and shapes and some of you came up with some mad patterns.  The one we ended up with is shown below.  Have fun playing with javascript and I’ll be really interested to see what you come up with!  Also try to think of ideas and if you come up with something interesting we can have some fun trying to build it!

Platformer Engine Week 2

This week we did a little code to finish our engine and spent the rest of the time working on our own platformer games using it.  The code changes we made to last week’s game engine were:

Hit Boxes:

Fixed the platformer so that our character doesn’t get snagged on edges by its whiskers.  This we did by learning about hitboxes. The hitbox is just a costume which is rectangular in shape.  Before we do our animation, we switch to the hitbox costume and after we switch back to the costume we want.

hitbox

Head Bumping:

Fixed the platformer so that we can bump our heads against the platforms without popping up.  This was by adding a couple of lines to the “stay above ground block” sprite to move down if we are touching the ground while moving upwards.

The entire code for the platformer is below:

platform_code

DOWNLOAD THE FULL PLATFORM ENGINE CODE HERE!!!

Example Game: Mentor Dash

Finally Mark showed an example game pulling all the elements in together – “Mentor Dash”.  It has the same code as we covered, but adds a bit of animation, level changes, sound and some sillyness.

mentor_dash

DOWNLOAD MENTOR DASH HERE

There were lots of brilliant ideas from the ninjas on their own games .. looking forward to seeing what you can do!

Advancers: Scratch Platform Engine – Week 1

This week was quite busy in the Advancers group.

Talk on Coolest Projects

  • Oliver gave a talk on the “Coolest projects” and many of us are planning on targetting it this year –
    • the deadlines are Mid-March for submission of ideas and Mid-June to attend the event itself!
    • Mark and Oliver are going to dedicate the last 30 min of each week to helping people with their projects.

Platform Engine

We started a platform Engine and got most of the code done – next week we’ll finish up the engine (not much code, honest!) and see what it would take to make it into games.  A Platform Engine is something that’s useful in lots of types of games or interactive adventures – be they mario-style or escape-room style, etc.  Once we have this platform engine done, we can easily apply it to other cases.  Think about ideas for platformers for your coolest project!

platform_week1

Things we got working:

  1. Gravity so the player falls
  2. Stopping when we hit the ground
  3. Not falling “into” the ground
  4. Walking along bumpy ground
  5. Not walking over bumps that are too high (like walls)
  6. Jumping

Things we didn’t get working (yet):

  1. “popping” up over walls
  2. Animating our walk
  3. Snagging on edges
  4. Scores, lives, etc.

Next week we can look at the above to see how we might do it, and also what it might take to make it look pretty, add a loading screen, etc.

The full code for today is below (click to view large):

Code from Week 1

Code from Week 1

We will finish this next week and make a game out of it!  You can download the project from here

Advancers P5 Week 3: Our first game

Click “Run Pen” followed by “Edit on Codepen” to view the game and play with the code.  At this stage, codepen has been working well for us so I think it’s a really good idea for you all to register for an account on codepen.  This will allow you to “copy” my sketches so you can save your versions of them online.  As we get more advanced (or if the network is down), we will start working locally with Atom again but this is good for us.

Today we started writing our first javascript game.  We thought for a bit about which game might be good to start and decided on a version of the hit game Flappy Bird.  We got quite far before people started to tire!

It will take another session to finish the game – we might do this next week, or take a break from javascript and come back to it in the new year.

Writing the Game

The first step was to plan how we would do the game.  Like all projects, we build it up in steps.  These steps would work to build a basic flappy bird:

Step 1: Draw the sky

Step 2: Draw the ground

Step 3: Draw the bird

Step 4: Make the bird fall

Step 5: Make the bird stop falling when it hits the ground

Step 6: Make the bird jump/flap when the mouse pressed / screen touched

Step 7: Add pipes as obstacles with a random gap

Step 8: Move the pipes towards the bird

Step 9: When the pipes go offscreen on the left, make them appear on the right again

Step 10: Check if the pipe is hitting the bird and restart of it does

Step 11: Add a distance label (how many pipes have we passed)

Step 12: Add sound, improve the graphics and keep a “high” score

We got as far as Step 6.  The next 6 steps would need another week to cover.  I’ve added comments to the code so you can see which parts of the code relate to which steps.  If you have your own codepen account, it might be a good idea to attempt to do the rest of the game – you might get stuck but that’s part of the fun!

New Concepts we covered today:

  • Variables.  Variables in javascript are just like variables in scratch.  The key things about variable are:
    • You create a new variable by writing the word “var” followed by the variable name.  E.g. we wrote the variables:
      • var birdHeight;
      • var gravity = 0.5;
      • Creating a variable by writing the word “var” is called “declaring” a variable.
    • You can change the value of a variable by using “=”
      • birdHeight = 10;
    • You can also use a variable name in assignment, so e.g. we could make the birdHeight 1 bigger by writing:
      • birdHeight = birdHeight + 1;
    • We learned that if you want to be able to see a variable everywhere, we need to declare it
  • Math operators:
    • We learned that some of these are written a bit differently in computer programs:
      • / is how we write “divided by” – e.g. width/2 is the same as writing “width divided by two”.  This is because on a keyboard for some reason there isn’t the ÷ symbol.
      • * is how we write “multiplied by” e.g. 2 * 2 is the same as writing “two multiplied by two”.  This is because x is very easy to confuse with lowercase x.  So if you had a variable called x things would get confusing!