Scurry Game Devlog 3 – Lots of new stuff!

So it has been a while since I have posted any news about the game that Eric and I are working on. Scurry is coming along great and I have lots to show.

We have added a title screen, complete with twitching antennae.

Scurry Title screen

 

Here are a few shots of gameplay:

Scurry Screen Scurry Screen

A lot of the work has been Eric getting everything setup to scale and fit any screen size properly, detect desktop or mobile browsers, and have working audio on many devices.

I on the other hand have been working on the artwork and animations, I am excited about how it is all turning out, and we have a roadmap for completing the game with two types of levels and 4 levels total. It will feel really good to finish off our first real game.

Play the current version of the game here: http://scurrygame.com

jquery.timepicker and another quickTip

So here is another useful jQuery plugin I found while doing a signup form project at work, the jquery.timepicker.  As you may have guessed – this is similar to the date picker  componant in jQueryUI, but as the name implies it is for Times only. This particular project called for me to create a means for the user to enter a time range they were available for an event. I started to create my own custom UI for this, but then the lack of  time made me search for an existing tool.  After a quick search I found jquery.timepicker by John Thornton, here is the main demo site: jQuery TImePicker

I really love the simplicity of the plugin, I simply created a class called “timepicker” and gave that class to each of the input elements on the page that needed it.
Then I added this snippet of jQuery to the page:

/* All you need to get started once jquery.timepicker is included on your page:
*/
$('.timepicker').timepicker();

This is all you need to start a very basic time picker, but I wanted to restrict the user to a certain range, so I used the parameters that John describes on the jquery.timepicker site:

$('.timepicker').timepicker({
	'disableTimeRanges': [
    ['12am', '10am'],
    ['4:30pm', '11:59pm'],
  ]
});

quickTip: Out of sight – Out of Mind

jquery.timepicker
Let’s ditch these non-selectable times, and lower our chances of  confusing the user.

This worked great, but it does not hide the disabled times, it only grays them out and prevents selection, so today’s quickTip is how to remove them from sight, and provide a better user experience.

I found out that John wrote jquery.timepicker to give disabled times a css class of “ui-timepicker-disabled”, so it’s very easy to hide these elements using either CSS or jQuery.

jquery.timepicker 2
Here is the result, only see what you can pick, only pick what you can see.

I have noted both methods below:

// The CSS Method

.ui-timepicker-disabled{ display:none; }

 

// The jQuery Method

$('.ui-timepicker-disabled').hide();

Have a great day, and if you have a quick tip be sure to pm me on twitter @alexbezuska and I can share it on the site.

Learn. Create. Explore. Code. 
-Alex Bezuska

jQuery Tip – Different Keys for the same Thing

So here is something I was struggling with and found a solution that might help other people trying to do the same thing. My goal was to have two keyboard keys do the same thing, in this case move the character in my game. So a player could use W A D S or the arrow keys. My code before was this:

                 case 40:  //down
	         	squid.css('top' , position.top + 50 + 'px')
	         		.removeClass("idle")
	         		.addClass("down");
	         		break;

	         case 83:  // also down
	         	squid.css('top' , position.top + 50 + 'px')
	         		.removeClass("idle")
	         		.addClass("down");
	         		break;

But you can do this instead to help reduce the amount of code, and organize your code better.

               
                 case 40:
	         case 83:  //Use either of these keys
	         	squid.css('top' , position.top + 50 + 'px')
	         		.removeClass("idle")
	         		.addClass("down");
	         		break;

I am still trying to figure out how to have key combos like W + D to move up-right or A + S to move down-left so my character can have 8 different directions to move, making it a bit more fluid. If you know how to do this drop me a comment, if I figure it out on my own or have time to google around for it some more, I will post it here.

30 Days to learn jQuery – Day 1

Day 1

So here is my first post in a series chronicling my process of learning jQuery.

I am using a series of video tutorials from Tuts+, the series is called ’30 Days to Learn jQuery‘ by Jeffrey Way.

I am a visual learner, that is just a fact I have come to recognize about myself, I have to either see or do something to understand it and both will always amplify my chances of retaining what I am learning.

So these blog posts may be redundant if you are going to watch the video series, but guess what? They are more for me anyway! If you get something out of reading and following along that would be awesome, as I do enjoy passing along skills to others, and anything that improves your skills(or mine) will hopefully better the web and thats the point of it all.

Confession time…

For over a year now I have been using it, but I have always seen it as some mystical code snippets that I should never modify or the magic dust might get contaminated. I am a jQuery ‘paster’ and that probably makes real jQuery coders view me as I used to view people back in the Myspace days when they copied and pasted “myspace codes” (HTML and CSS) to change the theme of their page, and wondered why it broke when they combined 50 of them that conflicted.  I knew HTML and CSS then, and would laugh at the ridiculous combinations and multiple styles trying to modify the same elements of the page. Thats one major reason I want to dive in and learn jQuery, because I feel ignorant, and I am (when it comes to this subject).

I won’t try to teach a complete beginner here, instead check out Jeffrey Way’s lessons, they are free and awesome, what I will do is post what I learned, no matter how basic from each lesson, so it might be a recap for you, or it might help more to reinforce what you are learning. Either way, here we go lesson one!

 

jQuery min is for production, meaning I will use this file when the site is complete, and ready to go live, that way it loads faster for the users, and good UX is important.

Production – Compressed, Development – Comments and spacing

The ‘$’ in jQuery code just calls jQuery to do something, its like saying, “hey jQuery do this:” shorthand

What is the DOM? Document Object Model, a representation of your page

recommends sublime text 2 as editor

load jQuery at bottom so it appears to user to have already loaded the page before it loads jQuery

Chrome dev tools shortcut: cmd + opt+ i

 

Use Google’s CDN because it is more likely to already be cached on a user’s system, reducing load times.