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.

Coding Resources I use learning to program and how not to learn coding whilst having a bath.

I am developing a methodology of learning, which I have found is crucial to help me move forward. Rather than simply picking up a book and working through it, I now use numerous points of information and move forward with daily and sometimes hourly goals.

I am 4 months into my “learning to code year” and here is a list of coding resources I am finding very useful.

Freecodecamp.org
Freecodecamp.org

This has been a game changer for my ability to progress.

It is a tutorial website, which has gamified the learning process and enabled you to get direct feedback with a simple progression score. As you work through the mini tutorials/problems you get a point. The points are gained very easily at first and progressively get harder. Before you know it you actually learn stuff.

As a way to get a basic HTML and javascript knowledge it worked very well for me. Although I already know HTML, I have never learned it in a formal way and although I already new the basics of javascript from reading a few books and watching video tutorials, it didn’t click in my head.

By allowing micro problems to be solve after the smallest amount of information is given it follows “a lot of little” type formula which you can come back to at your own pace.

I have slowed down with it as I am now on to learning algos, but dipping in for 15 mins a day really helps.

Youtube

Information is now free.
Mostly. I have caved and bought a course from Udemy

It seems if you want to learn anything now, Youtube is the place. Why buy a £30 book when you can hit Youtube for free, there are valid reasons for buying a book, more on that later.

After much watching and investigating, I have a list of favourite, expert Youtubers who appeal to me. This list is my list and not necessarily the best in the world, but it’s the best for me.

Traversy Media


I am currently watching this guys videos the most. He is clear, explains the little details which others gloss over expecting you to already know. His tutorials are well planned out and he is very responsive to the needs of his audience.

Also, he has a Boston accent, which I find one of the most interesting American accents, plus he has an inspiring back story and seems like a thoroughly good chap.

Traversy Youtube channel

Dylan Isreal
Youtube channel

I like the backstory of Dylan, I think it’s important to look at the journey other people are taking to be able to be realistic about your learning plan. My problem in the past has been, “I just need to read this book and I can build the new Facebook.”

Learning to code is hard, especially for me as I find it hard to focus and keep going to an end point. If that end point is unrealistic it’s impossible to reach it and you give up thinking you’re just thick (I may be one of those thickos who learns despite).

Dylan has taken the path from novice to professional and is able to communicate a lot of the non-programming skills essential to being a progammer, along with the ability to teach coding.

Jon Sonmez

This guy cracks me up, he teaches a video in a stringy, workout vest (can’t remember what Americans call them) and often talks about his workout. He’s another one for teaching the soft skills essential as a programmer and is not afraid to say that coding “is hard”. A lot of people selling learning make it sound like you can “learn in a day”, when the reality is a lot different. This is of course to get people to hand over the readies. Which is one reason I think free, ad supported Youtube videos can work, watching is paying.

Jon has probably the biggest experience as a software developer and really knows his stuff. It’s very useful to learn from someone as battle hardened as this cap.

Although I am expecting one tutorial to be given from a hot tub with a couple of gym ladies serving him cold beer. Jon if you’re reading this, this is the idea for the next video.

Net Ninja

Not just here because he has a British accent (always good to here your own accent), but because his tutorials are informative, professional and clear. He covers quite a lot of ground in his tutorials and presents in a well designed way.

The above are the ones I visit regularly, but others of note are:

Program With Erik
CodingPhase
Academind
Chris Hawkes

All the above will teach you what you need to  know with regards to coding. They all seem to cover javascript and HTML and the popular frameworks. It’s really about personal choice and which voice connects with regards choosing who to follow.

Websites I use often

Learning and tutorials
Freecodecamp.org
Codeacademy
Codeschool

w3schools.com

Hosting/cloud
Heroku-Cloud application platform
Google developers
Codepen

Communities
Stack overflow
github.com
stackoverflow.com

Reference
devdocs.io

Tools and other
Colorzilla
What Font extension

Blogs

Books

Books I like:

Head first Javascript
Simple Programmer
Eloquent Javascript
Clean Code

If I did one thing different it would be to buy less books and do more real life coding projects.
But here are a few positives of paper books.

  • Usually written by an expert in the field.
  • Highly portable, I once read a Php book in the bath, I dropped the book into the water and from then on the pages crinkled. You can’t do that with a laptop (although I have heard stories).
  • You can notate them, paper books are best for this. Yes you can note and highlight with e-books, but it’s just not the same as your personal squiggles
  • You can lend or give to others
  • They make excellent doorstops. The php books I had were massive, but after a few years they were out of date, but still came in useful as a heavy weight doorstop for my drafty, attic, coding den.
  • E-books over paper books? I think it depends on what does it for you, I like the heft and smell of a real programming book. But I also like the ability to read on my iPad, or quickly consult my iPhone to look up something on a Kindle book.

    Books have fallen out of fashion, but they have their niche and I think will always stick around in some form.

    All the above can be seen as tools for the transference of information. However I think there is another element at play and that is putting you in the mindset, or getting you in the mood. Being in the right frame of mind I think is crucial to successful learning time. It’s taken me a while to develop the right aspects of learning and mix them in the right amount.

    I do a lot more actual tapping the keyboard these days, and have weaned myself of simply ingesting information, which I always find easy to get into and hard to get our of. Implementing and building stuff is my main focus these days.

    Hope this blog post has been useful to you. What are your favourite, learning to code tools? Let me know in the comments below.

My journey from Coding Noob to Coding Expert.

There are two things wrong with that headline. Only two?
Already I am writing clickbaity headlines for a programing blog, I just can’t help myself.

Here’s the thing, I feel I am only just getting started and so certainly am not an expert, but I’m not really a noob.
I started to learn to code in 1981, in BASIC on a Commodore Vic20 with 3.5k. I didn’t  get past a simple GOSUB “Hello World” and spent most of my time copying game code from magazines. At the time that is what you did.

Forwards to 1998 and a friend and I set up a website, it was a stock market game with celebrities in the news rather than companies. He did all the coding, I did everything else. Php 3, Mysql, a bit of javascript and even some PERL. The site ran just fine, I tried to keep up with the coding and learn, but I got into managing the site, building content and SEO. I had a spin off site which was getting 30k visits a day through SEO work.

The site eventually crashed and burned, my partner and I parted coding pathways and I delved into the art of content marketing, SEO and then social media.

I have got by in my web dev career by learning coding to the “just need to know”, level. This involved plugging in pre-written scripts with no real modification. Mostly PHP, a bit of javascript, lots of WordPress sites and plugins, but no real code learning.

Around 2008 I decided I wanted to learn php, so read a few books the size of large house bricks, tinkered around, got distracted and moved on. At the time I was doing major consultation on content marketing for the biggest companies around so I had not commercial need to learn to code.

Around 2015 I wanted to get into to game creation, which is something I have always wanted to get into right from the beginning. I now realise this is the route most interested people like myself take. But of course coding games and playing games are two different mindsets. I bought a book on learning Unity, it seemed learning a game engine was the way to go. I got pretty far in the book, but again got distracted with client work and the gaming industry is probably the hardest to break into as most coders head there like herds of starving beasts to the feeding trough.

Fast forward to this Christmas. Burnt out with content marketing, although still have enough SEO and general online marketing skills to help clients. So decide to have another run at becoming an expert coder.

This time I stick with what I know, which is the web. Mostly front end, but in reality Full Stack. I aim my sights at Javascript, read a few books, watch a lot of videos.

I find things have changed a lot since 1981, no duh. Actually, things have changed a lot since 2015, even 2017.

Frameworks, or libraries (take your pick, most seem to interchange the term) seem to come in and out of fashion with quick regularity. Last time I looked it was all Ruby on Rails, now it’s Laravel, Vue2, React, Nodejs…etc.

Not only that, there are things like Webpack, NPM, Markdown, Bootstrap (this one is cool), Gatsby,  Yarn, Babel, CamanJS…etc. It seems to go on forever, and depending on who you talk to depends on which is the must set of stuff you should go for.

After investigation, Vanilla Javascript is my main focus, which means just plain javascript, I guess vanilla sounds cooler than, plain.

The plan as it stands.
Learning Vanilla Javascript to a professional level. Professional means I can look at any code and not have my head explode and be able to sell javascript services to the highest bidder. Having someone hand you cash to do something is sometimes the best metric to know you have arrived.

Primary skill I have set out to learn:

Vanilla Javascript

Secondary skills:

Vue2
Php
HTML/CSS
Bootstrap

Vue2 is the javascript library I am going to focus most on. It’s lightweight and quick to deploy, React is more popular but is more clunky to deploy.

Php seems to be falling out of favour to Node.js. But for server side it’s still popular. WordPress is in php and is my main CMS. It’s now on version 7, so I am hoping things have improved a lot, it was never elegant, but with frameworks like Laravel it may be more easy to work with.

HTML/CSS, although I am not a noob in these areas I do need holes filling in. I should be able to put a sophisticated front end together, but don’t have the organisational skills, I only know bits.

Bootstrap is a lot of fun. A HTML/CSS library it makes throwing up responsive web pages quick and easy. Flexibox is also something I need to add.

And the rest

Animate.css is very interesting as I want to create animated infographics.
Node.js, running javascript could be very interesting as I am learning vanilla javascript. It could be a replacement for php, I need to learn more on this before I can commit.
Visual Studio, not a language but a code editor. I have finally ditched Dreamweaver (ugh, the bloat) and am going text only. VS is great and with a ton of plugins.
AWS, Firebase, MongoDB…etc. I want to go as cloud based as I can and I want to scale as easy as I can. Also try out other databases than MySQL

Conclusion

Success consists of going from failure to failure without loss of enthusiasm.

Winston Churchill

I’ve probably failed at learning to code than anything else I have tried. But I keep at it, and will till I get it.