Game

nets · 15-06-2006, 02:31 PM

I was bored, so I made this game which doesn't really serve any purpose.

http://joshjh.pwp.blueyonder.co.uk/falling_bricks.htm

HTML Code:

<html>
<head>
<title>Grid Game</title>
<script type="text/javascript">
<!--Begin

var user_square = '3';
var points = '0';
var comp_square_v = '0';
var comp_square_w = '0';
var speed = '125';
var maxspeed = '35';

function move(event) {

  var uc = event.keyCode;
  if(uc==32) {
  //Start
  compProcess();
  }
  if(uc==37&&user_square>1) {
    // Move left
    user_square--;
    if(user_square==comp_square_w&&comp_square_v==10) {
      gameOver('Opps! You went into the opposing square!');
    }
    else {
	  document.getElementById('square'+Number(user_square+1)).bgColor = 'white';
      document.getElementById('square'+user_square).bgColor = 'green';
    }
  }

  else if(uc==39&&user_square<5) {
    // Move right
    user_square++;
    if(user_square==comp_square_w&&comp_square_v==10) {
      gameOver('Opps! You went into the opposing square!');
    }
    else {
	  document.getElementById('square'+Number(user_square-1)).bgColor = 'white';
      document.getElementById('square'+user_square).bgColor = 'green';
    }
  }
}

function compProcess() {
  if(comp_square_v=='0'||comp_square_v=='10') {
    if(comp_square_v=='10') {
	document.getElementById('square'+comp_square_w).bgColor = 'white';
	}
    comp_square_v='1';
	if(Math.round(Math.random())==1) {
	comp_square_w=Number(Math.round(Math.random()*4)+1);
	} else {
	comp_square_w=user_square;
	}
    document.getElementById('square'+comp_square_v+comp_square_w).bgColor = 'red';
	setTimeout('compProcess()', speed);
  }
  else if(comp_square_v>0&&comp_square_v<9) {
    document.getElementById('square'+comp_square_v+comp_square_w).bgColor = 'white';
    comp_square_v++;
    document.getElementById('square'+comp_square_v+comp_square_w).bgColor = 'red';
    setTimeout('compProcess()', speed);
  }
  else if(comp_square_v==9) {
    document.getElementById('square'+comp_square_v+comp_square_w).bgColor = 'white';
    comp_square_v++;
    document.getElementById('square'+comp_square_w).bgColor = 'red';
    if(user_square==comp_square_w) {
	  gameOver('Oh noes! You\'ve been hit!');
	}
	else {
	  if(speed!=maxspeed) {
	  speed = Number(speed-5);
	  }
	  points++;
	  document.getElementById('points').innerHTML = 'Points: '+points;
	  setTimeout('compProcess()', speed);
	}
  }
}

function gameOver(msg) {
  alert(msg+' You had '+points+' points.');
  document.location.href = document.location.href;
}
//-->
</script>
</head>
<body style='text-align: center; font: 16px arial; font-weight: bold;' onkeydown ='move(event);'>
<div style="font-size: 32px">Grid game!</div> <br />
Hit the space bar to start. <br />
<table align='center' cellspacing='0' cellpadding='0' width='300' border='2'>

<tr> <td id='square11'>&nbsp;</td> <td id='square12'>&nbsp;</td> <td id='square13'>&nbsp;</td> <td id='square14'>&nbsp;</td> <td id='square15'>&nbsp;</td> </tr>

<tr> <td id='square21'>&nbsp;</td> <td id='square22'>&nbsp;</td> <td id='square23'>&nbsp;</td> <td id='square24'>&nbsp;</td> <td id='square25'>&nbsp;</td> </tr>

<tr> <td id='square31'>&nbsp;</td> <td id='square32'>&nbsp;</td> <td id='square33'>&nbsp;</td> <td id='square34'>&nbsp;</td> <td id='square35'>&nbsp;</td> </tr>

<tr> <td id='square41'>&nbsp;</td> <td id='square42'>&nbsp;</td> <td id='square43'>&nbsp;</td> <td id='square44'>&nbsp;</td> <td id='square45'>&nbsp;</td> </tr>

<tr> <td id='square51'>&nbsp;</td> <td id='square52'>&nbsp;</td> <td id='square53'>&nbsp;</td> <td id='square54'>&nbsp;</td> <td id='square55'>&nbsp;</td> </tr>

<tr> <td id='square61'>&nbsp;</td> <td id='square62'>&nbsp;</td> <td id='square63'>&nbsp;</td> <td id='square64'>&nbsp;</td> <td id='square65'>&nbsp;</td> </tr>

<tr> <td id='square71'>&nbsp;</td> <td id='square72'>&nbsp;</td> <td id='square73'>&nbsp;</td> <td id='square74'>&nbsp;</td> <td id='square75'>&nbsp;</td> </tr>

<tr> <td id='square81'>&nbsp;</td> <td id='square82'>&nbsp;</td> <td id='square83'>&nbsp;</td> <td id='square84'>&nbsp;</td> <td id='square85'>&nbsp;</td> </tr>

<tr> <td id='square91'>&nbsp;</td> <td id='square92'>&nbsp;</td> <td id='square93'>&nbsp;</td> <td id='square94'>&nbsp;</td> <td id='square95'>&nbsp;</td> </tr>

<tr> <td id='square1'>&nbsp;</td> <td id='square2'>&nbsp;</td> <td id='square3' bgcolor='green'>&nbsp;</td> <td id='square4'>&nbsp;</td> <td id='square5'>&nbsp;</td> </tr>

</table>
<div id='points' style="margin: 15px auto 0 auto; padding: 5px; border: 2px inset #000; width: 100px; height: 25px;" align="center">Points: 0</div> <br/><br/>
Use your arrow keys to dodge the falling bricks, by Josh. Kthxbi.
</body>
</html>