Use the mouse to steer. Click to begin race, use left mouse button to brake.

Grand Prix v1.0
last revision: 01.12.2004
steve@slayeroffice.com
http://www.slayeroffice.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>slayeroffice | arcade | grand prix</title>
<style type="text/css">
#mContainer {
	position:relative;
	width:320px;
	height:200px;
	border:1px solid #000000;
	background-color:#ABABAB;
	margin:auto;
	overflow:hidden;
}

#topBorder {
	position:absolute;
	top:0px;
	left:0px;
	width:320px;
	height:15px;
	background-color:#FFC51D;
	border-bottom:2px solid #000000;
	background-image:url(bush.gif);
	background-repeat:repeat-x;
}

#bottomBorder {
	position:absolute;
	top:170px;
	left:0px;
	width:320px;
	height:15px;
	background-color:#FFC51D;
	border-top:2px solid #000000;
	border-bottom:2px solid #000000;
	background-image:url(bush.gif);
	background-repeat:repeat-x;
}

#infoStrip {
	position:absolute;
	top:189px;
	background-color:#649228;
	width:320px;
	height:11px;
	font:9px verdana;
	color:#FFFFFF;
}

#playerCar {
	position:absolute;
	top:70px;
	left:10px;
	width:59px;
	height:33px;
	background-image:url(cars.gif);
	background-repeat:no-repeat;
}

.opponentCar {
	position:absolute;
	width:59px;
	height:33px;
	z-index:100;
	font-weight:bold; color: #FFFFFF; font-size:12pt; font-family:verdana;
	background-repeat:no-repeat;
	background-image:url(cars.gif);
	display:none;
}

#controls {
	position:relative;
	width:320px;
	margin:auto;
	font:9px verdana;
}

#finish {
	position:absolute;
	width:5px;
	height:148px;
	top:18px;
	left:320px;
	border:1px solid #000000;
	background-image:url(finishLine.gif);
	background-repeat:repeat-y;
}

#playAgain {
	position:relative;
	width:320px;
	text-align:center;
	margin:auto;
	padding-top:80px;
	font:12pt verdana,arial,helvetica;
	font-weight:bold;
	display:none;
}

#playAgain a {
	text-decoration:none;
	color:#FFFFFF;
}

hr {
	color:#000000;
	background-color:#000000;
	height:1px;
	border-style:none;
	clear:both;
}
</style>
<script language="javascript" type="text/javascript">

/*******************************

Grand Prix v1.0
steve@slayeroffice.com

*******************************/

this.onload = init;
document.onmousemove = captureMouseMove;
document.onmousedown = captureMouseDown;
document.onmouseup = captureMouseUp;

var carSpeed = 1;
var speedIncrement = 1;
var watchGears = 0;
var gearShift = 20;
var topSpeed = 24;
var currentGear = 1;
var isSliding = false, watchSlide = 0, slideDirection;

var crashLoop=0,crashBoolean=0,isCrashing=false;
var gameTime = 0.0,gameMinute=0;
var wTX = 0;
var isBreaking = false;
var mouseY,carY=80;

var oCars = new Array();
// car and oil slick data
// background-position,startingX,startingY,speed,active
oCars[0] = new Array(-236,-200,17,5,0);
oCars[1] = new Array(-118,-700,98,5,0);
oCars[2] = new Array(-177,-2200,137,8,0);
oCars[3] = new Array(-295,-2800,57,8,0);
oCars[4] = new Array(-177,-3600,98,8,0);
oCars[5] = new Array(-59,-4200,17,5,0);
oCars[6] = new Array(-118,-4900,57,8,0);
oCars[7] = new Array(-236,-5700,137,8,0);
oCars[8] = new Array(-295,-5900,98,10,0);
oCars[9] = new Array(-59,-7500,57,8,0);
oCars[10] = new Array(-236,-7800,98,10,0);
oCars[11] = new Array(-177,-8400,17,5,0);
oCars[12] = new Array(-295,-8700,137,5,0);
oCars[13] = new Array(-118,-9700,98,10,0);
oCars[14] = new Array(-295,-10100,137,8,0);
oCars[15] = new Array(-236,-10900,57,8,0);
oCars[16] = new Array(-118,-10900,137,8,0);
oCars[17] = new Array(-177,-11900,17,5,0);
oCars[18] = new Array(-295,-11900,98,10,0);
oCars[19] = new Array(-59,-12900,17,5,0);
oCars[20] = new Array(-236,-12900,57,8,0);
oCars[21] = new Array(-295,-13900,98,10,0);
oCars[22] = new Array(-118,-14000,17,5,0);
oCars[23] = new Array(-177,-14500,57,8,0);
oCars[24] = new Array(-236,-15000,137,8,0);
oCars[25] = new Array(-59,-15700,17,5,0);
oCars[26] = new Array(-295,-15900,57,8,0);
oCars[27] = new Array(-236,-16300,137,8,0);
oCars[28] = new Array(-295,-16600,17,5,0);
oCars[29] = new Array(-177,-17100,98,10,0);
oCars[30] = new Array(-118,-17600,17,5,0);
oCars[31] = new Array(-295,-18000,98,10,0);
oCars[32] = new Array(-236,-18300,137,8,0);

// oil slicks
oCars[33] = new Array("oil_slick.gif",-19000,17,0,0);
oCars[34] = new Array("oil_slick.gif",-19500,98,0,0);
oCars[35] = new Array("oil_slick.gif",-20200,137,0,0);
oCars[36] = new Array("oil_slick.gif",-20900,137,0,0);
oCars[37] = new Array("oil_slick.gif",-21400,57,0,0);
oCars[38] = new Array("oil_slick.gif",-21800,17,0,0);
oCars[39] = new Array("oil_slick.gif",-21800,17,0,0);

var finishLine = -24000;

var isGame = false;

var zInterval;

function init() {
	document.getElementById("mContainer").innerHTML = initBackground();
	document.getElementById("topBorder").style.backgroundPosition = "0px";
	document.getElementById("bottomBorder").style.backgroundPosition = "0px";
	document.getElementById("finish").style.left = "320px";
	document.getElementById("playerCar").style.top = "80px";
}

function initBackground() {
	mHTML="<div id=\"topBorder\"></div>";
	mHTML+="<div id=\"bottomBorder\"></div>";
	mHTML+="<div id=\"finish\"></div>";
	mHTML+="<div id=\"infoStrip\">00:00.0</div>";
	mHTML+="<div id=\"playerCar\"></div>";
	mHTML+="<div id=\"playAgain\"><a href=\"javascript:location.reload();\">Play Again?</a></div>";
	return mHTML;
}

function captureMouseDown() {
	if(!isGame) {
		isGame = true;
		zInterval = setInterval("animate()",10);
	} else {
		isBreaking = true;
		//if(carSpeed>1)carSpeed-=speedIncrement;
	}
}

function captureMouseUp() {
	isBreaking = false;
}

function captureMouseMove(e) {
	if(!isGame || isSliding)return;
	mouseY = document.all?event.clientY:e.pageY;
	carY = parseInt(document.getElementById("playerCar").style.top);

	if(mouseY<17)mouseY = 17;
	if(mouseY>137)mouseY = 137;
	document.getElementById("playerCar").style.top = mouseY + "px";

}

function doSteering() {
	newY = Math.floor(carSpeed/3);
	document.getElementById("debug").innerHTML = carY + "," + mouseY;
	if(mouseY>carY) {
		nY= carY+newY;
	} else {
		nY= carY-newY;
	}
	document.getElementById("playerCar").style.top = nY + "px";
}

function checkCollision(collisionType,coord) {
	switch(collisionType) {
		case 1:
			// top border
			if(coord<=15)return true;
			break;
		case 2:
			// bottom border
			if(coord>=140)return true;
			break;
		case 3:
			// other cars and oil slicks
			x=10;
			y = parseInt(document.getElementById("playerCar").style.top);
			for(i=0;i<oCars.length;i++) {
				if(oCars[i][4] == 1) {
					x2 = parseInt(document.getElementById("oCar" + i).style.left);
					y2 = parseInt(document.getElementById("oCar" + i).style.top);
				}
				if(i<=32) { // other cars
					if(oCars[i][4]==1) {
						conditionY = y2<=y?y2<=y && y2+33>=y:conditionY = y2>=y && y2-33<=y;
						conditionX = x<=x2?x2>=x && x2<=x+53:x2<=x && x2+53>=x;
						if(conditionX && conditionY){
							crash(i);
							break;
						}
					}
				} else {
					// oil slicks
					if(oCars[i][4]==1) {
						y2+=15;
						conditionY = y2<=y?y2<=y && y2+15>=y:conditionY = y2>=y && y2-15<=y;
						conditionX = x<=x2?x2>=x && x2<=x+53:x2<=x && x2+53>=x;
						if(conditionX && conditionY && !isSliding){
							if(carSpeed<=5) return;
							carSpeed -= 5;
							isSliding = true;
							if(y>=57 && y<=98) {
								slideDirection = Math.floor(Math.random() * 2);
							} else if (y<=57) {
								slideDirection = 1;
							} else {
								slideDirection = 0;
							}
							break;
						}
					}
				}
			}
			break;
	}
	return false;
}

function crash(type) {
	if(type==-1) {
		carSpeed = 1;
	} else {
		carSpeed = oCars[type][3]-2;
	}
	crashLoop=0;
	if(!isCrashing) {
		cInterval = setInterval("flashBackground()",50);
		isCrashing=true;
	}
}

function addOpponent(index) {
	zCar = document.getElementById("mContainer").appendChild(document.createElement("div"));
	zCar.className = "opponentCar";
	zCar.id="oCar" + i;
	zCar.style.top = oCars[index][2] + "px";
	if(!parseInt(oCars[index][0])) {
		zCar.style.backgroundImage = "url(" + oCars[index][0] + ")";
	} else {
		zCar.style.backgroundPosition = oCars[index][0] + "px";
	}
	zCar.style.left = "320px";
	zCar.style.display = "block";
}

function doAddOpponent(curX) {
	for(i=0;i<oCars.length;i++) {
		if(curX<=oCars[i][1] && !oCars[i][4]) {
			oCars[i][4]=1;
			addOpponent(i);
		}
	}
}

function incrementTimer() {
	gameTime+=.02;
	if(gameTime>=60) {
		gameTime = 0.0;
		gameMinute++;
	}
	zGameTime = gameTime.toFixed(2);
	if(zGameTime<10)	zGameTime = "0" + zGameTime;
	if(gameMinute<10)  {
		zGameTime ="0" + gameMinute + ":" + zGameTime;
	} else {
		zGameTime = gameMinute + ":" + zGameTime;
	}

	document.getElementById("infoStrip").innerHTML = zGameTime;	
}

function moveActiveOpponentCars() {
	for(i=0;i<oCars.length;i++) {
		if(oCars[i][4]==1) {
			x = parseInt(document.getElementById("oCar" + i).style.left);
			x+= oCars[i][3] - carSpeed;
			if(x>-75 && oCars[i][4]==1) {
				document.getElementById("oCar" + i).style.left = x + "px";
				if(x>=320) {
					document.getElementById("oCar" + i).style.display = "none";
				} else {
					document.getElementById("oCar" + i).style.display = "block";
				}
			} else {
				oCars[i][4]=-1;
				document.getElementById("mContainer").removeChild(document.getElementById("oCar" + i));
			}
		}
	}
	checkCollision(3,-1);
}

function flashBackground() {
	if(crashLoop>=10) {
		clearInterval(cInterval);
		document.getElementById("mContainer").style.backgroundColor = "#ABABAB";
		crashBoolean=0;
		crashLoop=0;
		isCrashing=false;
		return;
	}
	if(crashBoolean) {
		bg="#ABABAB";
		y = parseInt(document.getElementById("playerCar").style.top);
		y+=4;
		crashBoolean=0;
	} else {
		bg="#FAC3B9";
		y = parseInt(document.getElementById("playerCar").style.top);
		y-=4;
		crashBoolean=1;
	}
	document.getElementById("mContainer").style.backgroundColor = bg;
	document.getElementById("playerCar").style.top = y + "px";
	crashLoop++;
}

function animate() {
	incrementTimer();
	if(isBreaking)if(carSpeed>1)carSpeed-=speedIncrement;
	tX = parseInt(document.getElementById("topBorder").style.backgroundPosition);
	tX-=carSpeed;
	watchGears++;
	if(watchGears>=gearShift && !isSliding) {
		watchGears = 0;
		if(carSpeed<topSpeed)carSpeed+=speedIncrement;
	}
	document.getElementById("topBorder").style.backgroundPosition = tX + "px";
	document.getElementById("bottomBorder").style.backgroundPosition = tX + "px";
	if(isSliding) {
		carY = parseInt(document.getElementById("playerCar").style.top);
		if(slideDirection) {
			carY+=5;
		} else {
			carY-=5;
		}
		document.getElementById("playerCar").style.top = carY + "px";
		watchSlide++;
		if(watchSlide>=6) {
			isSliding = false;
			watchSlide = 0;
		}
	}
	doAddOpponent(tX);
	moveActiveOpponentCars();
	if(tX<=finishLine)doFinishLine();
}

function doFinishLine() {
	x = parseInt(document.getElementById("finish").style.left);
	if(x>73) {
		x-=carSpeed;
		document.getElementById("finish").style.left = x + "px";
	} else {
		clearInterval(zInterval);
		isGame = false;
		document.getElementById("playAgain").style.display = "block";
	}
}
</script>
</head>
<body>
<div id="mContainer"></div>
<div id="controls">Use the mouse to steer. Click to begin race, use left mouse button to brake.</div>
<div id="debug"></div>
</body>
</html>