Chicken vs. Egg! v0.1: Now with MORE movement!

It’s been several days since my last post, and I’ve been up to quite a bit – I don’t think I can cover it all in this post, but I’ll hit on the main points.

I took a little break from Chicken vs. Egg! to return to a website I first discovered probably a decade back when I was first learning Python – it’s called Python Challenge, and it ate up a lot of my coding time since I last posted. It’s a very basic-looking website with levels you can only clear by implementing a programming solution – for example, one level has a picture which links to another page when you click it. That page contains a picture which links to yet another page, and so on a couple hundred pages deep until you finally reach the solution. Sure, you could spend a decent chunk of time clicking through manually – but the idea here is to learn how to load up the pages via a script and click through automatically so the program does all the work for you. It truly is challenging, and I enjoy it quite a bit. That’s only one example; it gets steadily more challenging as you progress. I highly recommend it if you’re looking to increase your working knowledge of Python when applied to semi-real problems.

chicken-movement-demo-3

I ended up falling asleep early a few nights ago and broke my 100 Days of Code streak, but I got right back to it (here’s a link to day 15). Well, I’ll clarify – I’ve still been working on code every day, but I forgot to log and upload yesterday and didn’t feel like backtracking, so I just decided to write it off as a free day. Today I made some good progress on CvE! – I started refactoring the code into much-needed OOP format, starting with creating a class for the Chicken. I still need to handle the Egg, but now that I’ve got the Chicken class working, I think it’ll be a piece of cake.

Once I merged the branch I’d made for writing the chicken OOP code, I moved on to adding vertical movement for the chicken, which I was able to implement in no time (I’ve added a new GIF for your viewing pleasure). The program is still a baby, but it’s really starting to take shape. I decided to go ahead and call it v0.1 – the first program I’ve ever tagged with a version number! It’s something I want to get in the habit of doing.

In addition to learning how to tag the version on git, I also learned how to reset to a previous commit, how to compare code at various points (rather than the currently staged version vs. the previous commit), I’ve been getting better at branching regularly, I learned how to push a branch to Github (which I didn’t realize hadn’t been happening automatically), and I learned how to correct a prior commit message. I’m pretty amazed at the depth of this tool, and equally amazed that it’s available for free. It’s becoming less scary to me as it becomes less and less of an unknown quantity.

Tonight I finished refactoring my code to make the Egg class and an eggs array, where I should be able to store all of my eggs (once I have multiple flying across the screen at any given point). Next, I plan to work on collision detection, random generation of the eggs, and getting them to fly across the screen (perhaps with rotation). I also want something more than just a black background, but I’ll save that for the polish phase. I’ll check back within a few days to let you guys know how it’s going. In the meantime, you can check out the repo on Github here, if you’d like.

My first script: an update (now with jQuery)

I haven’t posted in a few days, but I’ve still been steadily reading and researching to up my web development knowledge. I took a brief detour from JavaScript to work through some of the Python exercises on Learn Python The Hard Way (which, so far, I highly recommend), I’ve read through most of the jQuery Core documentation, and wrote another basic script to use with Greasemonkey in Firefox (I may write about that separately in a future post).

However, while viewing newbie-friendly open source projects on Up For Grabs, I came across one which mentioned issues in something called Codacy. I had never heard of this, so I signed up for an account and ran it on my Github repo for the prime number script I wrote recently. It gave me a B, mentioning several issues with my usage of console.log statements. In that original project, I created a bare bones web page, but all of my output went to the JavaScript console, which is more intended for development purposes. I did not have any visible output if the console was closed. To get rid of these errors, I decided to rework the code a bit.

I started by adding the index.html file to my repo, then added an empty unordered list which I planned to add list item elements to with the results of each prime number I checked in my script. I attempted to stick with vanilla JavaScript, but after a couple hours of futile attempts, I finally resorted to using jQuery. (If you’re interested, the repo is located here.)

When I converted my newly updated JavaScript code to jQuery, I noticed that my code became much more concise (which I appreciated). Here’s my code as it stands currently (and holy hell, was it hard to get this formatted right in WordPress’s editor):


$( document ).ready(function() {

	//find and store <li> DOM element with ID "output" to list
	var list = $( "#output" );

	function isPrime(number) {
		var remainder;

		//this will store each new <li> element as "item"
		var item;

		//this will store string to be appended to new list item
		var result;

		//prime numbers must be greater than 1
		if (number <= 1) { 			//create new <li> DOM element
			item = $( "<li/>" );
			result = number + " is not greater than 1! False.";
			item.html( result ).appendTo( list );
			return false;
		}
		else {
			for (var i = 2; i < number; i++) { 				remainder = number % i; 				if (!remainder) { 					item = $( "<li/>" );
					result = number + " is not a prime number! False.";
					item.html( result ).appendTo( list );
					return false;
				}
			}
			item = $( "<li/>" );
			result = number + " is a prime number! True.";
			item.html( result ).appendTo( list );
			return true;
		}
	}

	isPrime(0); //should return false
	isPrime(1); //should return false
	isPrime(2); //should return true
	isPrime(17); //should return true
	isPrime(7919); //should return true
	isPrime(23456789); //should return true
	isPrime(10000000000000); //should return false
});

From the start, this code is different because it’s wrapped in jQuery’s built-in functionality to check that the document has loaded, so I don’t go messing with the DOM before it’s ready for me to. To target the unordered list element on my index page, I find it with jQuery (targeting its ID, “output”) and save it to a variable named list.

The next addition to this script is a variable named “item,” which I’ve designated to store the new list item elements I’ll be adding to the output list. I’ve also created a variable named “result” to which I’ll save the strings describing the results of running the function.

Inside the conditional statement that checks whether the number is less than or equal to 1, I’ve replaced the invisible console.log statement with the new code that creates and appends a visible list item to the page. I did this by creating and saving a new list item element to item with jQuery. I then save a string stating that the inputted number is not greater than 1 and is thus false. Finally, to get this list item element onto the page, I again use jQuery to add the result string within the li tags and, using handy jQuery chaining, append it to the list I targeted earlier in the script. I then return false in case I wish to use the return value for something in the future (though I can’t currently imagine how I’d use it).

I didn’t have an else statement in my original script, since the number would either be return false and exit the function or otherwise continue on to execute the lines of code which followed, but I put an else statement in the revised script. It might be overkill, but I added it for the sake of thoroughness. Inside the for loop which checks for factors (returning false if they’re found, since a factor would signify the number isn’t prime), I used the exact same method described above to create a new list item element, fill it in with a string, and append it to the targeted list before returning false.

Should the for loop finish without returning false, I know that I’ve found a prime number – so I immediately use the same method I devised to add a list element stating that the number being tested is a prime, returning true. For fun, I added a fun new number I knew to be prime (23, 456, 789) to further test my program functionality. It worked!

It took me hours to get this seemingly simple program debugged and running properly, but I feel like I’ve learned a good deal in the process. I’ve been doing my absolute best to commit my changes regularly with git after making a change to the code so that it’s easy to briefly describe what I’ve done. Using git properly is probably one of the most difficult skills I’ve had to learn, but it’s essential…and I’m only scratching the surface yet. I experimented with branching for the first time, though I still don’t quite think I’ve got the hang of it. I find that I’m becoming more and more mindful of the need to commit the more I code. And I incorporated jQuery for the first time! I’m hungry to put it to further use. While I do want to master the basics of JavaScript without relying too heavily on a library, the platform cross-compatibility of jQuery makes it hard not to use. I’m sure it’ll pop up in quite a few of my scripts going forward.

Now I need to go to bed. Thanks for reading!