gotFusion.com....... Where your adventure begins
Full Service Web HostingNetObjects Fusion 7 Websites Portal

 


 


A question on one of our newsgroups asked how to implement a DHTML script on a NOF page.

She was looking at DynamicDrive and just wanted to use some of their free scripts. Here's part of her post:

    "The game scripts are at
    http://www.dynamicdrive.com/dynamicindex12/index.html
    In the center of page, look in the DHTML Script Categories for DHTML Games. I'd like to use the following games on the kids' page of a site.

      Phong
      Snake
      Tetris Game (the first one)
      Tic Tac Toe
      DHTML Puzzle

    I could install first whichever one you think best for learning. Do you think the instructions for these five are clear enough for a novice?"

Well... I think they are pretty easy for a novice! Here's my implementation: Play Tetris

The problem with this game is that the score boxes don't seem to work. They dont work on the DynamicDrive site, and they sure don't work here. But the lesson is OK just the same.

I'll describe below how I got this on a NOF page.

____________________________________________________________________________________

1. Download the tetrisgame.zip file from DynamicDrive and unzip it to your Assets folder. I created a folder within my Assets folder and called it Tetris, then I unzipped to there. In NOF, go to Assets View and add all the files you just unzipped as New File Assets. Mark them to Always Publish. Make sure they will publish to the same directory as the page that has the link to the game. Check this in Publish  view. If they're not in the same directory, drag them there. For this game, these were the files I unzipped and added as New File Assets:

1. DynamicDrive told me to put this in the Body of my page:

<script>

/*
Tetris Game (By Xin Yang yangxin@iname.com)
Exclusive permission granted to Dynamicdrive.com to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//preload images routine by Dynamicdrive.com
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("block0.gif","block1.gif","block2.gif","block3.gif",
"block4.gif","block5.gif","block6.gif","blockb.gif")

function goTetris() {
  if (document.layers) {
   window.open("tetrisNN.html", "Tetris", "width=360,height=400,resizable,titlebar=1");
  }
  else if (document.all) {
   window.open("tetrisIE.html", "Tetris", "width=360,height=400,resizable,titlebar=1");
  }
  else {
   alert("You need IE 4+ or NS 4 to play Tetris!");
  }
}

</script>

<a href="tetris.htm" onClick="goTetris();return false">Play Tetris!</a>

Well, almost. In NOF, in the the Beginning of Body, put only the bits between the <script> </script> tags. What I mean is, leave out this line:

<a href="tetris.htm" onClick="goTetris();return false">Play Tetris!</a>

(NOF will create your link for you - see below.)

In fact, just to complicate things, I like popups (like the ones this game is in) to centre on my screen. So I adapted it a bit. If you want it centred, put this in your Beginning of Body:

<script>

/*
Tetris Game (By Xin Yang yangxin@iname.com)
Exclusive permission granted to Dynamicdrive.com to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//preload images routine by Dynamicdrive.com
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("block0.gif","block1.gif","block2.gif","block3.gif",
"block4.gif","block5.gif","block6.gif","blockb.gif")

var NNurl='tetrisNN.html'
var IEurl='tetrisIE.html'
var w='360'
var h='400'
var sw=screen.availWidth;
var sh=screen.availHeight;
var l=(sw-w)/2;
var t=(sh-h)/2;

function goTetris() {
 
if (document.layers) {
   window.open(NNurl,'','width='+w+',height='+h+',left='+l+',top='+t+',screenX='+l+ ',screenY='+t+',resizable=0,scrollbars=0,toolbar=0,location=0,directories=0,stat us=0,menubar=0,copyHistory=0');

  }
 
else if (document.all) {
   window.open(IEurl,'','width='+w+',height='+h+',left='+l+',top='+t+',screenX='+l+ ',screenY='+t+',resizable=0,scrollbars=0,toolbar=0,location=0,directories=0,stat us=0,menubar=0,copyHistory=0');
  }
 
else {
   alert("You need IE 4+ or NS 4 to play Tetris!");
  }
}

</script>

2. Create the link. For my link above where I typed "Play Tetris", I selected it and clicked the Link button. I made it a Javascript link and put just a hash (#) to the right of Javascript- like this:

Now, click the HTML button at the bottom of the Links Palette and put this Inside Link:

onClick="goTetris();return false"

3. Publish your site and click your link to test that you did all of the above (because if you didn't, it won't work.)

Good luck!

Return to the TOP of this page


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2002 gotFusion LLC.  The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC
Copyright, legal notice & privacy statement