<html>
<head>
<meta name="author" content="Jeff Home, Dan Nye" />
<meta name="description" content="Plunder the Prize - a Javascript game" />
<meta name="copyright" content="Copyright � 2005 - Jeff Home, Dan Nye" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>Plunder the Prize</title>
<link href="css/gamepalette.css" type="text/css" />
<link href="css/gameplay.css" type="text/css" />
<script type="text/javascript">
<!--
// Plunder the Prize - Javascript game engine written by Jeff Home and Dan Nye.
// This code is copyright.
var world = [];
var gamePulseSpeed = 300;
var gamePulseHandle = null;
var pixelSize = 19;
var gameCurrentLevel = 1;
var keyboardState = [];
var enemySpeed = 2;
var enemyCount = 0;
function initCanvas()
{
var htmlValue = '';
enemyCount = 0;
world[gameCurrentLevel].dynamic = [];
var myObj = world[gameCurrentLevel].dynamic;
for (var Y = 0; Y < world[gameCurrentLevel].layout.length; Y++) {
myObj[Y] = [];
for (var X = 0; X < world[gameCurrentLevel].layout[Y].length; X++) {
myObj[Y][X] = 0;
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'X') htmlValue += '<div class="pixel pixelWall" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'T') htmlValue += '<div class="pixel pixelTree" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'w') htmlValue += '<div class="pixel pixelTree1" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'u') htmlValue += '<div class="pixel pixelTree2" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'v') htmlValue += '<div class="pixel pixelTree3" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'x') htmlValue += '<div class="pixel pixelTree4" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'y') htmlValue += '<div class="pixel pixelTree5" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'o') htmlValue += '<div class="pixel pixelWater" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'H') {
htmlValue += '<div id="hero" class="pixel hero" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
world[gameCurrentLevel].hero = {X:X,Y:Y}; }
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'E') {
htmlValue += '<div id="enemy'+(++enemyCount)+'" class="pixel enemy" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
world[gameCurrentLevel]['enemy'+enemyCount] = {X:X,Y:Y};
myObj[Y][X] = 1;
}
if (world[gameCurrentLevel].layout[Y].charAt(X) == 'P') {
htmlValue += '<div id="princess" class="pixel princess" style="left:' + X*pixelSize + 'px;top:' + Y*pixelSize + 'px;width:' + pixelSize + 'px;height:' + pixelSize + 'px;"></div>';
world[gameCurrentLevel].princess = {X:X,Y:Y}; }
}
}
document.getElementById('canvas').innerHTML = htmlValue;
gamePulseHandle = setInterval('pulseGame();', gamePulseSpeed);
}
function pulseGame()
{
handleHero();
if (!--enemySpeed) handleEnemy();
if (world[gameCurrentLevel].layout[world[gameCurrentLevel].hero.Y].charAt(world[gameCurrentLevel].hero.X) == 'P')
{
window.status = 'You win!';
clearTimeout(gamePulseHandle);
if (++gameCurrentLevel > world.length - 1) gameCurrentLevel = 1;
initCanvas();
}
for (var loop=1; loop<=enemyCount; loop++)
{
if ( (world[gameCurrentLevel].hero.Y == world[gameCurrentLevel]['enemy'+loop].Y) && (world[gameCurrentLevel].hero.X == world[gameCurrentLevel]['enemy'+loop].X))
{
window.status = 'You lose!';
clearTimeout(gamePulseHandle);
break;
}
}
}
function handleHero()
{
var heroX = world[gameCurrentLevel].hero.X - keyboardState[37] + keyboardState[39];
var heroY = world[gameCurrentLevel].hero.Y - keyboardState[38] + keyboardState[40];
var terrainType = world[gameCurrentLevel].layout[heroY].charAt(heroX);
if ('XoTuvwxy'.indexOf(terrainType) == -1)
{
document.getElementById('hero').style.left = heroX*pixelSize;
document.getElementById('hero').style.top = heroY*pixelSize;
world[gameCurrentLevel].hero.X = heroX;
world[gameCurrentLevel].hero.Y = heroY;
}
}
function handleEnemy()
{
enemySpeed = 2;
var myEnemyObj = world[gameCurrentLevel].dynamic;
for (var loop=1;loop<=enemyCount; loop++)
{
var myObj = world[gameCurrentLevel]['enemy'+loop];
var enemyX = myObj.X;
var enemyY = myObj.Y;
var heroX = world[gameCurrentLevel].hero.X;
var heroY = world[gameCurrentLevel].hero.Y;
if (enemyX < heroX) enemyX++;
if (enemyX > heroX) enemyX--;
if (enemyY < heroY) enemyY++;
if (enemyY > heroY) enemyY--;
var terrainType = world[gameCurrentLevel].layout[enemyY].charAt(enemyX);
if ('XPoTuvwxy'.indexOf(terrainType) == -1 && myEnemyObj[enemyY][enemyX] == 0)
{
myEnemyObj[myObj.Y][myObj.X] = 0;
myEnemyObj[enemyY][enemyX] = 1;
document.getElementById('enemy'+loop).style.left = enemyX*pixelSize;
myObj.X = enemyX;
document.getElementById('enemy'+loop).style.top = enemyY*pixelSize;
myObj.Y = enemyY;
} else {
terrainType = world[gameCurrentLevel].layout[myObj.Y].charAt(enemyX);
if ('XPoTuvwxy'.indexOf(terrainType) == -1 && myEnemyObj[myObj.Y][enemyX] == 0)
{
myEnemyObj[myObj.Y][myObj.X] = 0;
myEnemyObj[myObj.Y][enemyX] = 1;
document.getElementById('enemy'+loop).style.left = enemyX*pixelSize;
myObj.X = enemyX;
}
terrainType = world[gameCurrentLevel].layout[enemyY].charAt(myObj.X);
if ('XPoTuvwxy'.indexOf(terrainType) == -1 && myEnemyObj[enemyY][myObj.X] == 0)
{
myEnemyObj[myObj.Y][myObj.X] = 0;
myEnemyObj[enemyY][myObj.X] = 1;
document.getElementById('enemy'+loop).style.top = enemyY*pixelSize;
myObj.Y = enemyY;
}
}
}
}
onload = function()
{
initCanvas();
}
// keyboard routines
keyboardState[37] = keyboardState[38] = keyboardState[39] = keyboardState[40] = 0;
document.onkeydown = function(evt)
{
keyboardState[evt?evt.keyCode:event.keyCode] = 1;
}
document.onkeyup = function(evt)
{
keyboardState[evt?evt.keyCode:event.keyCode] = 0;
}
//-->
</script>
<script src="gameworld.js" type="text/javascript" /></script>
</head>
<body>
<div id="canvas"></div>
<div id="instructions">
<h2>Plunder the Prize</h2>
<h3>Key</h3>
<img src="images/hero.gif" width="19" height="19" alt="The Hero" /> You<br />
<img src="images/prize.gif" width="19" height="19" alt="The Princess" /> Prize<br />
<img src="images/enemy.gif" width="19" height="19" alt="The Enemy" /> Enemy<br />
<h3>Aim</h3>
<p>Use the cursor keys to move you ("The Hero") towards the Prize. Try and avoid the enemy.</p>
<p>After you plunder the Prize, you will advance to the next level!</p>
<div><a href="javascript:gameCurrentLevel=1;initCanvas();" class="button">Begin the game</a> | <a href="javascript:initCanvas();" class="button">Restart the level</a></div>
<div style="margin-top:20px;"><a href="editor.php" class="button">Game level creator</a></div>
</div>
</body>
</html>