30 Jan

Ashley’s Tiles using Phaser

I created the game based on the concept set out here, and the storyboard here. I used Phaser, an extremely popular “desktop and mobile HTML5 game framework”. I highly recommend it. I could have used just HTML, Javascript and CSS but it did end up saving me time in the long run. I really didn’t use it to it’s full potential, as my game was so simple and didn’t require using many of Phaser’s amazing features, but nevertheless it will definitely be a go-to framework next time I want to create a game.

The trickiest bit was writing the checks for the tile matches. To recap, once all the tiles have moved, the aim was to check if there were any matches of three tiles or more (not diagonally, but they didn’t have to be in straight lines as ‘L’ shapes are permitted). For a long time this function would cause the game to error. It turns out, the tiles were being checked before the animation was complete, and so empty tiles were being checked and causing a mess. Once the problem was identified, it was an easy fix.

I’ll put the game up on GitHub, but for now, the finished game can be played here.

Screen Shot 2016-01-06 at 23.42.18

Ashley’s Tiles – feel free to let me know what you think.

Please follow and like:
30 Sep

Idea Generation

It’s really odd being given a brief without a subject.

“Anything you want, within reason.” is quite a difficult task. There’s so many options and yet finding one that feels perfect takes time.

I know I wanted to practice my coding skills – HTML, CSS and JavaScript being the top 3 I’m interested in. Structure, styling and functionality are necessities for every front-end developer. I also wanted to combine the things I’ve learnt in other areas: usability, branding, maybe even a little SEO and marketing (why not?).

It’s very rewarding (and self-indulgent) to look back over the last two years and see just how far I’ve progressed. That’s one of the lovely things about this blog too. It’s very helpful to be able to remind myself of some of the tools I have at my disposal. No one has a perfect memory, and looking back at old work shows how I overcame certain issues in the past, saving energy and a lot of time spent on stackoverflow.com.

So after flicking through my old work, I created the following mind map (always a great starting tool) to expand on the following 4 points:

  1. What do I want to make?
  2. What do I want to learn?
  3. What am I interested in?
  4. What skills make me employable?

Initial mind map

I wanted to pick something that would combine an interest with other beneficial elements. There’s no point wasting time repeating old stuff exactly as I’ve done it before when I could be learning something.

Two ideas I pursued:

idea1

 

idea2

After some brief initial research into the two ideas, I decided to select the second for my degree project: an online allotment planner. It has endless possibilities, and hasn’t been perfected in a workable in-browser format yet.

Please follow and like:
10 Apr

Making a portfolio website

I have been working on a new portfolio site to show my work and some of the skills I have learnt over the last six months.

With a good working knowledge of HTML5, CSS3 and JQuery, as well as an eye for design, amazing things can be made. Here is a collection of helpful blog posts, tutorials and code that can help make your website a little bit fantastic.

1. MEDIA QUERIES – CSS TRICKS

Responsive is key. We all need to be doing it. I spend a massive amount of my web browsing time on a smartphone. One train journey makes it apparent that phones and tablets are a huge portion of web traffic. Even on this blog, my analytics show that 27.76% of site views have been on a mobile or tablet.

analytics mobile usage

Basically, too much to ignore. So my portfolio site uses media queries to set up a specific mobile site (and less drastic changes for tablet) found here at CSS-Tricks.

Ashley Nye responsive design

2. JQUERY PLUGINS – UNHEAP

Everybody could use a bit of JQuery, not to rely on, but to enhance. It’s a very quick, easy way to make your website do cool stuff. And grab a load of cool at Unheap.

3. PRINCIPLES TO CODE BY – SMASHING MAGAZINE

This is a great little article on keeping it clean by Chris Coyier. Ok, so there is no rulebook (as much as I wish there was) but there are certain things you can do to make your code cleaner, more beautiful and crucially easier to read and edit. This is a must, in a world where time is money.

This can also help satisfy the perfectionist in you. Everybody wins.

4. BROWSER SUPPORT TABLES – CAN I USE

Can I use…? Wouldn’t the world be a much better place if the answer was always yes. Sadly, though, that is not the case. Worst case scenario is (and rather foolishly, but we’ve all done it…) after painstakingly perfecting your site on one browser, you nervously open it in another to find it looks like someone with a grudge against you hacked your server.

Save time and energy checking browser compatibility before you code.

5. VALIDATE, VALIDATE, VALIDATE – W3C VALIDATION

For HTML and for CSS, it is extremely important to make sure there are no errors in your code, and periodic checks will save lots of time later on. Mistakes are made by everyone, so whether you are a beginner or expert, validating code is crucial.

6. WHAT IS POSSIBLE WITH JAVASCRIPT

This isn’t really helping you to make a portfolio site, but it is inspiring. If you want a little motivation, take a look at this blog post on develop-a-website.com that showcases some amazing JavaScript experiments. So you’re not about to install a sheet of tearable cloth on your portfolio, but it’s still worth taking a look.

I’m impressed enough to say, I’m going to learn to be a better coder.

Tearable cloth

Please follow and like:
10 Mar

Breaking Google

I didn’t really break Google, I just stumbled across a really awesome, completely unnecessary and very playful version of the famous search engine’s homepage. Check it out here.

Another JavaScript experiment that excites the geek in me, courtesy of Mr Doob.

The best bit is using the search bar. Well, I had fun with it.

Screen Shot 2014-03-10 at 21.50.39

Please follow and like: