A year in review 2015

It has been a good year.  We have distributed many geek experience points and written some code for you all to hack as you feel fit.  Listed here are some Superdecade Games posts that deserve more love.

• The early Internet - a collection of videos about the early days of The Web.
• Kids code with Shapes - Shapes is a programming language for kids by Superdecade Games.
• Assembly language hacked by 14-year-olds - using the Little Man Computer some clever kids write some good assembly language code.
• Really cool LEGO robots - (enough said).
• The Shakespearean insult generator - thou churlish clay-brained scut!
• Castle Grim - the puzzle cartoon from the nineties.
• Launch alert! - the world's first hypothetical Twitter spacecraft (we think).
• Create your own solar system - there's an app for that
• Kids playtest Litterpik - the puzzle game for kids and big kids too from Superdecade Games.
• Destroy the World - yup, there's an app for that too.
• The Internet of Fish - still my favourite IOT site.
• A programming language for Yorkshire - I just went mad one day.

Wishing all my readers a very prosperous and geeky 2016.
- Streetasaurus Rex

#LEGO video games

A whole load of LEGO stop-frame animations.

LEGO Donkey Kong



LEGO Mario



LEGO Compilation



LEGO Centipeden



LEGO and GameBoy arcade machine



LEGO Portal featuring Still Alive

Awesome LEGO machines

Some pretty awesome LEGO machines.  As ever, +1 geek experience point awarded to all the creators and programmers here.

LEGO basket ball machine.



LEGO Bowling alley


Lego claw machine


Small mechanical LEGO loom


Too cool not to include here - LEGO arcade games!  I want to make a stop frame animation like this!



If you liked these videos then you might like these older LEGO posts:

Really Cool LEGO Robots
Awesome Marble Runs Built in LEGO
A feast of LEGO train sets

A whole load of logic games for all you geeks

Earn yourself +1 geek experience point  for every puzzle solved.

Plastelina Interactive Logic Games

I am a big fan of this site because the logic games really come to life and there are loads to choose from.  Here is the classic you have a wolf and a sheep and a box of cabbages and you need to get them all to the other side of a river, only you can't leave the wolf and the sheep alone, for obvious reasons, similarly with the sheep and the cabbages.  Well, I won't spoil the fun for you if you haven't already solved it...

The first step to solving the puzzle - the only safe move.

Game number two is a variant of the above game, only this time you have three missionaries and three cannibals.  The Cannibals eat the missionaries if ever they outnumber them.

It is worth getting this wrong a few times - and you most likely will - just to watch the cute animation of the cannibals eating the missionaries.

...and so it goes on.  There are fifteen games to choose from and I recommend heading over there soon.


Strand

A really nice puzzle game that gets very devious.  In Strand you must complete each level by stretching the elastic bands over the virtual pegs.

Stretching elastic bands to connect the dots.

The number on each peg tells you how many bands you need to connect.  In this image the puzzle is nearly solved.  Just one more band to connect.

...and here is a walk through in case you are stuck...




Peg Solitaire

You have probably played this before in the real life (but that is waaay over-rated).  In Peg solitaire simply move the pegs one over the other to remove them.

Move each peg so that it jumps over another peg. That peg is then removed - sort of like in draughts.

The game gets steadily more difficult.  There are two constraints, first the last peg must land on the black space, and also you only have sixty seconds to solve each puzzle.


The four colour problem

It is said that you only need up to four colours to fill any map. In this puzzle you must play against the computer to fill the largest possible region in your colours (two for you and two for the computer).

Sort of like Risk, but then again, nothing like Risk.

The Game of Marienbad

Saving the most evil until last.  Try and beat the enigmatic 'M' in his favourite game - Marienbad.  There are four piles of sticks and players take turns to remove any number of sticks from one pile (but only one pile at a time). The player who is forced to pick up the last stick is the loser.

It starts off easy.  Pick any number of sticks from one row.

And then you get defeated.

Over and over again.

When you get bored of being humiliated by 'M', do check out the rest of the SmartKit website. There are dozens of games to play.  One of my favourites being Rightbot, leftbot.

A very simple game that gets very challenging quickly.  in this game you push the robots using the corresponding buttons.  Each robot can only move in one direction when activated, but they can push each other as well.  Introduce a few teleporters and obstacles and you have a very challenging game.

Th..th..th..that's all folks.
If you are still awake and you managed to scroll this far without it just happening in your sleep then you might be interested in some of our other geeky posts:

Five games to get you thinking today - more puzzles for geeks.
Weird particle art thingums - doesn't the name say it all?
Ways to waste time on the Internet
or, if you just want to play an adventure game, check out:
Have Spell Will Travel.
See you next time for more geeky stuff.

Hacking a JavaScript text adventure game 05

<< First  < Previous

Continuing with our short series on creating a JavaScript adventure game.  Today we will look at creating a few more features and put them all together into a longer demo.

1. Download the files
2. The CSS
3. Adding reminders
4. "The Astonishing Cave of Unimaginable Horror."

1. Download the files

You will need a copy of three files to use this example.  Download now.

The files are:
index.html (this is the code for the main page)
flags.json (this code keeps track of the various flags used in the game)
script.json (this code keeps all of the adventure game - the options and paragraphs of text).


2. The CSS

We first looked at the CSS in the third post.  In this version I have added some more CSS rules to make the adventure game look at little better.

The adventure game running in Microsoft's Edge browser.

This is intended to be an example only.  I am no self-confessed expert at CSS and you will no doubt want to experiment with the CSS code to make it look exactly as you want, however you will agree that it looks a lot better for the face lift.


3. Adding reminders

I thought that it would be useful to have reminders appear on screen to help you remember whether you have found certain items or not.  For example, in this demo game you can find a (somewhat useless) key.

The first step in this process was to record some new attributes for each flag.  Open the flags.json file and take a look.

Each flag now has a 'show'attribute.  If the value is set to 'true' then the description will be displayed on the right-hand-side of the screen.  Furthermore when you hover over the description a longer description held in 'text' will appear as a hint.  Some flags are used to control whether the play has already completed an action (so that option is not given again) and so not all the flags should be displayed in the reminders.

The JavaScript code to make this work looks like this:

It starts on line 148, and it does the following:

Create a new list of reminders.
For each flag:
    If the flag is on and the flag should be displayed
        Add the description to the list
        Add the 'text' as hover text
Put the new list into the html of the thing called 'infoContainer'. (You can see infoContainer on line 176)


4. The Astonishing Cave of Unimaginable Horror

The demo adventure is rather short, but it does show off all of the things that you can do using this code.

The adventure starts at the bottom of a deep hole.

Not much to do here other than accept your fate and press 'OK' (it's a bit like downloading Windows 10 updates in that respect)

Shortly you are given some options:

By investigating the running water you will discover that you are at the bottom of a wishing well.  There is some gold you can grab here, but once you have this option shouldn't be presented again.  Notice how there is a flag that will prevent this option being displayed again.

Soon you find an object...

By searching the unfortunate victim from a little earlier on you will discover a bronze key.   Notice how we set a flag to appear as a 'reminder'.  Also, the option to try the bronze key in the iron padlock is now displayed.  Try to visit this location without the key - the option will not be given.

Actually, the bronze key is not the correct key for the iron padlock (presumably you need an iron key?) and the key will get stuck. Line 108 in the script.json file controls this behaviour:

Trying the wrong key in the lock is not a good plan.  When you do flag 3 (the key) is turned off.  You should see that the key is removed from your list of objects in the 'reminders' section.

The code for turning flags off is dealt with on line 92 in index.html.


Well that's enough for now.  Maybe I will continue with this series in the future and add a few more features - such as a combat system for dealing with the sleeping beastie to the west.

For now, I hope you enjoyed this brief JavaScript tutorial and you found it easy enough to create your own games.


Bored already?

You might like to play a longer JavaScript adventure game - see Have Spell will Travel, or read all about it on this blog.

Before I go I should point out that the images used in this tutorial come from the brilliant duo: Lorc Delapuite from Game Icons

Hacking a JavaScript text adventure game 4

<< First < Previous

Continuing our JavaScript adventure game series.  Today we will add a scoring system.

1. Downloading the files
2. Adding the scoring system

1. Downloading the files
You will need a copy of three files to use this example.  Download now.

The files are:
index.html (this is the code for the main page)
flags.json (this code keeps track of the various flags used in the game)
script.json (this code keeps all of the adventure game - the options and paragraphs of text).

2. Adding the scoring system

We are going to add a scoring system so reading certain paragraphs will reward you will points.

Here we have added a 'Gold' counter to keep track of the score, but this could really be anything, and of course, the counter could count up or down, and you could have multiple counters if this makes sense in your game.

Here on line 49 we've added a new variable to keep track of the 'Gold'.  It starts at 0.

Line 61 adds the gold found at a location to the current score.  Note that this will run every time you visit a location whether you intend to or not.  Currently the game cannot detect whether you have visited a location before or not.

Here I have gone into the script file and added a new attribute for each location.  Each location now has an amount of gold associated with it.  Notice that this is used on line 61 of the main program?

Line 64 changed so that the current gold value is displayed onscreen under the title.

A little CSS to make things look a little nicer.


That's all for today. - Next time we'll make a longer example program; add some more CSS to make things pretty and have some reminders so you know what objects you have found so far.  See you there.

Hacking a JavaScript text adventure game 3

<< First < Previous

In this post we will look at the adventure game code in more detail.

1. Downloading the files
2. The code in detail

1. Downloading the files

You will need some files to play with.  You can download them here.
The files are:
index.html (this is the code for the main page)
flags.json (this code keeps track of the various flags used in the game)
script.json (this code keeps all of the adventure game - the options and paragraphs of text).

2. The code in detail

The start of the code just sets up the html file.  The <title> tag lets you tell your browser what to call your game. Go ahead and change it.  You should notice that your browser tab has changed.  If it doesn't work make sure you saved your code and try again.  The <meta> tags are used by your browser and search engines.  We don't really need these as the code isn't online (yet).

These two lines tell your JavaScript program to load the two *.json files into memory.  Your JavaScript will now have two lists, one called script and the other called flag.  You can refer to any of the items in this list using the index notation: for example script[1].title refers to the title of the second script.  In my file with has a value of "A key!".

This section is called the CSS (Cascading Style Sheet).  We could have put this in a separate file if we wanted.  The CSS tells the browser how to display the various html in our page.  For example, the first two lines tell the browser to display the body of the page in black with a font colour of white.  Notice that you must use the American (incorrect) spelling of 'color'.  You can read more about CSS on w3schools.com.

Notice the full stops before the things in green?  These refer to anything in the html code that has a class name.  For example, whenever we put an image into a location we use an image of class "locationImage".  The CSS rule here is to have a solid border.

You will also notice that there is no CSS for the class "inGameHeading".  Try adding some rules here to change the style of the paragraph headings.

This line of code tells the browser that the next part of the file is some JavaScript.  Remember - JavaScript is a scripting language that lets you change the html on a page in response to the user's actions.  In our case, whenever the user presses a link we want the page to put new paragraphs, options and images onto the page.

Inside our JavaScript section we have added a function - turnPage().  This function has the job of putting a new location in the game on the screen.  This function is invoked every time the user presses one of the options.  The function starts with a curly brace { on line 45 and ends with a curly brace } on line 101.

Notice that the function has a letter 'n' after function turnPage( ?
This variable is called a parameter.  Whenever you invoke the turnPage function, you must tell it which location to 'turn to'.  Remember that the first location in the script file is 0.  This is why line 100 reads:

onClick='turnPage(0)'

It means: 'click this and turn to the first location'.

Next, the function will try to put the new location on the screen.

line 55: It puts the new location's title into a variable called 'newtitle'.
line 57: It puts the new description into a variable called 'newcontent'.
line 59: It puts the new image into a variable called 'newimage'.

Putting the links in are a little trickier...

Lines 64 - 89 deal with putting the links in.  Remember that it is possible for a link to appear and disappear depending on whether an action has been completed or not.

For each link in the list of links for any location this code checks whether the link should be displayed or not (depending on the value of the flag it points to).

Once the new html for the title, paragraph content, links and images have been created, these lines of code put the new html onto the page.

For example, line 97 literally means: "Find the thing in the document called 'titleContainer' and change its html so is equal to this thing in my variable 'newtitle'.

Once this has been completed the function has done its job and we can close our JavaScript section.

This last bit of code defines our html page.  Everything between the <body> and </body> are part of the page.  All our JavaScript function does is changes the contents of these four divs so that they are the new information from the script file.


And that brings us to the end of this sections.  Come back soon and we will have more functionality.

Hacking a JavaScript text adventure game 2

<< First post

Following on with our series on hacking a JavaScript adventure game.  Today we will look at how to add images for each location in the game.

1. Download the files

2. Adding images

1. Download the files

You will need a copy of three files to use this example.  Download here.

The files are:

index.html (this is the code for the main page)

flags.json (this code keeps track of the various flags used in the game; more on this later)

script.json (this code keeps all of the adventure game - the options and paragraphs of text).

2. Adding images

First I am going to create a folder to store all my images in my project.  Make sure you put this folder in the same location as your project files!  It is a common mistake to put your images in "my documents" or "my pictures".

I have created a new folder called 'images' to store the images I will use in the project.

You can call your folder whatever you like, however 'images' works for this example.  If you change it then you will have to change the code as well!

Now I have found a couple of images that I like and so I will add them into my images folder.

Once I have the files in the right folder I will go into the code and tell each location to display the appropriate image.

Here I have added images called "door.png" and "bronzekey.png" into the locations script.

The next step is to change the JavaScript so that it displays the correct image for each location.

Paragraphs with an image.

This is done with the following lines of code:

From line 59:

What this line of code does is to create a new image tag with a width and height of 200 pixels.  It looks inside the script for the current image for this location.

The image is actually put onto the screen with line 100:

document.getElementById("imageContainer").innerHTML = newimage;

Which means 'go and find the thing called 'imageContainer' and change its html so that it is the same as what is written in the variable 'newimage' (from line 59).

Now that we have written this code we don't have to change the code any further.  Adding more images for new paragraphs is as simple as setting the "image" attribute in the script file.

Next time we will look at the code in more depth.

Hacking a JavaScript text adventure game 1

Here we look at how to create a simple JavaScript adventure game for students new to JavaScript.

1. What is a text adventure game?
2. What is JavaScript?
3. Getting started
4. Explaining the code
5. What's next?

1. What is a text adventure game?

In our example we will create an adventure game in which you are presented with a series of choices. By clicking on the choice you want you will proceed to new sections of the game.  The format is similar to the awesome Fighting Fantasy series of games.  In our example we will allow options to be presented to the player only if specific tasks have been completed, or hidden from the player if a task has already been completed.  In this way we can create simple puzzles.

2. What is JavaScript?

JavaScript is the language of your web browser.  It allows web pages to be interactive.  Head over to w3schools.com for a full course on web programming.  Thankfully JavaScript is really easy to learn.

3. Getting started

You will need a copy of three files to use this example.  Download now.

The files are:
index.html (this is the code for the main page)
flags.json (this code keeps track of the various flags used in the game; more on this later)
script.json (this code keeps all of the adventure game - the options and paragraphs of text).

You will need a text editor program to use the files. I use Sublime text, but Notepad++ will work just as well.  The notepad that comes with your operating system will work, but it wont have some of the 'bells and whistles' that the others have.

4. Explaining the code

In the adventure game you will get a series of paragraphs and options. By clicking the options you will be sent to new sections of the game.  In this way we can create simple puzzles.  The flow of the game is controlled by 'flags'.  Flags start in the 'off' position and can be turned 'on' by visiting certain locations in the game. Flags are used to keep track of the events, in this example - have you found the key?

• Run the index.html file in your web browser (it should be as simple as clicking on the icon) and you should see something similar to the following:

A simple introduction to how it all works. Here we are at location '0'.  By clicking the link we are sent to location '1' where we find the key.  When we get back to location '0' you should see that this link has been replaced by another one allowing you to exit the room.  It is rather simple, but we have just solved our first puzzle,

In this example you need to find the key under the mat before you can open the door.  Notice that once you have found the key you are no longer offered the option to 'Check under the door mat', but instead a new option of 'open the door appears'.  This works because we use a flag to let the browser 'remember' that we have found the key already.

• Open the file script.json in your editor.  It looks like this to me:

This file contains the information about the various locations in the adventure.  Yes, the adventure game is a bit boring right now, but this is just to show you what is going on.

The file contains two locations: "In the cell" and "A key!".  For hereafter we shall call this locations 0 and 1 respectfully.  Each location has some information associated with it.  First, a location must be contained within the open and close { } curly brackets.  Second, each location is separated with a comma:  { }, { } etc.  Each location has six properties:

• title - this will appear on screen at the top of each paragraph.

• content - this is a paragraph of text in html. You need the <p> and </p> tags to open and close the paragraph. You can have multiple paragraphs simply by having multiple tags "<p>para 1</p><p>para 2</p>" 

• image - this is for displaying an image with each paragraph. We'll come to how to make this work in a later post.

• turnFlagOn - this is a list of flags that will get switched on when you read this paragraph.  For example, if the list was "[2,4,5]", then flag 2, 4 and 5 will be switched to 'on' when this paragraph is read.

• turnFlagOff - this is the opposite of the turnFlagOn property above, but it is reserved for a later post for simplicity.

• urlink - this is the list of options for the current paragraph.  Each option has four parameters explained below.

Looking at the very first option for location 0, we have:

"urlink": [["Check under the door mat.", 1, -1, 0], ["Open the door", 2, 0, -1]],

This means that this location has two links - "Check under the door mat" (option 0) and "Open the door" (option 1).

Looking at option 0, we have the first item in the list is the text that will be displayed on screen.

The next value is '1'.  This means that successfully clicking on this link will send you to location 1 (we are currently at location 0).

The next value is -1.  This means 'ignore'.  If it was any other value it would point to a flag that must be switched on in order for the link to be displayed.  You can look at the list of flags in the flags.json file.

The final value is 0.  This means 'don't show this link if flag 0 is on'.  This is useful if you have completed a task and so you don't need that option anymore  (there is no point looking under the mat once you have found the key).

Now look at the second link "Open the door".  The numbers mean: "go to location 2 if you successfully click the link", but don't show this option until flag 0 is on.

• Open the flags.json file.  It looks like this to me:

The contents of the flags.json file.

Each flag is like a switch.  It can be on or off (or more correctly true or false).  The "description" is not used by the program (yet) and is there to help you remember what each flag is for.

To add more flags, use the { } notation separated by commas.

5. What's next?

Start by trying to add new locations or changing the existing ones.  In future posts we will extend the game, add some images and explain some more of the code.

Five coding sites for kids

Five sites to get kids coding. While I recommend that kids start coding with Scratch, each of these sites are great introductions to programming for younger kids.  #codingforkids

1. Blockly Games

Blocky features a series of puzzles that all require some coding skill to be solved.  Skills covered include repetition, conditions, iteration and parameter passing.  The puzzles include guiding a bird to pick up a worm so she can feed her nest; guiding an astronaut through a space maze; and shooting targets in a pond.

This puzzle soon gets more tricky with targets requiring more than one shot to kill. Time to learn a repeat loop.

Blockly is a Google project aimed at introducing programming concepts and are quite self-pacing.  By the end of the course, kids are writing real lines of JavaScript code.


2. Code Studio

Code Studio from Code.org contains many hours of Computing Science fun for kids and adults aged four and above.  The concept is similar to Blockly Games above, and covers many similar concepts.  Students can work trough a series of games at their own pace with each concept introduced by a relevant video and reinforced with multiple choice questions at the end.  This is an ideal site for getting girls coding before they hit puberty (and social pressures start to rule their lives).

Concepts are reinforced with a multiple choice quiz after each challenge.

Various different themed challenges from helping an 'Angry bird' through a maze to collecting pollen and nectar as a busy bee.

There is also a Spelling Bee section - get it! Use your coding skills to spell the correct word.

Some key programming concepts such as repetition are brought to life.

A really nice looking interface and those creatures look like they are from 'Angry Birds'.

It's not just solving mazes, you can also draw pictures and make stories.  Children exposed to Code Studio will be ready for Scratch within a couple of hours.

3. Code Combat

Code Combat is a great site for getting kids coding, while aimed at older kids than Blockly and Code Studio above, it is a useful experience for kids before they are exposed to traditional written languages.  I did a couple of blog posts about Code Combat a few months ago.

Learn some programming basics whilst playing an adventure game.

One of my students managed to complete all the levels in Code Combat and has now taken GCSE Computing and is doing well learning some Python and JavaScript.


4. PoopScoop

Shameless plug alert!  PoopScoop is one of my own creations.  It is a puzzle game for Windows in which you use programming statements to solve each maze.  The aim of each level is to find and 'scoop' each 'poop' that some thoughless animal has left lying around. There are pits to jump over, walls to push over, blocks to push, magnets to avoid and pools of water to drain.  If the thought of scooping poop gets your students a little giddy then there is a slightly tamer - LitterPik - version instead.

There is also a level designer so kids can create their own puzzles.

Search this blog for PoopScoop

Introducing PoopScoop for Windows.

5. Shapes

Shapes is a programming language designed to get kids interested in programming through drawing colourful images. The language is simply defined using geometric shapes: circle, square, triangle, ellipse, line etc and a coordinate system that uses both relative and absolute coordinates.  If you remember the various incarnations of the language LOGO, then you will recognise Shapes - only Shapes is much easier to start drawing interesting images.  The installation package comes with a user guide for teachers and I have plenty of example code should you need it.

An image programming using the SHAPES language.

Shapes would be useful both to teach programming concepts as well as in mathematics to teach about coordinate systems.  I would be very interested to hear from Mathematicians who have used it in their lessons.

You can download Shapes from this website.  Shapes was written by T Street the author of this blog.

If you made it this far, then you might like to search this blog for other interesting posts:

Circles - a tool for teaching mathematics
The Little Man Computer - for teaching GCSE and A level Computer Science "Low Level Programming"
Goliath - a text adventure game ripe for hacking

#edtech
#codinginschools