| ||
|
|
| |
| ||
| ||
| Inside Technique : Creating Scratch Cards Be sure to also check out Speed Scratch Cards. An alternative version that uses transparency filters to create the metal. My stratch card program emulates the stratch cards in the real world. The underlying images are revealed slowly by continual 'rubbing' of the the metal with the mouse pointer. The program is written in DHTML for Internet Explorer. There are four layers of "scratching" before you reach the underlying picture. The layers fade from black to transparent and are defined using the following CSS classes:
<HTML>
<HEAD>
<TITLE>Scratch Card Game</TITLE>
<STYLE>
.general3 {background-color:#333333;z-index:4}
.general2 {background-color:#555555;z-index:3}
.general1 {background-color:#777777;z-index:2}
.general0 {background-color:#999999;z-index:1}
</STYLE>
The scratching effect is created by hiding the element with the highest z-index. This automatically reveals the next DIV element. A Simple Scratch GameTo demonstrate we created the basis for a simple scratch game where you are uncovering three symbols. Each symbol is represented by an image. We will randomly select 3 images from an array and hide them behind the scratch surface.
<SCRIPT>
sc=new Array('crown.jpg','x.jpg','seven.jpg','diamond.jpg','ruby.jpg','magic.jpg');
z=new Array();
Creating the metal scratch surface requires the creation of 64 DIVs for each image. To easily track each DIV we also assign each one with a unique ID. This allows us to quickly loop and restore the display of the scratch layer for each round of game play. The position of the DIV are calculated to create 16 blocks of 25pixel*25pixel squarees. These numbers can easily be changed and should be if you use images of different sizes.
for (p=0;p<3;p++)
for (i=0;i<4;i++)
for (j=0;j<4;j++)
for (k=0;k<4;k++) {
idn=p*64+i*16+j*4+k;
document.write('<DIV ID="M'+idn+'"
onmouseover="style.display=\'none\'"
CLASS="general'+i+'"
STYLE="position:absolute;width:25;height:25;top:'+eval(0+j*25)+';left:'+eval(125+p*125+k*25)+'"
></DIV>');
}
Next we supply the functions to randomly load a set of three images. This code uses the common rollover techniques, and a function rnd() to supply a random number between 0 and 5.
function rnd() {
return Math.floor(Math.random()*sc.length);
}
function scimgload() {
document.images[0].src=sc[rnd()];
document.images[1].src=sc[rnd()];
document.images[2].src=sc[rnd()];
}
The following function resets the scratch layer by resetting the display.
function scmetal() {
for (i=0;i<192;i++)
document.all['M'+i].style.display="";
}
</SCRIPT>
</HEAD>
The game is initialized by the onload event. The onload event
call the
<BODY onload="scimgload();">
<H1 align="center">Scratch Cards - Match three the same</H1>
<DIV STYLE="position: relative;height: 300">
<SCRIPT>
// This script must be within the relatively positioned DIV.
for (p=0;p<3;p++)
for (i=0;i<4;i++)
for (j=0;j<4;j++)
for (k=0;k<4;k++) {
idn=p*64+i*16+j*4+k;
document.write('<DIV ID="M'+idn+'"
onmouseover="style.display=\'none\'"
CLASS="general'+i+'"
STYLE="position:absolute;width:25;height:25;top:'+eval(0+j*25)+';left:'+eval(125+p*125+k*25)+'"
></DIV>');
}
</SCRIPT>
<IMG SRC="" ID=img1 STYLE="position:absolute;top:0;left:125;width:100;height:100;z-index:0">
<IMG SRC="" ID=img2 STYLE="position:absolute;top:0;left:250;width:100;height:100;z-index:0">
<IMG SRC="" ID=img3 STYLE="position:absolute;top:0;left:375;width:100;height:100;z-index:0">
<BUTTON STYLE="position:absolute;top:150;left:250;width:100;height:100"
onclick="scmetal();scimgload();">Again</BUTTON>
</DIV>
</BODY>
</HTML>
Jon Perry is a freelance Author and Programmer. Contact him at Jon@perry.globalnet.co.uk Page 1:Creating Scratch Cards © 1997-2000 InsideDHTML.com, LLC. All rights reserved. |