Death Valley Pong: make your visitors addicted to your website

Death Valley Pong: make your visitors addicted to your website
Death Valley Pong is a high-speed-game with 5 levels testing the reactions of your visitors. Although it's a full-fledged racing game the script is very easy to set up (true copy-and-paste). The game is pure DHTML! Fast loading. A very exciting way to attract more visitors. Internet Explorer 4 or higher.
SIMPLE RULES: Choose any level. Click start (yellow circle left). Try to reach Goal (yellow circle right) by moving your mouse. Don't touch the red-zone. Don't touch the stones. Just survive!

Configuration:

Step 1: Put all images into the same folder as your webpage.

Step 2: Open your webpage and paste the following code just above the </body>tag:

// average speed of the flying deathstones. Higher means faster
var floatingspeed=1

// width of gamezone (pixels)
var bgpicturewidth=300

// height of gamezone (pixels)
var bgpictureheight=246

// leftposition of sttusmessages in relation to gamezone
var statustextdistanceleft=20

// topposition of statusmessages in relation to gamezone
var statustextdistancetop=215

// leftposition of timesign in relation to backgroundpicture
var timesigndistanceleft=220

// topposition of timesign in relation to backgroundpicture
var timesigndistancetop=215

// leftposition of levelmarker in relation to backgroundpicture
var markerdistanceleft=0

// topposition of levelmarker in relation to backgroundpicture
var markerdistancetop=183

var x,y

var youlostgame=false
var gamehasstarted=false
var alreadycrashed=false

// do not edit the variables below
var your_image=new Array()
your_image[0]="dangerpic1.gif"
your_image[1]="dangerpic2.gif"
your_image[2]="dangerpic3.gif"
your_image[3]="dangerpic4.gif"
your_image[4]="dangerpic5.gif"
your_image[5]="dangerpic1.gif"
your_image[6]="dangerpic2.gif"
your_image[7]="dangerpic3.gif"
your_image[8]="dangerpic4.gif"
your_image[9]="dangerpic5.gif"
your_image[10]="dangerpic1.gif"
your_image[11]="dangerpic2.gif"
your_image[12]="dangerpic2.gif"

var statustextcontent=""
var tempo=20
var timer
var timetinmer
var starttime
var nowtime
var check_standtimer
var numberofimages=your_image.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
	stepx[i]=randommaker(floatingspeed)
	stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofimages;i++) {
	imgwidth[i]=10
	imgheight[i]=10
}

var marginleft=bgpictureposleft
var marginright=bgpictureposleft+bgpicturewidth
var margintop=bgpicturepostop+50
var marginbottom=bgpictureheight+bgpicturepostop-50
var timer
var spancontent=new Array()
var imgpreload=new Array()
for (i=0;i<=your_image.length;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=your_image[i]
}

for (i=0;i<=numberofimages;i++) {
	spancontent[i]="<img src='"+your_image[i]+"' border='0'>"
}

function positiongame() {
	if (document.all) {
		document.all.bgpicture.style.posLeft=bgpictureposleft
		document.all.bgpicture.style.posTop=bgpicturepostop
		document.all.bgpicture.style.visibility="visible"
        document.all.statustextsign.style.posLeft=bgpictureposleft+statustextdistanceleft
		document.all.statustextsign.style.posTop=bgpicturepostop+statustextdistancetop
		document.all.rules.style.posLeft=bgpictureposleft
		document.all.rules.style.posTop=bgpicturepostop
        document.all.timesign.style.posLeft=bgpictureposleft+timesigndistanceleft
		document.all.timesign.style.posTop=bgpicturepostop+timesigndistancetop
		document.all.marker.style.posTop=bgpicturepostop+markerdistancetop
		document.all.marker.style.visibility="visible"
		statustext("Choose any level!")
		changelevel(1)
		
	}
	if (document.layers) {
		document.bgpicture.left=bgpictureposleft
		document.bgpicture.top=bgpicturepostop
		document.bgpicture.visibility="visible"
        document.statustextsign.left=bgpictureposleft+statustextdistanceleft
		document.statustextsign.top=bgpicturepostop+statustextdistancetop
		document.rules.left=bgpictureposleft
		document.rules.top=bgpicturepostop
		document.timesign.left=bgpictureposleft+timesigndistanceleft
		document.timesign.top=bgpicturepostop+timesigndistancetop
		statustext("Choose any level")
	}
}

function startgame() {
	resetvalues()
    startnewtime()
	statustext("Move on!")
	setValues()
}

function startnewtime() {
	starttime= new Date()
	starttime=starttime.getTime()
    checktime()
}

function resetvalues() {
	youlostgame=false
	gamehasstarted=true
	alreadycrashed=false
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function randomstartposition(range) {		
	var randomposition=Math.floor(range*Math.random())
    return randomposition
}

function checkmovement() {
	if (document.all && youlostgame==false) {
		checkposition()
		movepictures()
    	timer=setTimeout("checkmovement()",tempo)
	}
	if (document.layers && youlostgame==false) {
		checkposition()
   		movepictures()
    	timer=setTimeout("checkmovement()",tempo)
	}
	else if (youlostgame) {
		lostgame()
	}
}

function checkposition() {
	if (document.all) {
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=eval("document.all.span"+i+".style")
			
			if (x>=thisspan.posLeft&&x<thisspan.posLeft+imgwidth[i]&&y>=thisspan.posTop&&y<thisspan.posTop+imgheight[i]) {
				youlostgame=true
			}
			if (thisspan.posLeft>marginright-imgwidth[i]) {
				thisspan.posLeft-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.posLeft<marginleft) {
				thisspan.posLeft+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.posTop>marginbottom-imgheight[i]) {
				thisspan.posTop-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.posTop<margintop) {
				thisspan.posTop+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	if (document.layers) {
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=eval("document.span"+i)
			if (x>=thisspan.left&&x<thisspan.left+imgwidth[i]&&y>=thisspan.top&&y<thisspan.top+imgheight[i]) {
				youlostgame=true
			}
			if (thisspan.left>marginright-imgwidth[i]) {
				thisspan.left-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.left<marginleft) {
				thisspan.left+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.top>marginbottom-imgheight[i]) {
				thisspan.top-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.top<margintop) {
				thisspan.top+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}

function showrules() {
	if (document.all) {
		document.all.rules.style.visibility="visible"
		document.all.bgpicture.style.visibility="hidden"
	}
	if (document.layers) {
		document.rules.visibility="visible"
	}
}

function hiderules() {
	if (document.all) {
		document.all.rules.style.visibility="hidden"
		document.all.bgpicture.style.visibility="visible"
	}
	if (document.layers) {
		document.rules.visibility="hidden"
	}
}

function wongame() {
	if (gamehasstarted && !youlostgame) {
		clearTimeout(timer)
        clearTimeout(timetimer)
		if (document.all) {
            statustext("You won! Click start again!")
		}
		if (document.layers) {
            statustext("You won! Click start again!")
		}
	}
	
	else if (gamehasstarted && youlostgame) {
		clearTimeout(timer)
        clearTimeout(timetimer)
		if (document.all) {
            statustext("Do not cheat")
		}
		if (document.layers) {
            statustext("Do not cheat")
		}
	}
}

function lostgame() {
	if (gamehasstarted) {
		youlostgame=true
		clearTimeout(timer)
        clearTimeout(timetimer)
		if (document.all) {
            statustext("Crash! Start again!")
			showcrashsign()
		}
		if (document.layers) {
            statustext("Crash! Start again!")
			showcrashsign()
		}
	}
}

function showcrashsign() {
	if (document.all && !alreadycrashed) {
		alreadycrashed=true
		crashsign.innerHTML="<img src='crash.gif'>"
		document.all.crashsign.style.visibility="visible"
		document.all.crashsign.style.posLeft=x-20
		document.all.crashsign.style.posTop=y-20
	}
	if (document.layers && !alreadycrashed) {
		alreadycrashed=true
		document.crashsign.document.write("<img src='crash.gif'>")
		document.crashsign.document.clear()
		document.crashsign.visibility="visible"
		document.crashsign.left=x-10
		document.crashsign.top=y
	}
	var crashtimer=setTimeout("hidecrashsign()",800)
}

function hidecrashsign() {
	if (document.all) {
		document.all.crashsign.style.visibility="hidden"
		hidestones()
	}
	if (document.layers) {
		document.crashsign.visibility="hidden"
		hidestones()
	}
}

function checktime() {
    if (gamehasstarted && !youlostgame) {
	    nowtime= new Date()
	    nowtime=nowtime.getTime()
        nowtime=(nowtime-starttime)/1000
        if (document.all) {
            timesign.innerHTML="<font size=1 face=Verdana color=yellow>"+nowtime+"</font>"
        }
        if (document.layers) {
            document.timesign.document.write("<font size=1 face=Verdana color=yellow>"+nowtime+"</font>")
            document.timesign.document.close()
        }
        timetimer=setTimeout("checktime()",200)
    }
    else {
        clearTimeout(timetimer)
    } 
}

function statustext(text) {
	statustextcontent="<font size=1 face=Verdana color=yellow>"+text+"</font>"
	if (document.all) {
		statustextsign.innerHTML=statustextcontent
	}
	if (document.layers) {
		document.statustextsign.document.write(statustextcontent)
		document.statustextsign.document.close()
	}
}

function handlerMM(e){
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}

document.onmousemove = handlerMM;

document.write("<div id='bgpicture' style='position:absolute;visibility:hidden;left:0px;top:0px'>")
document.write("<IMG SRC='bgpicture.gif' USEMAP='#bgpicturemap' BORDER=0>")
document.write("<MAP NAME='bgpicturemap'>")
document.write("<AREA SHAPE=RECT COORDS='129,164,172,174' HREF='#' onClick='showrules()'>")
document.write("<AREA SHAPE=RECT COORDS='144,185,152,196' HREF='#' onClick='changelevel(1)'>")
document.write("<AREA SHAPE=RECT COORDS='153,185,162,195' HREF='#' onClick='changelevel(2)'>")
document.write("<AREA SHAPE=RECT COORDS='164,184,172,195' HREF='#' onClick='changelevel(3)'>")
document.write("<AREA SHAPE=RECT COORDS='175,185,182,196' HREF='#' onClick='changelevel(4)'>")
document.write("<AREA SHAPE=RECT COORDS='185,184,192,196' HREF='#' onClick='changelevel(5)'>")
document.write("<AREA SHAPE=RECT COORDS='233,11,292,37' HREF='http://www.24fun.com' target='_blank'>")
document.write("<AREA SHAPE=POLY COORDS='1,1,0,198,299,198,298,1,280,63,285,71,283,80,279,91,271,102,276,134,273,160,265,176,252,187,231,188,209,174,203,157,215,132,227,118,228,111,209,110,188,91,171,78,152,80,146,85,146,93,158,97,179,100,191,107,198,122,191,142,172,152,154,151,135,137,128,131,105,130,101,135,100,156,88,173,67,183,41,183,24,172,16,146,21,125,36,111,46,108,64,105,70,99,66,84,50,77,33,82,30,85,21,87,15,77,19,67,41,60,60,60,78,67,89,89,87,107,80,116,65,124,48,126,34,137,34,153,44,165,70,164,83,151,85,129,94,116,114,111,134,113,149,124,160,133,170,133,178,126,168,115,143,113,127,97,131,71,154,61,179,60,195,70,210,88,214,90,234,92,245,99,246,120,233,142,222,155,222,159,239,169,248,166,256,152,256,124,251,96,254,92,264,80,264,69,270,62,278,60' HREF='#' onMouseOver='lostgame()'>")
document.write("<AREA SHAPE=POLY COORDS='20,69,27,69,32,73,33,78,26,84,22,85,17,81,18,73,22,69' HREF='#' OnClick='startgame()'>")
document.write("<AREA SHAPE=POLY COORDS='272,65,279,66,282,71,282,76,278,80,271,79,267,75,267,69,272,65,272,65' HREF='#'  onMouseOver='wongame()'>")
document.write("</MAP>")
document.write("</div>")
 
document.write("<div id='timesign' style='position:absolute;visibility:visible;left:0px;top:0px'> </div>")

document.write("<div id='statustextsign' style='position:absolute;left:0px;top:0px'> </div>")

for (i=0;i<=numberofimages;i++) {
    document.write("<div id='span"+i+"' style='position:absolute;left:0px;top:0px'> </div>")
}

document.write("<div id='crashsign' style='position:absolute;visibility:hidden;left:0px;top:0px'><img src='crash.gif'></div>")

document.write("<div id='marker' style='position:absolute;visibility:hidden;left:0px;top:0px'><img src='marker.gif'></div>")

document.write("<div id='rules' style='position:absolute;visibility:hidden;left:0px;top:0px;z-index:100'>") 
document.write("<table cellpadding=3 border=1><tr><td bgcolor=red>")
document.write("<font size=1 face=Verdana color=yellow>")
document.write("<b>RULES</b><br>")
document.write("- Choose any level<br>")
document.write("- Click start (yellow circle left)<br>")
document.write("- Try to reach Goal (yellow circle right)<br>")
document.write("- Don't touch the red-zone<br>")
document.write("- Don't touch the stones<br>")
document.write("- Just survive<br><br>")
document.write("<A HREF='javascript:hiderules()'><font size=1 face=Verdana color=yellow><b>CLOSE</b></font></A>")
document.write("</font>")
document.write("</td></tr></table>")
document.write("</div>")

document.close()

onload=positiongame
}
</script>

IMPORTANT: Do not paste this code into tables or <DIV> and </DIV> or between any other container!

Step 3: Configure the position of the gamezone (red code). All values can be found on top of the script:
// horizontal position of the game, distance to the left margin of browser window (pixels)
var bgpictureposleft=10
// vertical position of the game, distance to the top margin of browser window (pixels)
var bgpicturepostop=10

Click here to download files
Step 4: Have fun!