Day clock page

Following on from yesterday's Dementia Day Clock, I decided to create a new Day Clock with a little more information - for instance - accurate time.

Day clock on my Lumia 950. Click the image to load the new Day Clock.

I managed to export the data from the Perpetual Calendar for the BBC microcomputer using BeebEm and then wrote a script to convert the data from a BBC text file into a JSON file. The data contains the dates of various interesting anniversaries, and so I thought it would be a nice touch to show these on the new day clock, including a calculation of how long ago the event took place.  For example today is the 41 year anniversary of the UK Sex Discrimination Act 1975.

BeebEm has some really useful tools, most notably the 'export' function which allows you to export one or more files from a BBC disk image to a PC format. This means that I can code a file on the BBC microcomputer, but still access or edit it on my Windows 10 machine. Yay!

I then added in 'red-letter' days, or other recurring events including holidays and Pagan festivals (from Pagan Calendar). I cannot be absolutely sure I haven't made any errors here, but I'll keep checking that this works and then add some more date/time information as and when.

The final touch was to put the current time into the new page tab so you can check the time in your list of browser tabs without navigating back to the page.

Well that's it for now. In the future I may add some other features, perhaps a background image that changes with each passing month. Maybe I shall put a Google search box in, or other widgets such as weather. Maybe I'll just sack it off and build something else.

---

Come back soon for more nerdy stuff.

If you liked this post, then you might also like to watch some bouncing balls, or just play a game of Have Spell Will Travel.

New updates to my chatbot

I have spent most of Sunday having very daft conversations with my chatbot, Mac, and I am pleased to say that I am happy with progress so far. His dictionary files have increased in size and he is becoming a much better conversationalist.

If you want to have a pointless conversation with Mac, then you can find him waiting for you here. Try asking him who he thinks will win the race for the White House, or what his opinions are on current affairs. I'm not actually claiming that he will make any sense, but it will be fun finding out. Enjoy!

Introducing Weekend Warriors

This August I have been working on a new game: Weekend Warriors.

Weekend Warriors is a strategy text game of spell-casting and problem-solving. You play the part of a wizard protecting your kingdom from the endless hoards of computer generated enemy horror.

You have at your disposal over sixty unique spells from which you must choose those that will defend your kingdom. Some spells will summon creatures to do your bidding, whilst others represent magical objects, places and enchantments that will aid you in your quest.

At each turn you must defeat the hoards of your enemy by matching symbols on your enemy cards with powers generated by your own creatures.

Facing your first enemy: The Baby Giant Slug, adept at killing noob wizards, this monster requires 2 points of combat power and 1 point of defence power in order to be defeated, however there is a short cut - just one point of fire power will toast this slug to death.

Spells are cast by spending either gold (generated by defeating enemies) or mana points (one point is generated each turn).  The more powerful spells cost more to play, and sometimes they are delayed one or more turns, so you need to think about what you will need in advance.

Unlike many games of this genre, you have access to every spell in the game, which you can access at any point in the game by opening your spell book.  There are currently over sixty unique spells to choose from, with more coming soon.  It is recommended that you study each spell carefully and weigh-up their costs against what you require to win. Some spells reward you for having already cast other spells, for example, the spell Bloodlust gives you combat points equal to the number of warriors you have in your battlefield, so it would be a good strategy to spend precious resources building up your army of warriors.

The spell book showing some of the available spells.

Weekend Warriors allows you to play the game however you want, and you are rewarded for knowing the spell book inside out.

Each turn consists of two phases.  In the first phase you may look through your spell book and choose spells to cast. You may wish to examine the creatures and objects already on your battlefield for activated abilities or to 'rest' creatures you do not need.  In the second phase your creatures spend their 'stamina' points generating powers for you to use in defeating the computer-controlled enemies.  In this phase it is too late to rest your creatures, although you may still cast new spells and organise your armies.

Viewing an item in your battlefield.  Here is the battle axe, which is just waiting to be equipped to a suitable dwarf.

Weekend Warriors is ready to play in public beta form.  There are probably a few bugs still to iron- out, and undoubtedly the game-balance will need tweaking based on feedback.

All constructive feedback is welcome.

Further updates in the future are planned, with more spells and enemies to keep you going.  What is even more exciting is that there is planned original artwork for each spell and enemy in the game coming soon from the talented artist Pob, who worked with me on Spellunker. You can check out Pob's artwork for Spellunker here.

One of the creatures in the spell-book view, showing (from left to right) name; 'summoning' button; spell class and types; description; placeholder for artwork (coming soon); flavour text; casting costs; stamina; abilities; links to other spells that work well with this one.

To get you started with Weekend Warriors, I've created a short tutorial.  Just press the 'Help' button in-game and choose a help topic.

Weekend Warriors tutorial running on my Lumia 950.

If you have enjoyed this post, then you may like this post from last year's game Have Spell Will Travel.

Some improvements to my chatbot

Today I made some improvements to 'Mac' my chatbot engine. It is still too early to release yet, but here are the new features:

The chat history is in reverse order. The latest response is at the top.

1. Mac can now remember the values of variables stored within the user's input. In the above example, it can match the variable <<name>> from the user's input "Some call me Tim" and "My name is Bob".

2. Mac has can have two different responses to user input depending on whether a condition evaluates as true.  Conditions are expressed in the format ( [conditon] AND [condtion] ... ) OR ([condition] AND [condition ] ... ) .... So, for example if you tell him your name is something different to what he thinks, you get a different response.

Well, that's it for now, but stay tuned for more chatbot developments - and a live version plus code for you to play with - coming soon!

It's alive!

I have been working on Mac, my JavaScript chatbot for a couple of days.  I won't post it online just yet as it is still in development.

The interface with no CSS.  The previous conversation is stacked up in reverse order.

The JSON file for one input pattern.

The bot works as follows:

The user types some text into the edit box and the system tries to match this with a script object stored in the JSON file.  For each script, if the current conversation subject matches one for the script, it will check whether the user's input matches one of the regular expressions in the 'pattern' array.  If there is a match it will check whether the condition has been met.  If the condition is true it will respond with the data in "whenTrue", otherwise if the condition is false, or if there is no condition, the "whenFalse" block will execute.  In both cases, a random response from the "match" field will be returned.  The system will silently set variables in the 'think' list and set the special conversation variable to the new conversation topic in "setSubject".

The result of the script above is that Mac will respond to some standard greetings "Hi", "Hello", "Hullo", etc.  Should the user type "Hi" again, Mac will have a different response "Hello again".

That's all for now because I have to go, but I'll keep on working and publish the code shortly.

A new update to Have Spell Will Travel #HaveSpell

I released a new update to my adventure game "Have Spell Will Travel" today.

What's new?

• Three new character classes - the Paladin, Mystic and Ninja.
• One new quest (can you find the awesome thing from Lake Mulbz).
• Loads of new items and creatures that will try and stop you from getting those items.
• I've tweaked the experience system so that it is not possible to gain loads of experience all at once.

Do please check it out.

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.

New update for Have Spell Will Travel #havespell

New updates.

I've updated my #javascript adventure game.  There are improvements to the interface; more quests and locations; a new temple and junk shoppe have opened in the village; cursed items (that cannot be dropped unless you visit the temple first) and loads more encounter too.  I've made a few adjustments to game balance, including the starting attributes for characters.  Most of the paid-for items now cost much less of your hard-earned gold too.

If you want to kill some kobolds, then Have Spell Will Travel is for you.


#havespell

Have Spell Will Travel #HaveSpell

Introducing my latest game - Have Spell Will Travel - a fast-faced RPG lurking somewhere near where Talisman meets Top Trumps.  Choose from one of a hundred different characters; find treasure and kill kobolds.

The current version has over one hundred different encounters across over thirty different locations.  There are currently twelve quests to complete but more are coming soon.  Can YOU beat Warren Fogbender?  Can YOU restore peace to the village of Merripond?  Find out here.

Use the hashtag #HaveSpell on Twitter to send me love as this will encourage me to continue development of this game.

#JavaScript

I made a #JavaScript #English #Dictionary

Introducing my online Oxford English dictionary.  Search for a word and the program finds all words that contain that word.  Furthermore, search within the results: click on any of the words in the definition and you will get a definition for that word, and all words that contain that word (and so on....).  The dictionary keeps track of your previous searches in case you ever need to go back.

Writing a #javascript game 3

So, I have been making slow but steady progress with my Javascript text adventure game.  So far I have implemented quests which can be started at the village.  Each quest is a series of challenges which I have encoded in a json file.  Each challenge script requires the player to pick from a list of statistics in Top Trumps style in an attempt to defeat the challenge.  Failure to beat the challenge results in pain, damage, death or failure of the quest.  Completing a challenge will result in experience points that can be used to increase your stats (not yet implemented).  Completing quests will result in more things becoming unlocked in the village (starting with the village healer and the tavern).  I have also implemented a json file containing a variety of artefacts that can be discovered and used by the player.  Some artefacts are 'static' in that they always apply one or more bonus or penalty to the player's stats.  Non static objects can be activated.  Last night I implemented weapons (the player can only have one weapon at a time) and armour (which can only be worn when the player is not currently engaged in a quest).

I have decided to use Sweet Alert for all the message boxes in the game.  This is because Sweet Alert is really, well, sweet, and also because it is very easy to use.  Below is an image of a Sweet Alert message box in action.

An example of a sweet alert message.

SweetAlert was created by Tristan Edwards, you can follow him on Twitter or Dribbble for updates and other cool projects!

See you next time for more Have Spell Will Travel updates.

Writing a #javascript game 2

Today I started writing the game data, starting with the stats that describe the player.  In the game of Have Spell Will Travel you take the role of a fantasy character questing through various challenges.  Anyone who played the Unofficial Talisman Game might know what I'm doing here.  Each player is a list of statistics that they use to defeat challenges.  The player chooses a race and a profession.  This combination determines their overall statistics.

Today I wrote some scripts for choosing a combination of race and profession and then providing a character sheet that can be opened and closed with some JavaScript, as in the images below.

Choosing one of the different races.  More coming soon.

Today I have been creating these collapsible stats boxes.  

Writing a #javascript game 1

So, with a little time on my hands and a desire to learn some more Javascript I've been working on a new game.  "Have Spell Will Travel" is a  browser game set in a fantasy Dungeons and Dragons meets Top Trumps/Talisman-esque world.  I will avoid writing too much about the game play for now until there is something to actually play.

My first step was to define the various css box-model elements and make sure they work across all platforms.  Next step was to define some nice styles for the background images, and dialogue boxes.  I have chosen to use styled paragraphs with onclick=() methods rather than hyperlinks for navigation.

The page can be broken down into a heading box, (an initially hidden) status box, and a dialogue box that contains the navigation.

I am rather pleased with the progress so far.  More posts soon...