Core JavaScript

Speed Jet

Instructions: Avoid other cars. Use the right and left arrow keys to move. Press "Enter' to begin. The code files for the game above are shown below. The first one, "SpeedJet.html" is a short html file that calls the longer "SpeedJet.js" file that contains the game code. The additional image files, "Bush. png", EnemyCar.png", and "RaceCar.png" must be located in the same directory.

 

Output

 

SpeedJet.html

<!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>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>XoaX.net</title>
</head>
<body id="speedjet">

<script type="text/javascript" src="SpeedJet.js"></script>

</body>
</html>

SpeedJet.js

// variables
var qrBody;
var qrGrass;
var qrRoad;
var qrCar;
var bGameOver;
var qrGameOver;
var qrBush;
var qrBushes;
var iBushSpacing;
var iLastBush;
var iCarSpeed;
var iScore;
var qrScoreBox;
var qrEnemyCar;
var qrEnemyCars;
var iEnemyCarSpeed;
var iEnemyFrequency;
var iEnemySpacing;
var iLastEnemy;
function Initialization() {
	qrBody = document.getElementById("speedjet");

	// Draw the grass.
	qrGrass = document.createElement("div");
	qrGrass.style.backgroundColor = "#00aa00";
	qrGrass.style.width = "800px";
	qrGrass.style.height = "600px";
	qrGrass.style.position = "absolute";
	qrGrass.style.overflow = "hidden";
	qrBody.appendChild(qrGrass);

	// draw the road
	qrRoad = document.createElement("div");
	qrRoad.style.backgroundColor = "#aaaaaa";
	qrRoad.style.width = "150px";
	qrRoad.style.height = "600px";
	qrRoad.style.position = "absolute";
	qrRoad.style.left = "325px";
	qrGrass.appendChild(qrRoad);

	// draw the car
	qrCar = document.createElement("img");
	qrCar.src = "RaceCar.png";
	qrCar.style.position = "absolute";
	qrCar.style.left = "50px";
	qrCar.style.top = "450px";
	qrRoad.appendChild(qrCar);

	qrScoreBox = document.createElement("div");
	qrScoreBox.style.position = "absolute";
	qrScoreBox.style.color = "#ffffff";
	qrScoreBox.style.padding = "5px";
	qrScoreBox.innerHTML = "Score = " + 0;
	qrGrass.appendChild(qrScoreBox);

	qrGameOver = document.createElement("div");
	qrGameOver.style.backgroundColor = "#000000";
	qrGameOver.style.width = "800px";
	qrGameOver.style.height = "600px";
	qrGameOver.style.position = "absolute";
	qrGameOver.style.opacity = "0.5";
	qrGameOver.style.zIndex = "10";
	qrGameOver.style.color = "#ffffff";
	qrGameOver.style.padding = "335px";
	qrGameOver.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Game Over<br />Press Enter to Begin";
	qrGrass.appendChild(qrGameOver);

	document.onkeydown = KeyHandler;

	qrEnemyCars = new Array();
	qrBushes = new Array();
	InitializeVariables();
	bGameOver = true;
	GameLoop();
}

function InitializeVariables() {
	iScore = 0;
	qrScoreBox.innerHTML = "Score = " + iScore;
	iCarSpeed = 10;
	iEnemyCarSpeed = 5;
	iEnemyFrequency = 500;
	iBushSpacing = 500;
	iLastBush = 600 - iCarSpeed;
	iEnemySpacing = 600;
	iLastEnemy = -900;
	bGameOver = false;
	qrGrass.removeChild(qrGameOver);

	for (var iCurrEnemy in qrEnemyCars) {
		qrRoad.removeChild(qrEnemyCars[iCurrEnemy]);
	}
	qrEnemyCars.splice(0, qrEnemyCars.length);
	for (var iCurrBush in qrBushes) {
		qrGrass.removeChild(qrBushes[iCurrBush]);
	}
	qrBushes.splice(0, qrBushes.length);
}

function StartGame() {
	InitializeVariables();
	GameLoop();
}

function GameLoop() {
	UpdateBushes();
	UpdateEnemyCars();
	if (!bGameOver) {
		setTimeout(GameLoop, 20);
	} else {
		qrGrass.appendChild(qrGameOver);
	}
}

function UpdateBushes() {
	iLastBush = iLastBush + iCarSpeed;
	for (iCurrBush in qrBushes) {
		var iCurrY = parseInt(qrBushes[iCurrBush].style.top) + iCarSpeed;
		qrBushes[iCurrBush].style.top = iCurrY + "px";
		if (iCurrY > 600) {
			qrGrass.removeChild(qrBushes[iCurrBush]);
			qrBushes.splice(iCurrBush, 1);
		}
	}
	while (iLastBush > 0) {
		var iX = GetRandomInteger(0, 276);
		var iY = GetRandomInteger(iLastBush - iBushSpacing, iLastBush);
		AddBushAt(iX, iY);
		iX = GetRandomInteger(475, 751);
		iY = GetRandomInteger(iLastBush - iBushSpacing, iLastBush);
		AddBushAt(iX, iY);
		iLastBush = iLastBush - iBushSpacing;
	}
}

function UpdateEnemyCars() {
	var iRelativeSpeed = iCarSpeed - iEnemyCarSpeed;
	iLastEnemy = iLastEnemy + iRelativeSpeed;
	for(iCurrEnemy in qrEnemyCars) {
		var iCurrY = parseInt(qrEnemyCars[iCurrEnemy].style.top) +  iRelativeSpeed;
		qrEnemyCars[iCurrEnemy].style.top = iCurrY + "px";
		if (iCurrY > 600) {
			qrRoad.removeChild(qrEnemyCars[iCurrEnemy]);
			qrEnemyCars.splice(iCurrEnemy, 1);
			iScore = iScore + 1;
			if ((iScore % 5) == 0) {
				iCarSpeed = iCarSpeed + 1;
			}
			qrScoreBox.innerHTML = "Score = " + iScore;
		}
		if (CheckCarCollisions(qrCar, qrEnemyCars[iCurrEnemy])) {
			bGameOver = true;
		}
	}
	while (iLastEnemy > 0) {
		var iX = GetRandomInteger(0, 101);
		var iY = GetRandomInteger(iLastEnemy - iEnemySpacing + 100, iLastEnemy - 100);
		AddEnemyCarAt(iX, iY);
		iLastEnemy = iLastEnemy - iEnemySpacing;
	}
}

function CheckCarCollisions(qrCar1, qrCar2) {
	var iLeft1 = parseInt(qrCar1.style.left) + 2;
	var iTop1 = parseInt(qrCar1.style.top) + 5;
	var iRight1 = iLeft1 + 46;
	var iBottom1 = iTop1 + 90;

	var iLeft2 = parseInt(qrCar2.style.left) + 2;
	var iTop2 = parseInt(qrCar2.style.top) + 5;
	var iRight2 = iLeft2 + 46;
	var iBottom2 = iTop2 + 90;

	if ((iLeft1 > iRight2) || (iRight1 < iLeft2)) {
		return false;
	} else if ((iTop1 > iBottom2) || (iBottom1 < iTop2)) {
		return false;
	}
	return true;
}

function AddBushAt(x, y) {
	qrBush = document.createElement("img");
	qrBush.src = "Bush.png";
	qrBush.style.position = "absolute";
	qrBush.style.left = x + "px";
	qrBush.style.top = y + "px";
	qrGrass.appendChild(qrBush);
	qrBushes.push(qrBush);
}

function AddEnemyCarAt(x, y) {
	qrEnemyCar = document.createElement("img");
	qrEnemyCar.src = "EnemyCar.png";
	qrEnemyCar.style.position = "absolute";
	qrEnemyCar.style.left = x + "px";
	qrEnemyCar.style.top = y + "px";
	qrRoad.appendChild(qrEnemyCar);
	qrEnemyCars.push(qrEnemyCar);
}

function GetRandomInteger(iLow, iHigh) {
	return (Math.floor(Math.random()*(iHigh-iLow))+iLow);
}

function KeyHandler(qrKeyEvent) {
	var iKeyDown = 0;
	var iLeftArrow = 37;
	var iRightArrow = 39;
	var iEnter = 13;

	if (qrKeyEvent) {
		iKeyDown = qrKeyEvent.which;
	} else {
		iKeyDown = window.event.keyCode;
	}

	var iCurrentCarPos = parseInt(qrCar.style.left);

	if (iKeyDown === iLeftArrow) {
		if (iCurrentCarPos > 0 && !bGameOver) {
			iCurrentCarPos = iCurrentCarPos - 50;
			qrCar.style.left = iCurrentCarPos + "px";
		}
	} else if (iKeyDown === iRightArrow) {
		if (iCurrentCarPos < 100 && !bGameOver) {
			iCurrentCarPos = iCurrentCarPos + 50;
			qrCar.style.left = iCurrentCarPos + "px";
		}
	} else if (iKeyDown === iEnter) {
		if (bGameOver) {
			StartGame();
		}
	}
	return false;
}


window.onload = Initialization;
 

© 2007–2024 XoaX.net LLC. All rights reserved.