Grand Prix v1.0last 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>