Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>square SNAKE</title>
		<style>
			button{
				border: 1px solid #d7d7d7;
				padding: 5px;
				background-color: #f3f3f3;
				font-size: 2em;
				width: 120px;
				margin-left: 3px;
			}
		</style>
	</head>
	<body style="background: url('desk.png') no-repeat;">
	<div id="position" style="margin: 0px auto 0 auto; width: 708px;">
	<div id="title" style="background: url('name.png') no-repeat;height: 92px;"></div>
	<div id="display" style="background: url('display.png') no-repeat; height: 561px; z-index: -10; width: 708px; position: absolute;"></div>
	<canvas id="c" height="360" width="500" style="float: left; border: none; z-index: 10; margin: 34px 0px 0px 34px;"></canvas>
	 <div id="debugTools" style="float: left; margin: 34px 0px 0px 0px; border-left: 1px solid #d7d7d7;width: 127px; height: 350px; background: url('back_side.png') repeat-x; padding: 5px;">

		Score: <span id="score"></span><br />
		Lives: <span id="lives"></span><br />
		<!--Walls: <span id="walls"></span><br />
		X: <span id="x"></span><br />

		Y: <span id="y"></span><br />
   Debug: <span id="debug"></span><br />-->
   <button onclick="start()">Start</button><br />
   <button onclick="stop()">Pause</button>
	<p>Snake is controlled with arrow keys. Goal of game is to eat the red food. Simple :)</p>
	<p><small>&copy; 2011 Milan Darjanin</small></p>
  </div>
	</div>

	<script type="text/javascript">
		var canvas = document.getElementById("c"),
    context = canvas.getContext("2d");

context.fillStyle = 'white';


context.strokeStyle = '#fa00ff';
context.lineCap = 'round';

context.fillStyle = 'red';
//context.fillRect(10,15,15,15);
//context.fillRect(0,15,0,15);
var i = 0;
var x=0;
var y=0;
var food = [0,0];
var intervalId = 0;
var dir = [1,0];
var map = new Array();
var walls = [0,0,0,0];
var outX = document.getElementById('x');
var outY = document.getElementById('y');
var outWalls = document.getElementById('walls');
var outDebug = document.getElementById('debug');
var outScore = document.getElementById('score');
var outLives = document.getElementById('lives');
var canvasSize = [500,360];
var snakeSize = 10;
var snakeColor = 'green';
var backColor = 'white';
var score = 0;
var lives = 3;
var interval = 200;
var countFood = 0;
var snake = new Array();

function render(){
//i++;
	document.onkeyup = handleArrowKeys;
	move();
	context.fillStyle = backColor;
	context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
	context.fillStyle = snakeColor;
	for (j = 0; j < snake.length; j++){
		context.fillRect(snake[j][0]*snakeSize,snake[j][1]*snakeSize,snakeSize,snakeSize);
		//document.write(j+': '+snake[j][0]+', '+snake[j][1]+'<br />');
	}
	if (countFood == 0) {placeFood();}
	context.fillStyle = 'red';
	context.fillRect(food[0]*snakeSize,food[1]*snakeSize,snakeSize,snakeSize);
	//outDebug.innerHTML =outDebug.innerHTML + '<br/>' + snake[0]+' <> '+food;
	if (snake[0][0]==food[0] && snake[0][1]==food[1]){
		snake.push([0,0]);
		score++;
		countFood = 0;
		if (score % 10 == 0 && score > 0) {changeSpeed();}
		//alert('food');
	}


	if (lives == 0) {
		endGame();
	}
	outScore.innerHTML = score;
	outLives.innerHTML = lives;
	//outWalls.innerHTML = wallsHits();
	//if (i == 10) {stop();}

}
function changeSpeed(){
	if (interval > 10){
		interval = interval - 20;
		stop();
		start();
	}
}

function move(){
	x += dir[0];
	y += dir[1];

	old = snake;
	for (j = snake.length-1; j > 0; j--){
		snake[j] = old[j-1];
	}
	snake[0] = [x,y];
	handleCrashes();
	//document.write(snake[0] + ':' + snake[1] + ':' +  snake[2] +'||' + old[0] + ':' + old[1] + ':' +  old[2] + '<br />');
	//outX.innerHTML = x;
	//outY.innerHTML = y;
	//if (x >= 64) {dir[0] = -1;walls[1]++;}
	//if (x <= 0) {dir[0] = 1;walls[3]++;}
	//if (y >= 48) {dir[1] = -1;walls[2]++;}
	//if (y <= 0) {dir[1] = 1;walls[0]++;}
}
function endGame(){
	stop();
	alert('Game over. '+ '\n' +' Your score is '+score);
	resetSnake();
	score=0;
	lives=3;
}
function resetSnake(){
	x=0;
	y=0;
	dir =[1,0];
	snake = [];
	createSnake();
}
function handleCrashes(){
	if (snake[0][0] < 0 || snake[0][0]>49){
		lives--;
		resetSnake();
	}
	if (snake[0][1] < 0 || snake[0][1]>35){
		lives--;
		resetSnake();
	}
	for (i=1; i<snake.length;i++){
		if (snake[0] == snake[i]) {
			lives--;
			resetSnake();
		}
		// return;
		// return contains(snake,snake[0]);
	}

}
function createSnake(){
	snake[0] = [x,y];
	snake[1] = [x-dir[0],y-dir[1]];
	snake[2] = [x-2*dir[0],y-2*dir[1]];
	//document.write('Snake: ' + snake[0] + ':' + snake[1] + ':' +  snake[2] + '<br />');
}
function createMap(){
	for (i = 0; i<(canvasSize[0]/snakeSize);i++){
		for (j = 0; j<(canvasSize[1]/snakeSize);j++){
			map[i][j] = '#';
	}

}
}
function placeFood(){
	posX = Math.round(Math.random()*100);
	if (posX > 49) {
		posX = posX / 5;
	}
	posY = Math.round(Math.random()*100);
	if (posY > 34) {
		posY = posY / 5;
	}
	food = [Math.round(posX),Math.round(posY)];
	//outDebug.innerHTML = food + '<br />';
	countFood = 1;
}
function handleArrowKeys(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
        switch (evt.keyCode) {
            case 37:
                dir[0] = -1;
				dir[1] = 0;
                break;
            case 38:
                dir[0] = 0;
				dir[1] = -1;
                break;
            case 39:
                dir[0] = 1;
				dir[1] = 0;
                break;
            case 40:
                dir[0] = 0;
				dir[1] = 1;
                break;
         }
    }
}

document.onkeyup = handleArrowKeys;

function stop(){
	clearInterval(intervalId);
	intervalId=0;
}
function wallsHits(){
	return walls[0] + ',' + walls[1] + ',' + walls[2] + ',' + walls[3];
}
function start(){
	if (intervalId == 0){
		createSnake();
		intervalId = setInterval('render()',interval);
	}
}
	//alert(i);


//context.fillRect(10,15,15,15);
context.stroke();
	</script>
	</body>
</html>