Jiangyue Zhu

Impossible is Nothing


Leave a comment

Greedy Snake Game–Using HTML5 Canvas and JavaScript

A couple weeks ago, I used HTML5 canvas and JavaScript, jQuery to implement a greedy snake game. The logic is pretty simple, compared to some complex animation game. And the all of the implementation is based on HTML5+JavaScript+CSS, without any usage of Flash.


snake

The UI is simple but the functionality is working fine, what the users need to do is to use keyboards(up-arrow, right-arrow, down-arrow, left-arrow) to control directions of the snake. The score will be recorded once the snake hit the targe and the snake’s size will be auto-increment. The game will end if the snake hit itself or the edge.

The source code can be found on GitHub: https://github.com/zhujy8833/Snake

There is another version which I put in jsFiddle: http://jsfiddle.net/zhujy_8833/bRMjV/

Click Here to view the live demo.

Advertisements


Leave a comment

Customize jQuery Plugin–Back to Top widget

How to make a more friendly widget which can enhance the user experience on the website? Imagine this scenario: when you browse a web page with long height and you almost reach the bottom of this page, how would you feel if you have to go back to the top right now? Is it too much boring to use the scroll bar which may make your finger exhausted? You may need a small widget which can make this even happen just by one click. Actually, when I browsed some websites, I noticed that some of them implemented this kind of features which I think are very user-friendly. In this blog, I want to tell how I implemented this  by using defining a customized jquery plugin.

For someone who may not be familiar with jquery plugin, please take this as reference.

Firstly, I need to write some codes for this widget using div with an id “backToTop” assigned. And I would use a small icon –up arrow for this widget. 

The code samples for this part is pretty simple:

<div id="backToTop">
   <img src="img/up.png" alt="up" width="60" height="80" />
 </div>

Now, the task would be switched to the style sheet. What I want is to move this widget to the right-bottom corner and always be there during scrolling through the page. In this way, it will not affect users’ reading behaviors. So the style sheet for this part looks like this:

div#backToTop{
	position:fixed;
	right:0em;
	bottom:0em;
	cursor:pointer;
	display:none;
	}

Some additional parts should be noted. As we prefer not to see this widget at the first time (cause we only need it when we leave the top position), we set the display attribute to none. Also, we set cursor to pointer in order to tell users they can click on it.

Then, it comes to the core part, the jquery plugin. Firstly, let’s create a new js file, naming it ‘plugin.js’. Inside it, let’s add these codes:

// JavaScript Document
(function($){

 $.fn.backToTop=function(options){
 var settings = $.extend({
 "position":200
 },options);

 var this_= this;
 var position = settings["position"];

 $(document).scroll(function(){

 var currentPos=$(window).scrollTop();

 if(currentPos >= position){
 this_.show();
 }
 else {
 this_.hide();
 }

 });

 this_.click(function(){

 $(window).scrollTop(0);

 });

 };

 })(jQuery);

Simply put, what I am doing is to define a function called ‘backToTop’ with an optional parameter called position. This position attribute is used to define when the widget should appear. I set the default value to 200. Besides, I added a scroll event to the document object and retrieve the current top offset. Using a if-else statement to control the visibility of the widget, the widget would not show up until the current top offset goes beyond the position we set. Then, don’t forget to set a click event on this widget, in the event, define a function to let set the window object scroll to the top by using scrollTop(0). And if we scroll back to top in which the current offset is smaller than the position that we set, the widget would disappear.

After we accomplished this javascript file, we need to call this function in our page. Generally, we use $(“#backToTop”).backToTop([optional parameters]) to invoke the function.

$("#backToTop").backToTop();

Now, we are set! Please visit my live project.


Leave a comment

HTML5 Box Model

As we know, the contents enclosed by <div></div> would be considered as block-level container as default. If there are some contents that we want them to be in a menu, it needs some more work to implement it.

Let’s see an much easier and more elegant way to do this by using box-model.

Now, I have a div which has an id “menu”. It would be used to display a menu with three elements:

<div id="menu">
 <div id="home">Home</div>
 <div id="contact">Contact</div>
 <div id="about">About</div>
</div>

If we did not change anything, the sub-div would be aligned vertically. What we want to do now is to align them horizontally, just like what we see in some websites.

It is easy to do this by using box-model. The codes of this part are like this:

<style type="text/css"> 
#menu{ 
 display:box;
 box-orient:horizontal;

 display:-webkit-box;
 -webkit-box-orient:horizontal;

 display:-moz-box;
 -moz-box-orient:horizontal
}
</style>

Actually, we need to set the display attribute of menu div section to box. In the codes, there are two additional attributes which has prefixes: -webkit and -moz which aims to solve the cross-browser compatibility. -webkit is to support several browsers such as Opera, Chrome, and Safari, while -moz supports Mozilla Firefox. We note that the box orient attribute is also being set to horizontal.

Are we set now? Not yet. Why? The reason is that the sub-div elements will not inflate into the whole menu div, even though all these three sub-div elements are aligned horizontally. For example, if we set the width of the menu div to 500px, then the current result would be something like this:

That’s definitely not what we expect. Now, the next step is to add some codes for controlling those menu sub-div elements. The codes are like this:

#menu > div{
 text-align:center;
 border:#999999 solid;
 border-radius: 5px;
 box-flex:1;
 -webkit-box-flex:1;
 -moz-box-flex:1;
}

The important part is the attribute box-flex. Simply put, if we set the box-flex value of all the sub-div elements to 1, it means that those three elements would occupy the whole menu div with equal width. That’s what we want! So, after adding these codes, the result looks exactly what we expect:

Here is a live result, click here. It has more than what I introduced above because it has some additional attributes which can allow the div stretch when the mouse is hover on it. Also, it has some features such as the shadow or border radius.