| ||
|
|
| |
| ||
| ||
| Inside Technique : Speed Scratch Cards Hopefully you all saw and enjoyed my original scratch card program. After a suggestion by Daniel@Godreigns.com, I made a few changes and present Speed Scratch.
Speed Scratch fixes the pre-loading bug of the original Scratch and changes the metal from 64 <DIV>'s to cover a picture to 16 <DIV>'s. While retaining the same effect we use a different approach. Instead of cycling through the four DIV's, we simply change the transparency of each <DIV>. The main improvement is in the speed of restoring the metal - 4 times quicker. A drawback is the metal can only be single colored - therefore no longer allowing for psychedilic metals such as one that fades from purple to red.
Anyways, below is the new code (including the image pre-load routine):
<SCRIPT>
sc=new Array('crown.jpg','x.jpg','seven.jpg','diamond.jpg','ruby.jpg','magic.jpg');
img=new Array();
for (i=0;i<6;i++) {
img[i]=new Image();
img[i].src=sc[i];
}
for (pic=0;pic<3;pic++)
for (hor=0;hor<4;hor++)
for (ver=0;ver<4;ver++) {
idn=eval(pic*16+hor*4+ver);
document.write('<DIV ID="M'+idn+'"
onmouseover="changealpha(this);"
STYLE="position:absolute;z-index:1;width:25;height:25;top:'+eval(100+ver*25) +
';left:'+eval(225+pic*125+hor*25)+';background-color:black;
filter:alpha(opacity=100)"&lgt;</DIV>');
}
This is where the main changes have taken place. The entire style selection has been dropped. The variables have become user-friendly. The onmouseover function has changed, and each metal piece has an alpha filter.
The
function changealpha(metal) {
mfo=metal.filters['alpha'].opacity;
mfo-=20;
if (mfo<0) mfo=0;
metal.filters['alpha'].opacity=mfo;
}
The functions below generate the random number to randomly determine what image to load:
function rnd() {
return Math.floor(Math.random()*6);
}
function scimgload() {
document.images[0].src=sc[rnd()];
document.images[1].src=sc[rnd()];
document.images[2].src=sc[rnd()];
}
This last function restores all the metal:
function scmetal() {
for (i=0;i<48;i++)
document.all['M'+i].filters['alpha'].opacity=100;
}
and finally the HTML has not changed at all from the original: </SCRIPT> </HEAD> <BODY onload="scimgload();"> <H1 align="center">Scratch Cards - Match three the same</H1> <IMG SRC="" STYLE="position:absolute;top:100;left:225;width:100;height:100;z-index:0"> <IMG SRC="" STYLE="position:absolute;top:100;left:350;width:100;height:100;z-index:0"> <IMG SRC="" STYLE="position:absolute;top:100;left:475;width:100;height:100;z-index:0"> <BUTTON STYLE="position:absolute;top:250;left:350;width:100;height:100" onclick="scmetal();scimgload();">Again</BUTTON> </BODY> </HTML> Have fun and be sure to try the new version of the game! Jon Perry is a freelance Author and Programmer. Contact him at Jon@perry.globalnet.co.uk Page 1:Speed Scratch Cards © 1997-2000 InsideDHTML.com, LLC. All rights reserved. |