Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques - JavaScript programming

(Page 6 of 6 )

As a general rule, we’d better specify the properties of the behaviors within the defaultloadevent handler—pageLoad of the client object Sys.Application. As was explained before, we specifically build a DragDropMagic to describe the possible complex data that the draggable object carries. In this game, we have to specify the dragDropMagic property for each of the six custom behaviors. The related code is shown below:

function pageLoad(sender, args)

{

var tArray = [];

createRandomArray(tArray);

$find("b1").set_dragDropMagic({backgroundColor:'orange',number:tArray[0]});

$find("b2").set_dragDropMagic({backgroundColor:'red',number:tArray[1]});

$find("b3").set_dragDropMagic({backgroundColor:'yellow',number:tArray[2]});

$find("b4").set_dragDropMagic({backgroundColor:'green',number:tArray[3]});

$find("b5").set_dragDropMagic({backgroundColor:'magenta',number:tArray[4]});

$find("b6").set_dragDropMagic({backgroundColor:'blue',number:tArray[5]});

}

Note that the $find method is the shortcut for the Sys.Application.findComponent global method. This is very important in client-side programming and is used to find the reference to the client-side component.

The effect of the createRandomArray helper function is to create six numbers ranging from 1 to 6 that should be assigned to the six dice at random with equal chance. For simplicity, we’ve directly specified the background color of the drop area. Now, you can see that when the game is launched, the six dice will be assigned six different dot numbers at random. The following gives the source code associated with the createRandomArray function.

//return an integer ranging from iFirstValue to iLastValue

function selectFrom(iFirstValue, iLastValue) {

var iChoices = iLastValue - iFirstValue + 1;

return Math.floor(Math.random() * iChoices + iFirstValue);

}

function createRandomArray(nRndArray)

{

var aNumbers = ["1", "2", "3", "4", "5", "6"];

var j=0;

var temp;

while(j<6)

{

temp=aNumbers[selectFrom(0, 5)];

if(Array.contains(nRndArray,temp))

continue;

else

{

Array.add(nRndArray,temp);

j++;

}

}

}

All of the above codes are basic JavaScript programming.

At last, let’s take a quick look at the related click event code for the ‘Restart the game’ button:

function btnClickHandler()

{

var tArray = [];

createRandomArray(tArray);

$find("b1").set_dragDropMagic({backgroundColor:'orange',number:tArray[0]});

$find("b2").set_dragDropMagic({backgroundColor:'red',number:tArray[1]});

$find("b3").set_dragDropMagic({backgroundColor:'yellow',number:tArray[2]});

$find("b4").set_dragDropMagic({backgroundColor:'green',number:tArray[3]});

$find("b5").set_dragDropMagic({backgroundColor:'magenta',number:tArray[4]});

$find("b6").set_dragDropMagic({backgroundColor:'blue',number:tArray[5]});

 

$get("DropTarget").innerHTML="?";

}

It's all so simple, isn’t it? When the player clicks the ‘Restart the game’ button, we again invoke createRandomArray to generate random numbers and assign them to the six dice. And also, we set up the necessary properties for the six dice. Finally, we restore the content of drop target to the beginner question mark.

So much for this game—you can now press F5 and give it a test! I bet you will be attracted to the friendly interface.

-DOWNLOAD SOURCE-

Summary

In this article, we developed a simple dice game using the ASP.NET AJAX client-side drag & drop technique. As was emphasized again and again, the two client-side interfaces (IDragSouce and IDropTarget) and the DragDropManager object play crucial roles in nearly all ASP.NET AJAX client-side drag & drop based applications. Therefore, to gain a more intensive comprehension of the IdragSource and IdropTarget interfaces, DragDropManager, as well as the relations between them, you are highly advised to earnestly study the source code of the two important behaviors—DragDropList and DraggableListItem in the PreviewDragDrop.js file. Once you have seized the main ideas of how to implement the two behaviors, you may have the ability to do any kind of ASP.NET AJAX-related drag & drop programming.

Apparently, the little game in this article is pretty simple. Maybe the biggest deficiency is that we have not employed the typical Web service means to provide data to the client side. But by using the many samples related to consumer Web service in ASP.NET AJAX on the Internet, it won't be difficult for you to supplement this functionality. And you may even use this small program to develop your own more complex and Ajax-based online games.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques (code unedited)

>>> Be the FIRST to comment on this article!