Hmm.

nets · 11-07-2006, 07:21 PM

I was bored.

HTML Code:

<html>
<head>
<title>Car Game</title>

<script type="text/JavaScript">
<!--

var direction = 'R', start = false;

function preloadImages() {

  var preload1 = new Image(), preload2 = new Image(), preload3 = new Image();

  preload1.src = 'images/carB.PNG';
  preload2.src = 'images/carL.PNG';
  preload3.src = 'images/carT.PNG';

}

function startGame() {

	start = true;
	document.getElementById('petrol').style.display = 'block';
	changePetrolPosition();
	move();
	
}



function changePetrolPosition() {

	document.getElementById('petrol').style.left = (Number(Math.floor(Math.random()*224))+20)+'px';
	document.getElementById('petrol').style.top = (Number(Math.floor(Math.random()*224))+20)+'px';

}


function givePosition() {

	var car = document.getElementById('car').style;
	
	if (direction == 'R' || direction == 'L') {
	
    	var position = car.left.replace('px', '');
		
	} else {
	
		var position = car.top.replace('px', '');
		
	  }
	  
	if (direction == 'B' || direction == 'R') {
	
		position = Number(position)+1;
		
	} else {
	
		position = Number(position)-1;
		
	}
	
	if (21>position||249<position) {
	
		return false;
		
	} else {
	
		return position;
		
	}
	
}

function petrolCheck() {

	var PTCL = document.getElementById('petrol').style.left.replace('px', ''), CTCL = document.getElementById('car').style.left.replace('px', '');
	var PTCT = document.getElementById('petrol').style.top.replace('px', ''), CTCT = document.getElementById('car').style.top.replace('px', '');
	
	var PBCT = Number(PTCT)+10, PBCL = Number(PTCL)+10;
		
	if(direction == 'R' || direction == 'L') {
	
		CBCL = Number(CTCL)+24;
		CBCT = Number(CTCT)+13;
		
	} else {
	
		CBCL = Number(CTCL)+13;
		CBCT = Number(CTCT)+24;
	
	}
	
	if(CBCL > PTCL && CTCL < PBCL) {
	
		if(CBCT > PTCT && CTCT < PBCT) {
		
			document.getElementById('points').innerHTML = Number(document.getElementById('points').innerHTML)+1;
			document.getElementById('petrol_gauge').style.width = '100%';
			
			changePetrolPosition();

			setTimeout('changePetrolPosition()', Number(Math.floor(Math.random()*4998)+1001));

		}
		
	}
	
	
}


function move() {

	var car = document.getElementById('car').style,  position = givePosition();
  
	if(document.getElementById('petrol_gauge').style.width!='0%') {
	
		if(position) {
			if(direction == 'L' || direction == 'R') {
				car.left = position + 'px';
			} else {
				car.top = position + 'px';
			}
			
			document.getElementById('petrol_gauge').style.width = (Number(document.getElementById('petrol_gauge').style.width.replace('%', ''))-0.25)+'%';
			
		}
		
		petrolCheck();
		setTimeout('move()', '15');
		
	} else {
	
	start = false;

	if(!alert('Game Over')) {
	
		if(confirm('Play again?')) {
		
			document.location.href = document.location.href;
			
		}
		
	} 
	
	}
}

function change_direction(event) {

	var uc = event.keyCode;

	if(uc == '40' && start) {
	
		direction = 'B';
		
	} else if(uc == '39' && start) {
	
		direction = 'R';
		
	} else if(uc == '38' && start) {
  
    	direction = 'T';
		
	} else if(uc == '37' && start) {
  
    	direction = 'L';
		
	}
	
	document.getElementById('car').src = 'images/car'+direction+'.PNG';

 }

</script>

</head>
<body onLoad="preloadImages()" onkeydown='change_direction(event);' style="margin: 0; padding: 0; background-color: #444;">
  <div style="z-index: 5; position: absolute; left: 117px; top: 70px; font: 20px verdana;" onClick="startGame(); this.style.display='none';">Start</div>
  <div style="z-index: 4; position: absolute; left: 215px; top: 35px; font: 11px verdana;">Points: <div id="points">0</div></div>
  <img style="z-index: 3; position: absolute; left: 25px; top: 25px;" id="car" src="images/carR.PNG" />
  <img style="z-index: 2; position: absolute; display: none;" id="petrol" src="images/petrol.PNG" />
  <div style="z-index: 1; position: absolute; left: 20px; top: 20px; background-image: url(images/background.gif); width: 254px; height: 254px;"></div>
  <div style="position: absolute; left: 20px; top: 280px; border: 2px solid #333333; width: 100px; height: 20px; background-color: #9CA59C;">
  <div id="petrol_gauge" style="background-color: #394B39; width: 100%; height: 100%"></div>
  </div>

<div style="position: absolute; left: 20px; top: 320px; border: 2px solid #333333; width: 254px; background-color: #9CA59C; font: 12px verdana;"><div style="padding: 3px;">The aim of the game is to direct your car around with your arrow keys, collecting as many green squares as you can. When your petrol gauge elapses to zero it's game over, collecting a green square will restore your petrol gauge to 100%.</div></div>


</body>
</html>