|
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.
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!
_______________________________________ This page was written, and is maintained, by Dallas
|