Screen Grab of the Javascript game I am coding

When coding you spend most of the time inside your own head. But you also get to off-load what is going on in your head and put it on a screen. Another person comes along, looks at the screen and puts what they see into their own head. You then get a reaction, the worse being indifference and the best being joy, hate is not worthless as at least it shows something has been processed.

Standing back from your coding to observe the points you came from and the point you are going to is very hard.

Having that wide view is crucial, this is where social media can be important because you get to invite real time feedback which needs to be processed and then fed back into the coding process.

Here is a screen grab of my first Javascript game, which is still in production and just got started. Bearing in mind I am at the beginning of a “learning to code”, journey I am pleased with current progress.

learning to code chop wood

I think it’s useful to capture progress in time, visually and within the version control.

Looking back at progress made in the past helps motivate for progress in the future.

Learning to code has the possibility of taken me to a place in the future that I have not yet thought of.
How cool is that?

What would the biggest crafting game in the World look like?

Big complex games

Part of dealing with life is to gamify it.

There are a lot of people a lot brainier than myself who have written thousands of words on the matter of why we play games. One theory is it provides a sand pit where we can test out ideas and work through things with less of an impact on our real lives or RL as gamers like to call it.

Gamification is a useful tool for many different reasons, which we wont go into here as such a subject is easily found in great depth on the Web.

A crafting game has the potential to introduce complex systems which need to be thought out and creatively deployed for maximum results. Why do people watch football games when the outcome has no actual impact on their lives apart from social and emotional. Why do people collect trains, or bird watch or play chess.

A social argument can be made, “it’s a great way to meet people”, or “it’s great for business”. But if known to be using it for simplistic, social gain, any community will soon have you labeled and out goes the social benefit.

Those who love to play a game are much more likely to earn “extra benefits”, such as increased social network or the ability to make millions of Dollars video streaming game play.

To love a game it has to have specific aspects personal to the gamer. This makes whether a game is good or bad entirely relative to the needs of the gamer.

By developing a game that is addresses the specific needs of a particular type of game it is possible to create a game that people will love. Albeit a finite amount of people who find such a thing engaging.

To develop a game which people will love it helps that the developer loves it too. And thus it is with Chop Wood. I love a game that is all about crafting, something about research, development and building in a game context has always attracted me. And if you take a look at some of the games on offer in app stores, it engages people too.

To develop a great game it has to have some aspect which is unique. The “biggest” is often use as a way of differentiating a game from competitors. So what would the biggest crafting game in the World look like?

You could argue “real life”, is the biggest game we can play. But we are creating worlds where, this is what game developers do. We are creating a world where we define the goals, consequences and everything else. This is where the creativity comes in.

Would biggest be about the different types of stuff you could gather, learn, craft. It could be quite simple in game play but having a depth which created a complexity, a puzzle to solve.

Factorio does this very well, enabling simple concepts to be deployed to build an extremely complex world.

Minecraft also gives that ability to allow the user to create complexity whilst providing basic tools, resources and actions.

Eve has incredible complexity and size due to the way stuff can be put together to make more stuff to do specific actions.

The biggest game doesn’t necessarily have the largest amount of stuff, but allows you to build an utterly massive and complex world.

I mused with the idea of making Chop Wood the most massive crafting game ever, where you could build the most different types of stuff.

But to what point?

Amount of stuff doesn’t always create complexity and depth, but it can help. It’s more what direction the stuff can take you and it could be argued the limits of that type of game has already been touched upon.

Another direction to go is a multi-user component, the simplest of games can become massive if enough people are playing. Chop Wood is designed from the ground up to allow interaction with other players for trade and communication, although my technical skills are a long way from making that happen right now.

In conclusion:
Benefit of size is not just about the amount of stuff you can gather or even the amount of stuff you can craft or build, but about the depth and complexity you can develop using the basic stuff of the game.

What is the game Chop Wood?

Do you respect wood?

Chop Wood is a crafting game written in vanilla Javascript, using the Bootstrap 4 framework.
Providing game-play based on gathering, building, crafting and follows the best practices of such types of game. The aim is to make a fun game, but fun to a specific type of person who is into such games.

It has an open ended structure to allow the game to have multiple options during development. Meaning we could get a little crazy and offer a “hire a cat to dance whilst you chop wood”, option. Probably wont, but it’s nice to have that option.

Although the game will be published in its own right, I am using development of the game to teach myself Javascript coding and to be wise in a number of HTML5 frameworks. This is why the game initially is extremely basic and first, but will increase in complexity as more updates happen.

I hope you enjoy following me on this journey, there will be failures and disasters on the way, but also success and the opportunity to learn from my mistakes. So pass the popcorn and hope I can add a little fun to your day.

Chop Wood, Version updates.

Version updates for Chop Wood:
Latest version

This will now be the page where updates are published in consecutive format.
Updated 29th May 2018

To do:

  • Workers to be able to be hired to automate bulk actions.
  • Bootstrap 4 modals investigate, design for the game
  • Add progress bar for each object action with slight time delay
  • Replenish seeds with each tree chopping to issue random number of seeds, number to be determined with regards to balance.
  • Replicate object tree with mining and farming
  • Skill based system where a skill is increased each time an object is actions, this skill will open up further action and increase the amount and quality of resource gathering and building.
  • Ability to purchase land, which regularly produces resources passively.

Version 0.07

  • Worker button added, with a worker selection, not yet fully fleshed out with worker attributes.

Version 0.06

  • Dynamic progress bar added to trees, logs, timber and planks. Need to correct this function to allow only one item to be actioned at a time.
  • Forest skills added, these will be spent to progress to farming and mining.
  • Modals added to some actions, however needs to be modified to bring them in line with Bootstrap’s 4 syntax.
  • Jquery added to aid Bootstrap 4’s framework, everything else still in vanilla Javascript

Version 0.05

  • Forestry skills added: This is a skill which increases each time you work on wood
  • A buy seeds button added, currently it’s 2 credits for one seed.
  • Facebook page for Chop Wood set up
  • Persistent game link added so the url does not move around, will now always be https://www.lyndonantcliff.com/forest-mood/chop-wood.html

Note: After researching Local Storage option further, decided not to go with it, but to use it in another app as this app does not need it. Plus it has certain restrictions and security issues. For a persistent game it will go straight to a JSON based dbase, probably a cloud based solution such as Firebase.

Version 0.04

  • Modal introduced to replace alert box for when seeds reduced to 0.
  • Due to modal being designed in vanilla CSS and the game running on a Bootstrap 4 framework, the design of the modal needs optimising.
  • Bootstrap 4 element added to the seed progress bar, visual improvement.

Version 0.03

  • Animation to object icons added with animate.css. Slight bounce onClick.
  • Add seed button added, increases number of trees grow
  • Progress bar added to simulate time taken to plant seed and growth of tree.

Version 0.03

  • Issue with variables of objects updating on a global scope after updates within functions. Solved with the introduction of of object literals. This forms the basis of when the data will be held in a JSON format.

Version 0.02

  • Introduction of click on element and the amount increases
  • Bootstrap 4 css framework introduced

Version 0.01

  • Basic game mapped out, chop trees, trees into logs, logs into timber, timber into planks. Everything open ended to enable further growth.
  • Main aim of game is to learn Javascript and a CSS framework.

After Animated clicks and Dynamic Progress Bars, Chop Wood V.03 is available

Chop Wood v.03

You can now play Chop Wood V.03 Click here

One thing that is surprising me about learning to code is the joy you get from it. Yes you do spend your days gnawing on trying to understand a concept and then getting it to work. But when it does work, wow it’s a real hit.

Doing this makes me feel like a kid again it’s very liberating.

So I have figured out how to animate an object when clicked, I used Animate.css and it’s pretty easy to do. Add a bit of javascript to it to give the best user experience and work it into a clicked object which already impacts variables, a little thought required but not much.

I know I can animate in vanilla Javascript now, but I want to keep the project forward, so may come back to that.

Progress Bars, or rather dynamic progress bars. I wanted a click on an object to trigger a progress bar which filled to 100% over a period of time, and then changed another variable when it was finished. I also want to add more animation to this.

This took all day, most of the progress bar tutorials are for Jquery, which goes against the ethos of this project being coded as much as possible in vanilla Javascript.

I finally got the progress bars to do what I want, this was down to experimenting and using the knowledge learned over the past few months to make educated guesses.

It became a game of fitting two big chunks of jigsaw pieces to complete a bigger part of the picture.

My understanding of the concept of functions has gone up a notch and am now able to understand complex nested functions and loops.

It doesn’t feel as hard as it did and I now know things I didn’t use to know. which seems like voodoo, it’s so long since I learned something on this scale.

I feel the game of Chop Wood is now starting to reveal itself. Of course it will always be pretty simple, but I want to get it to the point where someone decides to play it and gives the minimum of 5 minutes of their life.

Yes the front end and UX is awful, merely to allow me to see the back end function, but that will improve.

Very interested to get local storage as an option and then to login and save your game to Firebase.

From a gameplay POV I want to bring in mining and the ability to search and mine a map. Even owning parts.

You can probably tell, but I am absolutely loving doing this.

Problem solved on chop wood with Object Literals

Chop wood game icons

My first ever attempt at creating my own app from scrap was Chop Wood, which I can now call, Chop Wood, v.0.1

It didn’t work, I couldn’t think how to create a variable which could be accessed by numerous functions whilst keep a true account of itself.

The solution now seems so easy I am slightly embarrassed but still proud of my first creation.

Using object literals I have solved the issue with scope and keeping proper track of the values of the variables. Although I am still not clear about values and references of variables. Let and const are one ways this is defined, I have read a number of articles on the subject but the concepts have not yet clicked.

Progress with my learning has been made.

I have realised it’s very hard, in the sense that when you try to understand something and can’t, it feels you can never understand the thing. But you have to keep moving forward and that is the hard bit, it’s the recognition that despair and running to stand still are perfectly normal feelings to have and do not mean you are not getting anywhere.

Which is weird, because normally if you try to go somewhere and don’t, you go another route.

So now I can unveil Chop Wood v.02

It now does everything I wanted it to.
Now I have to add more features and build out the mechanics.
My inspirations is obviously all those crafting games which are played, I find the gathering, crafting, building mechanics very interesting. As well as an in-game economy.

Long way to go yet, my time line is I would have something to put on the app store in three months. In the meantime I will have learn a lot.

Go check out Chop Wood v0.2 and share thoughts.

7 Days of Javascript hell over a few lines of code

I wanted to create an original piece of code which did something.

And I did with Chop Wood.

Something simple, but something which took an input and then changed an attribute on the DOM. Or is it “element”, I am still not well versed in javaspeak.

This week has all been about learning a few simple things to the point of where I could actually use them:

  • querySelector
  • getElementById
  • function()
  • addEventListerner
  • Global variables
  • Function variables

I have spent 7 days or more studying the above, in various youtube video tutorials, books and wikis. All I wanted to do was present and object with a variable, click on that object which reduces that variable by one and then changes another variable. I then wanted the variable that had been changed to be clicked on and change again, as well as changing another variable and so on.
Cascading the effect down a list of objects.

It seems simple, well I thought it did and found it incredibly hard, but I stuck with it. Although causing my family to emit radioactive death rays towards me as I wouldn’t stop going on about it. Ever been there?

One of the problems is the much talked about issue of function variables and global variables, I thought it would be easy to pass a variable which originated in a function to play in the global scope, no no no, can’t do that.

I read you could create the variable outside the function and then pass it in, but still I couldn’t get it to work.

I then found a work around and came up with this:

let treecard = document.querySelector('.this-tree'),
count = 10,
logfun = 0;

//Tree counting function
treecard.addEventListener('click', function() {
//tree

if (count <= 0) { alert("You are out of trees, dumb dumb. Go find some more."); return } else { count--; document.getElementById('tree-score').innerHTML = count; logfun++; document.getElementById('log-score').innerHTML = logfun; } });

I absolutely expect there to be an easier work around and may even be schooled by another javascript noob, which I am fine with this. I have only been serious about learning javascript for a few months so any criticism from coders more experienced than me is welcome.

I still can't wrap my head around where the variable of "count" actually lives, is it on the DOM or is it in the script. And is a global variable(I assume it is) or a function variable?

I have read a number of code examples of global vs function variables and become even more confused, but I know clarity will come. As it has somewhat with querySelector and getElementById and I get a kick out of manipulating the DOM with them. My question is, why bother with getElementById anymore. Is it just habit that people still use it?

Also, getting to grips with ES6, which seems the wise thing to do. All the old tutorials still use var, whilst I am focusing on only using let and cost. Which seems to be the perceived wisdom. I realise it is worth getting to know the old way of doing things, especially if working on legacy cod.

So go look at what I did, yes, it will take you 17 seconds to get it and then get bored, but I am so proud that I got it to work. Real agony was spent on this.

I have new things to add updates to the Chop Wood game, which will continue my learning, like:

  • Animation of objects when performing
  • Sounds when objects performing
  • Time delay for better usability
  • Progress bar, time animated
  • Regrow trees button with cost to score variable
  • Market place to sell and buy items from the game, variable pricing
  • Save game to JSON
  • Save game to local storage on browser
  • Save game to Firebase
  • Save game to SQL

    A long way to go yet, but I have set myself the goal of learning javascript this year. I expect the above to take another 3 -4 months to complete. But I love learning this stuff and creating something where nothing existed before, even if the actual thing is so simple.

    Any comments or suggestions please make them in the comments. Would love to hear feedback.

    Chop Wood

    Thanks to the Youtube channels of Brad Traversy and Dylan Isreal, I bought Brad's Modern Javascript course from Udemy, highly recommend it.