Emanuele Feronato » Javascript

Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version

Emanuele Feronato — Wed, 10 Mar 2010 17:35:09 +0000

Some days ago I showed you how to create a dynamic content animated footer ad for your site in just 9 jQuery lines.

Now it’s time to write eight more lines to add two important features:

The first, as suggested in a comment, is allowing to set a delay before the ad appears.

The second is using a cookie to let the ad appear only once in a session. This means if you refresh the page, the ad won’t appear again, until you close the browser window and open it again.

This is what we’ll get… the ad appears after three seconds, and only once in a session.

Now let’s see the new lines added:


<script type="text/javascript">
$.delay = function(time,ret_function){
	var ret = {timer:setTimeout(ret_function,time)}
	return ret;
};
$(document).ready(function(){
	var delayed_start = 3000;
	var path_to_dynamic_file = 'ajax.php';
	if(document.cookie.indexOf("triqui_ad")==-1){
		document.cookie="triqui_ad=1";
		$.ajaxSetup({cache:false});
		$('#triqui_ad').wrap('
');
		var delayed_start = $.delay(delayed_start,function(){
			$('#triqui_ad').load(path_to_dynamic_file,function(){
				$('#triqui_ad').css('display','block');
				$('#triqui_container').hide().slideDown('slow');
				$('#triqui_ad').append(' • Close');
				$('#triqui_ad_close').click(function(){ 
		   			$('#triqui_container').slideUp('slow'); 
		  		}); 
			});
		});
	} 
});
script>

Lines 3-6: Declaring a new jQuery function called delay, that’s just a callback after a given amount of milliseconds.

Line 8: Variable storing the number of milliseconds to wait before showing the ad

Line 9: Variable storing the path to the dynamic file

Line 10: Checking if I have a cookie called triqui_ad. The statement is true if I don’t have it.

Line 11: Creating a cookie called triqui_ad. Since there is not an expiration date, it will expire when the user will close the browser.

Line 14: The entire function explained in part 1 is executed only after the preset delay.

And that’s it… any idea for additional features?

Create a dynamic content animated footer ad for your site in just 9 jQuery lines

Emanuele Feronato — Wed, 03 Mar 2010 21:50:49 +0000

Have you ever seen those ads sliding up from the bottom of your page when you are visiting a website? We are going to create a simple one in just 9 jQuery lines.

Moreover, with this script you will need to add just one line to your site to display the ad.

Just to make it easier to understand, I am showing you for free the principles some “companies” sell at more than $40. According to such sites, ads like the one we are about to make should increase your conversions, have more readers sign up to your newsletter, and make you live in harmony. All in one-

Unfortunately, I am only showing you how to create such ad in a bunch of jQuery lines.

This is what we are going to make: Watch the example.

Ready for the recipe? Here we go:

A web page

Obviously, you need a webpage. Any webpage will fit, as long as you include

just before the tag.

jQuery

Then it’s time to add the power of jQuery to the page: insert this script between and


<script type="text/javascript">
$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$('#triqui_ad').wrap('
');
	$('#triqui_ad').load('ajax.php',function(){
		$('#triqui_ad').css('display','block');
		$('#triqui_container').hide().slideDown('slow');
		$('#triqui_ad').append(' • Close ');
		$('#triqui_ad_close').click(function(){ 
   			$('#triqui_container').slideUp('slow'); 
  		}); 
	}); 
});
script>

Line 1: loading the latest jQuery version. I am loading it directly from Google to get the latest stable version with no stress for my server.

Line 3: Function to be executed when the document DOM is fully loaded.

Line 4: Disabling the cache when using Ajax calls. That’s why when you reload the page in the example, you always get the current timestamp

Line 5: I had to add this line because I wanted the final user to type in as less code as possible, so at the moment you just have to add

while the “real” code should be

Using wrap you will (guess what?) wrap an HTML structure around the selected element.

Line 6: This is the most important line. I am loading the result of the Ajax call made on the ajax.php file. This means I am printing inside the div everything ajax.php will echo. In my case, it will print the current date since this is the code:


 
echo "Hello, I am a dynamic content created on ".date('l jS \of F Y h:i:s A');
 
?>

As you can imagine, load loads data from the server and place the returned HTML into the matched element. The only issue is it caches the result, that’s why I disabled it at line 4

Line 7: Here I am showing the content of the div containing the ad. When you’ll look at the css, you’ll find there was a display:none to keep it hidden until the script is ready to work.

Line 8: Time to slide in the ad

Line 9: Appending a link to close the ad

Line 10: Triggering the link used to close the ad

Line 11: Sliding away the ad when the user clicks on the link

CSS

And finally it’s time to stylize the ad.

#triqui_container {
	width: 100%;
	position: fixed;
	bottom: 0;
}
 
#triqui_ad{
	background-color:#e5e5e5;
	border-top:1px solid black;
	height: 100px;
	text-align:center;
	display:none;
}
 
#triqui_ad_close {
	cursor: pointer;
	text-decoration: underline;
}

You can custom the stylesheet as you want as long as you set display:none to the ad and position:fixed and bottom:0 to the container.

Have fun… would you like more options?

Placing ads before a game loads with jQuery

Emanuele Feronato — Wed, 30 Dec 2009 11:50:08 +0000

When you run a Flash game portal or a Flash game official site, you normally place ads everywhere hoping someone will notice it.

Obviously the most interesting place where to place ads is already taken by the game itself, so we are going to create a javascript preloader that will show an ad for 15 seconds before the game starts loading.

In order to do it, you need jQuery and swfobject

Now let’s suppose the game has to be embedded in a div called the_game, just like I did in my BarBalance official site.

Just create the div this way:


	BarBalance game is loading

I used some SEO like an h1 tag and relevant content, and a CPMStar because it’s animated and we suppose won’t bore the player during the 15 seconds.

If you don’t have a CPMStar account, feel free to use my code :)

Then the jQuery part:

It’s just a 15000 milliseconds timeout fading out with a callback replacing the existing content with the Flash game.

Look at BarBalance official site to see it working.

I can’t wait to know this ad eCPM… did you already use something similar?

JQuery powered lights off effect

Emanuele Feronato — Mon, 12 Oct 2009 14:58:07 +0000

A couple of days ago a fan of my Facebook page asked me for a script to make the effect you see on this page.

Obviously simply reverse-engineering the script wouldn’t be enough for me, so I decided to create a lights off effect that make any content in a given div remain highlighted while the rest of the page fades to black (or to any color).

I used JQuery to manage the fade effect because it’s the best Javascript library available at the moment.

As a developer, I also tried MooTools and scriptaculous but believe me JQuery is some steps ahead.

Now let’s see this script:

Emanuele Feronato's lights off effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque libero euismod nulla porttitor egestas. Nulla fermentum facilisis sagittis. Vestibulum commodo pretium diam, vitae scelerisque lectus bibendum nec. Curabitur a metus est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc dolor, pretium eget venenatis ut, condimentum at sem. Vivamus rhoncus ullamcorper turpis. Aliquam sit amet risus diam, vel mattis est. Quisque sodales eros id nulla rhoncus posuere. Nullam accumsan lorem quis dolor tempor congue. Vivamus ligula augue, commodo malesuada tempor non, tristique id enim. Sed dapibus sagittis porttitor. Suspendisse faucibus scelerisque eros, ac hendrerit orci scelerisque sit amet.

Everything inside this div will remain highlighted

Lights off

Soft lights

Lights on

Vestibulum interdum, odio ut congue imperdiet, justo ligula bibendum nisl, ac placerat orci eros nec tortor. Maecenas rhoncus felis vitae elit consectetur vitae mattis metus tincidunt. Donec nec ipsum quis tellus posuere ultricies. Ut tempus tortor nec sem blandit ut facilisis nisl scelerisque. Nulla venenatis ante sit amet nisi dictum varius. Etiam congue dui eu diam fermentum et tincidunt magna egestas. Sed tincidunt magna et metus molestie malesuada. Nam tempus dignissim porta. Vivamus iaculis, orci hendrerit condimentum viverra, eros nisl euismod arcu, nec pulvinar tellus elit eu nulla. Vestibulum mattis, ligula sit amet euismod commodo, augue lorem fermentum magna, et rhoncus nisl urna nec purus. Suspendisse potenti. Fusce fermentum orci at orci posuere ornare a imperdiet justo. In hac habitasse platea dictumst. Duis adipiscing leo nec risus varius auctor. Cras sed erat massa, quis egestas leo. Vivamus dignissim lacinia leo, ac interdum nisi facilisis eget.

The div is the one called standout at line 48 and it has nothing special but a background color (it can’t be transparent) and a z-index along with a relative position (lines 40-42).

Obviously the z-index should be higher than the rest of the elements.

The other interesting div is the_lights (line 50), a black div covering all the page, initially invisible (lines 30-36). Playing with its transparency will simulate the lights effect

Now it’s all a matter of JQuery:

Line 7: Listening for the document to be ready

Line 8: Once it’s ready, the first thing is setting the_lights alpha to zero. I don’t set it from CSS but use fadeTo because I need to initialize the fading process. The entire lights out effect is just playing with the_lights and some tweening.

Line 9: Here I am listening for the turnoff div to be clicked

Line 10: Showing the_lights div… this is the same thing as
document.getElementById('the_lights').style.display='block'

Line 11: Fading the black div to full opacity.

This will give the “lights out effect”

Try the example at this page will show you the effect… click on “lights on”, “lights off” or “soft lights” and see what happens.

Interesting jQuery effect

Emanuele Feronato — Mon, 25 May 2009 20:47:52 +0000

You know I am trying to use Gallery theme for triqui.com

Yesterday I played a bit with the theme and I completely screwed everything… something like “how to destroy a complex theme in a matter of minutes”.

Then I decided to code something similar by myself. That’s the only way I know to custom everything whenever I want.

One of the best features of Gallery theme is the slider effect, so I played a bit with jQuery until I achieved something similar.

I have to say I tried to make it with Scriptaculous but for these simple effects nothing beats jQuery in my opinion.

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
     <script type="text/javascript" src="jquery.js">script>
     <script>
          $(document).ready(function(){
               $("#text").stop().fadeTo("slow",0);
               $("#container").mouseover(function(){
                    $("#block").stop().animate({"marginTop": "-30px"}, "fast","linear",function(){$("#text").stop().fadeTo("slow",1);});
               });
               $("#container").mouseout(function(){
                    $("#text").stop().fadeTo("slow",0);
                    $("#block").stop().animate({"marginTop": "0px"}, "fast");
               });
          });
     script>
     <style type="text/css"> 
     #container{
          border:1px solid black;
          width:100px;
          height:100px;
          overflow:hidden;
     }
     #block{
          padding:0px
     }
     #text{
          font:normal 10px verdana;
     }
     style>
head>
 
<body>
     <div id = "container">
          <div id="block">
               <img src = "image.png">
               <div id ="text">
                    Not the classic "Lorem Ipsum"
               div>
          div>
     div>
body>
 
html>

Line 6: importing jQuery library

Line 8: we can call it a listener for the document to be ready. When it’s ready, it executes the function

Line 9: fading the content of the text element to transparent. This way I am starting with a transparent text. Obviously I can set this from the css declaration, but I wanted to do it with jQuery because it’s cool :)

Line 10: this is a listener for the container element. Listens for the mouse to be over it.

Line 11: stopping previous animations and moving the block element (the image with the text) up by 25 pixels and once the animation finishes, fades in the text element. This replicates the Gallery rollover effect, and I can display text on multiple rows. The overlow:hidden style at line 24 gives the feeling the image is sliding like a garage door and not simply moving.

Do not use relative positioning in block element or it won’t work on IE7 (yet anohter IE7 bug…)

Line 13: listener for the mouse leaving the container element

Line 14: fading away text element and moving the block element to its original position

And this is the result. As you can see it’s pretty similar to the original Gallery effect.

Move the mouse on the image and see

Download the source code with jQuery compressed library.

GameJS and gameQuery: two javascript libraries for game developers

Emanuele Feronato — Wed, 04 Mar 2009 22:00:09 +0000

During late 90’s web games as we know them did not exist.

At that time Javascript was the only language used to make some simple browser games.

Years passed, and Flash became the leading tool to make Flash games. Anyway, I want to point you to two javascript libraries made for game developers.

While you can’t obviously compare the games you can make to modern Flash action games, I am sure you can code some decent puzzle games. Some months ago I made a Sokoban prototype using Javascript and the game worked pretty well, being Javascript only.

GameJS: A 2d game development framework in JavaScript by Tommy Maintz

It’s a Javascript port of the Microsoft XNA Framework using Canvas as the rendering device.

As the author says, « Obviously JavaScript and Canvas isnâ€™t the best combination to write browser games with. Flash will be the best platform for this for a long time. But this was all about fun, experimenting with new HTML features and learning game development. In Tetris a high FPS isnâ€™t really important, but with a filled game field, which already is 10 x 18 textures every frame, I still managed to get 25fps in FF and Chrome. This means that if you would use the framework to write games like Pacman and Super Mario, you would probably get 50+ fps on a decent computer, since they both probably have less then half the amount of textures at the same time on the screen. »

Read more information at the official page, where you can play Tetris.

I have to say, at the moment the game is giving me an error, but yesterday I managed to play from another computer.

gameQuery: a Javascript game engine with jQuery

gameQuery is a jQuery plug-in to help make javascript games easier to develop by adding some simple mechanism and commodity.

It’s still in a very early stage of development and may change a lot in the versions to come.

There is an interesting game (with a detailed tutorial) you can play: a Money Idol Exchange clone called Mechalchemist

I think it would be interesting to develop a Javascript game, maybe to be embedded as a Facebook application… yes… I am playing with FB… stay tuned…

Developing hex map concept

Emanuele Feronato — Wed, 22 Oct 2008 19:36:20 +0000

Some months ago I released some tutorials about hexagonal tiles (and I developed an Halloween game based upon Hex maps creation and rollover and Finding adjacent cells in an hex map 1 and 2).

Later, Douglas Huskins told me 10 years ago he wrote a collection of functions that would help a person navigate hex maps. The functions included: Identifying the adjacent hexes, identifying the shortest path between two hexes, the relative position of a hex from the perspective of another hex and the distance between two hexes.

This can be really useful to make some strategy games.

Unfortunately most of the work seems to be lost, but Douglas still wants to share the concept with us, so he is rewriting it in Javascript.

Read what he says:

« I could not find my electronic copy of the source files.

All I have are some old Visual Basic printouts that lacked much documentation. I have recoded it into Javascript and need to test it.

However, here are two of the functions: Move and Range.

The hex map layout this code works for is based on a hex map with the points laying horizontally. The top and bottom of a hex are flat.

Hexes are numbered such that the first set of digits represent the column number and the second half of the hex number’s digits represent the row number.

A typical hex number would be 0132. That would be a hex in the leftmost column and would be the 32nd hex down from the top.

This type of map comes in two flavors. The way to identify the two types of layouts is to compare 0101 with 0201. If 0101 is above 0201, then it is referred to as “Odd Column Up”.

The code is able to support either flavor. There is a variable set at the top of the file (mapOddUp) which will let the code switch between the two layouts.

The unit (ship/car/etc) that sits in a hex will face one of the hex sides. The faces are numbered clockwise using either 0-5 or 1-6. Again, the code supports both numbering systems by treating 0 and 6 as the same direction (straight up). There is a variable at the top of the file (mapIsUp0) that determines which facing number system to use.

The code has the ability to change the map size. There are max and min values that can be set.

If you have any questions, please let me know. I will convert the remaining functions next week. After that, I will properly test everything and add a simple interface for it. In the meantime, this should help you create hex based games. »

Here it is the source code:

/*
HEX MAP LOGIC
This code was developed and written by Douglas Huskins.
 
Permission is granted to anyone to use in any program, provided this comment block remains intact
as is AND credit is given to Douglas Huskins for the hex map logic.  Additionally, the person must 
send Douglas Huskins an email stating how and in what it will be used in.  The email address is a dot com
domain named "huskins".  The username (before the at symbol) is "doug".  If you cannot figure out how to
email Douglas Huskins, then a voice mail message at 925-957-0109 will work as well.
*/
 
// Valid move orders are L(eft), R(ight), F(orward), B(ack), W(ait)
// If this needs to be added to, MoveStep() needs the new orders as well.
var AcceptableOrders = "LRFBW";
 
// Configure the size and layout of the hex map.
var mapOddUp = true; // If hex 0101 is above hex 0201, then set to true, else set to false.
var mapIsUp0 = false; // Is the "up" facing hex side zero or six? If zero, then true. If 6 then false.
var mapMinCol = 1;
var mapMaxCol = 99;
var mapMinRow = 1;
var mapMaxRow = 99;
 
// Create an array to store the Row, Column, Facing of each unit.
// The first element is the unit number.  The second element is the hex information.
// Unit zero is reserved for the functions.  The first game piece is stored in UnitArray[1][x].
var UnitArray = new array(21, 5);   // Max of 20 units (ships, cars, whatever the game is about)
                                    // The second attribute is broken down as follows.
                                    // 0: Hex Column
                                    // 1: Hex Row
                                    // 2: Hex Facing
                                    // 3: Unit Type (not needed in this code)
                                    // 4: Unit Status (not needed in this code)
 
 
function DisplayHex(UnitNumber,booWithFace) 
{
    // Use this to print a string version of the hex number (with leading zeros, if needed.)
    // If booWithFace is true, then include the facing after a colon.  Otherwise show only the hex number.
    var HexCol = UnitArray[UnitNumber][0] + "";
    HexCol = "0000000000" + HexCol;
    var HexRow = UnitArray[UnitNumber][1] + "";
    HexRow = "0000000000" + HexRow;
    var LabelLength;
    if (mapMaxRow > mapMaxCol)
    {
        LabelLength = mapMaxRow + "";
    }
    else
    {
        LabelLength = mapMaxCol + "";
    }
    var HexFace = UnitArray[UnitNumber][2] + "";
    HexFace = ":" + HexFace;
    if (booWithFace == false)
    {
        HexFace = "";
    }
    return HexCol.slice(-1 * LabelLength.length) + HexRow.slice(-1 * LabelLength.length) + HexFace;
}
 
function MoveUnit(UnitNumber,MoveOrders)
{
    // This function is the main entry for moving a unit.
    if (MoveOrders.length > 0) 
    {
        // First off, were the MoveOrders properly written?
        // The function CheckAllOrders() will determine if the orders, as a whole are acceptable.
        // Perhaps the game does not allow two turns back to back.
        var booValidOrders = CheckAllOrders(MoveOrders);
 
        var i = 0;
        var NextMove;
 
        while (i < MoveOrders.length && booValidOrders) 
        {
            // Parse the next move from the orders and execute it.
            NextMove = MoveOrders.toUpper().charAt(i);
            if (NextMove.IndexOf(AcceptableOrders) >= 0) 
            {
                // Make the move and return the results in Unit[0][x]
                MoveStep(UnitNumber, NextMove);
            }
 
            // This function call CheckValidMove() will test if the specific orders were a valid move.
            // The function is currently empty and will return a valid move reply.
            // If the map needs to limit access between two hexes, then the function can be modified.
 
 
            // If the move is valid and the unit did not leave the map then process it.            
            if (CheckValidMove(UnitNumber) && UnitArray[0][0] >= mapMinCol && UnitArray[0][0] <= mapMaxCol && UnitArray[0][1] >= mapMinRow && UnitArray[0][1] <= mapMaxRow)
            {
                UnitArray[UnitNumber][0] = UnitArray[0][0];
                UnitArray[UnitNumber][1] = UnitArray[0][1];
                UnitArray[UnitNumber][2] = UnitArray[0][2];
            }
            else 
            {
                booValidOrders = false;
            }
            // Increment and repeat for next orders.
            i++;
        }
    }
}
 
function FindRange(Unit1, Unit2)
{
    // This function returns the number of hexes between the two units.
    // The return value is simply the number of hexes (not the number of orders it takes).
 
    // Are the two hexes above or below each other?
    if (UnitArray[Unit1][0] == UnitArray[Unit2][0])
    {
        return Math.abs(UnitArray[Unit1][1] - UnitArray[Unit2][1]);
    }
 
    // Are the two hexes on the same line (same Row)
    if (UnitArray[Unit1][1] == UnitArray[Unit2][1])
    {
        return Math.abs(UnitArray[Unit1][0] - UnitArray[Unit2][0]);
    }
 
    // Okay, then find the deltas for row and column.
    var DeltaCol = Math.abs(UnitArray[Unit1][0] - UnitArray[Unit2][0]);
    var DeltaRow = Math.abs(UnitArray[Unit1][1] - UnitArray[Unit2][1]) * 2;
 
    // So, are the two hexes adjacent?  Just need to look at the two unchecked hexes.
    if (DeltaCol == 1)
    {
        if (mapOddUp && IsColEven(HexCol) && UnitArray[Unit1][1] + 1 == UnitArray[Unit2][1])
        {
            return 1;
        }
        if (mapOddUp && IsColEven(HexCol) == false && UnitArray[Unit1][1] - 1 == UnitArray[Unit2][1])
        {
            return 1;
        }
        if (mapOddUp == false && IsColEven(HexCol) && UnitArray[Unit1][1] - 1 == UnitArray[Unit2][1])
        {
            return 1;
        }
        if (mapOddUp==false && IsColEven(HexCol)==false && UnitArray[Unit1][1] + 1 == UnitArray[Unit2][1])
        {
            return 1;
        }
    }
 
    // At this point, we know the two units are at least two hexes away from each other.
    // To simplify, we will assign LeftHex and RightHex to the values of the Unit Numbers.
    // This way, all math is done from the leftmost hex.
    var LeftHex;
    var RightHex;
    if (UnitArray[Unit1][0] < UnitArray[Unit2][0])
    {
        LeftHex = Unit1;
        RightHex = Unit2;
    }
    else
    {
        LeftHex = Unit2;
        RightHex = Unit1;
    }
 
    // The next step is to figure out if it is easier to go across then vertical or the other way around.
    // To be more clear:  We will calculate the distance along the spine of the hexes.
    // The question is when we get to the point we leave the spine, do we go vertically or horizontally.
    if (UnitArray[LeftHex][1] > UnitArray[RightHex][1])
    {
        // RightHex is above and to the right of LeftHex.
        // For every two hexes travelled, it will add 2 to the column value and subtract 1 from the row.
        // Next question is: Is the RightHex above the heading 1 spine?
        if (DeltaCol < DeltaRow)
        {
            // RightHex is above the heading 1 spine.  The distance is calculated by figuring out the
            // row value after moving along heading 1 until the columns match.
            if (mapOddUp)
            {
                if (IsColEven(UnitArray[LeftHex][1]))
                {
                    // In this case we will safely undershoot.
                    return DeltaCol + (Math.floor(DeltaCol / 2) - UnitArray[RightHex][1]);
                }
                else
                {
                    // In this case, we may overshoot by one hex if we don't adjust for it.
                    return DeltaCol + (Math.round(DeltaCol / 2) - UnitArray[RightHex][1]);
                }
            }
            else
            {
                // Same as above, however with mapOddUp set to false.
                if (IsColEven(UnitArray[LeftHex][1]))
                {
                    return DeltaCol + (Math.round(DeltaCol / 2) - UnitArray[RightHex][1]);
                }
                else
                {
                    return DeltaCol + (Math.floor(DeltaCol / 2) - UnitArray[RightHex][1]);
                }
            }
 
        }
        else
        {
            // RightHex is on or below the heading 1 spine but above the midline.  Distance is calculated by
            // figuring out the column value after moving along heading 1 until the rows match.
            return DeltaRow + (UnitArray[RightHex][0] - (UnitArray[LeftHex][0] + DeltaRow));
        }
    }
    else
    {
        // RightHex is below and to the right of LeftHex.
        // For every two hexes travelled, it will add 2 to the column value and add 1 to the row.
        // Next question is: Is the RightHex above the heading 2 spine?
        if (DeltaCol < DeltaRow)
        {
            // The RightHex is above the heading 2 spine, but below the midline.
            return DeltaRow + (UnitArray[RightHex][0] - (UnitArray[LeftHex][0] + DeltaRow));
        }
        else
        {
            // The RightHex is below the heading 2 spine and to the right of LeftHex.
            if (mapOddUp)
            {
                if (IsColEven(UnitArray[LeftHex][1]))
                {
                    return DeltaCol + (Math.round(DeltaCol / 2) - UnitArray[RightHex][1]);
                }
                else
                {
                    return DeltaCol + (Math.floor(DeltaCol / 2) - UnitArray[RightHex][1]);
                }
            }
            else
            {
                if (IsColEven(UnitArray[LeftHex][1]))
                {
                    return DeltaCol + (Math.floor(DeltaCol / 2) - UnitArray[RightHex][1]);
                }
                else
                {
                    return DeltaCol + (Math.round(DeltaCol / 2) - UnitArray[RightHex][1]);
                }
 
            }
        }
    }
}
 
// This section is for the custom validation code.
// Modify this code as needed to address unique issues with the game orders or board.
 
function CheckAllOrders(MoveOrders)
{
    // Here is where you can validate the overall orders before they are processed.
    // If you have some reason to not like the way the orders are written, write the code here.
 
    // Set the value to false if you want to invalidate the entire collection of orders.
    return true;
}
 
function CheckValidMove(UnitNumber)
{
    // Here is where you can control how the internal portion of the map is designed.
    // If you want to limit access between two hexes, then you can check for them here.
    // UnitArray[UnitNumber] is the starting hex.  UnitArray[0] is the ending hex.
 
    // Set the value to false if you want to invalidate the move, otherwise return with a true.
    return true;
}
 
// Below this point are the support functions to manage the above functions.
 
function IsColEven(HexCol)
{
    // This function returns a true if the Hex's current row is even.
    // It is used by MoveStep() to determine the next hex.
    if(HexCol % 2 == 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}
 
function MoveStep(UnitNumber, NextOrder)
{
    var HexCol = UnitArray[UnitNumber][0];
    var HexRow = UnitArray[UnitNumber][1];
    var HexFace = UnitArray[UnitNumber][2];
 
    switch(NextOrder)
    {
        case "L":
            if (mapIsUp0)
            {
                if (HexFace == 0)
                {
                    HexFace = 5;
                }
                else
                {
                    HexFace--;
                }
            }
            else
            {
                if (HexFace == 1)
                {
                    HexFace = 6;
                }
                else
                {
                    HexFace--;
                }
            }
            break;
        case "R":
            if (mapIsUp0)
            {
                if (HexFace == 5)
                {
                    HexFace = 0;
                }
                else
                {
                    HexFace++;
                }
            }
            else
            {
                if (HexFace == 6)
                {
                    HexFace = 1;
                }
                else
                {
                    HexFace++;
                }
            }
            break;
        case "F":
            switch(HexFace)
            {
                case 0:
                    HexRow--;
                    break;
                case 1:
                    HexCol++;
                    if ((IsColEven(HexCol) == false && mapOddUp) || (IsColEven(HexCol) && mapOddUp == false))
                    {
                        HexRow--;
                    }
                    break;
                case 2:
                    HexCol++;
                    if ((IsColEven(HexCol) && mapOddUp) || (IsColEven(HexCol) == false && mapOddUp == false))
                    {
                        HexRow++;
                    }
                    break;
                case 3:
                    HexRow++;
                    break;
                case 4:
                    HexCol--;
                    if ((IsColEven(HexCol) && mapOddUp) || (IsColEven(HexCol) == false && mapOddUp == false))
                    {
                        HexRow++;
                    }
                    break;
                case 5:
                    HexCol--;
                    if ((IsColEven(HexCol) == false && mapOddUp) || (IsColEven(HexCol) && mapOddUp == false))
                    {
                        HexRow--;
                    }
                    break;
                case 6:
                    HexRow--;
                    break;
            }
            break;
        case "B":
            switch (HexFace) 
            {
                case 0:
                    HexRow++;
                    break;
                case 1:
                    HexCol--;
                    if ((IsColEven(HexCol) && mapOddUp) || (IsColEven(HexCol) == false && mapOddUp == false)) 
                    {
                        HexRow++;
                    }
                    break;
                case 2:
                    HexCol--;
                    if ((IsColEven(HexCol) == false && mapOddUp) || (IsColEven(HexCol) && mapOddUp == false)) 
                    {
                        HexRow--;
                    }
                    break;
                case 3:
                    HexRow--;
                    break;
                case 4:
                    HexCol++;
                    if ((IsColEven(HexCol) == false && mapOddUp) || (IsColEven(HexCol) && mapOddUp == false)) 
                    {
                        HexRow--;
                    }
                    break;
                case 5:
                    HexCol++;
                    if ((IsColEven(HexCol) && mapOddUp) || (IsColEven(HexCol) == false && mapOddUp == false)) 
                    {
                        HexRow++;
                    }
                    break;
                case 6:
                    HexRow++;
                    break;
            }
            break;
        case "W":
            break;
        default:
    }
 
    // Now return the results in the "zero" element of the Unit Array
    UnitArray[0][0] = HexCol;
    UnitArray[0][1] = HexRow;
    UnitArray[0][2] = HexFace;
}

This should help you all in the creation of a strategy game… at least it’s helping me…

Someone out there willing to translate it into AS3?

Complete Javascript popup opener

Emanuele Feronato — Fri, 21 Sep 2007 15:38:31 +0000

Opening popups in JS is simple, but sometimes in the same page we need to open popups with different features. There are several scripts in the net doing this task but, as usual, none of them seemed to fit my needs

I decided to code a complete javascript popup opener in order to have one function that I can use in any situation.

These are the customizable parameters of your popup:

url: the string representing the url of the page you want to open in the popup. Default value: this page.

width: popup width, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen width. For example, if you enter 0.5, it will be parsed as 50% of screen width. Default value: half of the screen width.

height: popup height, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen height. For example, if you enter 0.5, it will be parsed as 50% of screen height. Default value: half of the screen height.

xpos: x position of the upper left corner of the popup. It can be an integer or “left” or “right”. If you enter “left” your popup will appear in the leftmost part of the screen, if you enter “right” your popup will appear in the rightmost part of the screen. Default value: the one that will center the popup horizontally

ypos: y position of the upper left corner of the popup. It can be an integer or “top” or “bottom”. If you enter “top” your popup will appear in the topmost part of the screen, if you enter “bottm” your popup will appear in the bottommost part of the screen. Default value: the one that will center the popup vertically

xoffset: an integer representing amount of pixels, positive or negative, that will place the popup respectively to the left or to the right from its horizontal position. Default value: 0

yoffset: an integer representing the amount of pixels, positive or negative, that will place the popup respectively up or to the down from its vertical position. Default value: 0

name: window name, passed as a string. Default value: “propup”

scrollbars: can be “yes” or “no”, defining if the popup window will have scrollbars. Default value: no

resizable: can be “yes” or “no”, defining if the popup window can be resized. Default value: no

status: can be “yes” or “no”, defining if the popup window will show the status bar. Default value: no

locat: can be “yes” or “no”, defining if the popup window will have the location bar. Default value: no

toolbar: can be “yes” or “no”, defining if the popup window will have the toolbar. Default value: no

Let’s examine the script:

var propup = function(o) {
	o.url = (typeof o.url == 'undefined') ? 'http://www.emanueleferonato.com/2007/09/21/complete-javascript-popup-opener/': o.url;
	o.width = (typeof o.width == 'undefined') ? screen.width/2 : o.width;
	o.height = (typeof o.height == 'undefined') ? screen.height/2 : o.height;
	if((o.width<=1)&&(o.width>0)){o.width*=screen.width}
	if((o.height<=1)&&(o.height>0)){o.height*=screen.height}
	o.xpos = (typeof o.xpos == 'undefined') ? (screen.width/2)-(o.width/2) : o.xpos;
	o.ypos = (typeof o.ypos == 'undefined') ? (screen.height/2)-(o.height/2) : o.ypos;
	o.xoffset = (typeof o.xoffset == 'undefined') ? 0 : o.xoffset;
	o.yoffset = (typeof o.yoffset == 'undefined') ? 0 : o.yoffset;
	o.name = (typeof o.name == 'undefined') ? 'propup' : o.name;
	o.scrollbars = (typeof o.scrollbars == 'undefined') ? 'no' : o.scrollbars;
	o.resizable = (typeof o.resizable == 'undefined') ? 'no' : o.resizable;
	o.status = (typeof o.status == 'undefined') ? 'no' : o.status;
	o.locat = (typeof o.locat == 'undefined') ? 'no' : o.locat;
	o.toolbar = (typeof o.toolbar == 'undefined') ? 'no' : o.toolbar;
 
	if(o.xpos == "left"){o.xpos=0;}
	if(o.xpos == "right"){o.xpos = screen.width-o.width;}
 
	if(o.ypos == "top"){o.ypos=0;}
	if(o.ypos == "bottom"){o.ypos = screen.height-o.height;}
 
	o.xpos += o.xoffset
	o.ypos += o.yoffset
 
	var scrollbarstext = 'scrollbars = '+o.scrollbars+",";
	var resizabletext = 'resizable = '+o.resizable+",";
	var statustext = 'status = '+o.status+",";
	var locationtext = 'location = '+o.locat+",";
	var toolbartext = 'toolbar = '+o.toolbar+",";
 
	features = scrollbarstext+resizabletext+statustext;
	features = features + locationtext+toolbartext;
	features = features + 'width = '+o.width+',height = '+o.height;
	features = features + ',top = ' + o.ypos;
	features = features + ',left = ' + o.xpos;
 
	var win = null;
	win = window.open(o.url, o.name, features);
}

Line 1: Function declaration, with only one parameter. That’s possible because I am passing a Javascript object structure into a function as an argument. It’s a very good technique mostly because it allows flexibility in the order you will pass the arguments, and provides flexibility on optional arguments too. You will understand this technique later, when I will explain how to call the function.

Line 2: I am using a ternary operator to set a default value of “url” if the user did not specify it when called the function. Basically this line can be translated into:

if(typeof o.url ==  'undefined'){
	o.url = 'http://www.emanueleferonato.com/2007/09/21/complete-javascript-popup-opener/';
}
else {
	o.url = o.url
}

Where the “else” statement is pretty useless. We can say that line 2 assigns a default value to “url” if not provided by the user

Line 3: Assigns a default value to “width” if not provided by the user. In this case the default width is half of the screen width.

Line 4: Same thing with the height

Line 5: If width is a number between 0 and 1, then I assign to width the (width*100)% of the screen width.

Line 6: Same thing with the height

Line 7: Assigns a default value to “xpos” if not provided by the user

Line 8: Same thing with “ypos”

Line 9: Same thing with “xoffset”

Line 10: Same thing with “yoffset”

Line 11: Same thing with “name”

Line 12: Same thing with “scrollbars”

Line 13: Same thing with “resizable”

Line 14: Same thing with “status”

Line 15: Same thing with “locat”

Line 16: Same thing with “toolbar”

Line 18: Assigning 0 to xpos if xpos was “left”. In this way the popup is at the leftmost of the screen

Line 19: Same concept with the right

Lines 21-22: Same concept with “ypos”

Lines 24-25: Adding the x and y offset to x and y positions

Lines 27-31: Declaring strings according to passed arguments

Lines 33-37: Constructing the string with popup attributes

Lines 39-40: Calling the javascript classic window.open with all arguments. You can find more information about HTML DOM open() Method at this page.

Now let’s see how to use this function. As I said, you can pass arguments in the order you prefer and if you even decide if passing arguments or letting the function use its default values.

This is the source code of a typical page using propup


 


	
		
		
			Default popup
			Opening Google
			700x200 popup
			30%x200 popup
			Popup in the right bottom end of the screen
			Popup 100 pixels far from the right end of the screen
			Popup with scrollbars
			Resizable popup
			Popup with status bar
			Popup location bar
			Popup with toolbar

And this is the result:

As you can see, there is not limit about the number of arguments you can pass or the order you are passing arguments in.

Simply copy the code, use it and enjoy! Should you use this function in your site, please let me know! I would be so proud (almost…)

Javascript Sokoban game script

Emanuele Feronato — Sat, 08 Sep 2007 16:59:15 +0000

I’ve always been addicted to logic games and Sokoban is one of them.

From Wikipedia: Sokoban (warehouse keeper) is a transport puzzle in which the player pushes boxes around a maze, viewed from above, and tries to put them in designated locations. Only one box may be pushed at a time, not two, and boxes cannot be pulled. As the puzzle would be extremely difficult to create physically, it is usually implemented as a video game.

In some cases Javascript is not the ideal language to code puzzle games, because the player can read the code and have a clue about the puzzle. Just imagine a Minesweeper game in Javascript… a brief look at the code and you’ll know where the bombs are.

In Sokoban, reading the code is useless because you don’t play in a static level, but level changes as you move your player pushing blocks.

At this time the script is very essential, and contains just one level, but I am going to push (yes, talking about sokoban, I obviously “push”) the script very far away, including level editors, leagues and even more.

Every single line of the script will be explained, as usual, meanwhile you can watch the code from your browser.

Can you solve the level? Can you tell me where did I rip the main sprite?

Click image and get coordinates with Javascript

Emanuele Feronato — Sat, 02 Sep 2006 16:53:46 +0000

I had to display several photos where the user can click over an interesting point and have its coordinates passed through a form.
Of course, it was a bit more complicated, but this is the code i want to share with you.

Let’s assume we have a photo like this:

If you continue to click on the photo, you will see pointer changing its position, same thing with x and y coordinates

How can it be done?

You can try this script, obviously changing path and styles according to your needs









You pointed on x =  - y =

Tested both on Firefox and Explorer, it seems to work well.

Enjoy and give me feedback.