Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
323 lines (228 sloc) 8.67 KB
<!--Michael L. Kelley Jr. -->
<!--Branchy the Boa -->
<!--GitHub Game Challenge 2012 -->
<!--A snake clone written in HTML5 -->
<!DOCTYPE HTML>
<html>
<head>
<title>SNAKE: HTML5</title>
<script>
//Define some variables used in program
var context;
//Defines size of board
var width = 300;
var height = 400;
var snakeLength = 3; //Initial length
var level = 1; //Start at level 1
var sqSize = 10;
var bodyX = new Array(150, 150 - sqSize, 150 - 2 * sqSize);
var bodyY = new Array(200, 200, 200);
var vX = new Array(1, 1, 1);
var vY = new Array(0, 0, 0);
var rX;
var rY;
var score = 0;
var scoreDiv;
var eaten = true;
var gameOver = false;
var controlsDiv;
//Next place the functions in.
function init()
{
context = document.getElementById("canvas").getContext("2d");
drawCanvasBoundary();
drawSnake();
intervalId = setTimeout(gameProcess, 1000/6);
scoreDiv = document.getElementById("score");
controlDiv = document.getElementById("control");
window.onkeydown = keydown;
}
//Clear function
function clear()
{
context.clearRect(0,0,width,height);
}
//When a restart is needed
function restart()
{
bodyX = new Array(150, 150 - sqSize, 150 - 2 * sqSize);
bodyY = new Array(200, 200, 200);
vX = new Array(1, 1, 1);
vY = new Array(0, 0, 0);
snakeLength = 3;
score = 0;
level = 1;
eaten = true;
scoreDiv.innerHTML = "Points: " +score+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Level: "+level;
controlDiv.innerHTML = "Controls - up = w, down = s, left = a, right = d";
intervalId = setTimeout(gameProcess, 1000/6);
}
//This is the part that controls branchy. Checks to see if appropriate keys are used
function keydown(e)
{
if(e.keyCode == 65 && vX[0] != 1) //Left arrow - Changed to 'a'
{
vX[0] = -1;
vY[0] = 0;
}
else if (e.keyCode == 87 && vY[0] != 1) //Up arrow - changed to 'w'
{
vY[0] = -1;
vX[0] = 0;
}
else if (e.keyCode == 68 && vX[0] != -1) //Right arrow - changed to 'd'
{
vX[0] = 1;
vY[0] = 0;
}
else if (e.keyCode == 83 && vY[0] != -1) //Down arrow - changed to 's'
{
vY[0] = 1;
vX[0] = 0;
}
else if (e.keyCode == 13 && gameOver == true)
{
gameOver = false;
restart();
}
}
function drawCanvasBoundary()
{
context.fillStyle="#d1b39e";
context.fillRect(0,0,width,height);
context.fill();
context.strokeStyle="#000";
context.strokeRect(0,0,width,height);
//context.closePath();
//context.fill();
/* */
}
function drawPoint(x,y)
{
context.fillStyle = "#19d237";
context.fillRect(x,y,sqSize, sqSize);
context.fill();
//Boundary is drawn in color
context.strokeStyle="#FFFFFF";
context.strokeRect(x,y,sqSize, sqSize);
}
function drawSnake()
{
for(var i = 0; i < snakeLength; i++)
drawPoint(bodyX[i],bodyY[i]);
}
//See if boa hit into wall
function checkCollision()
{
if(bodyX[0] >= width || bodyX[0] < 0 || bodyY[0] < 0 || bodyY[0] >= height)
{
scoreDiv.innerHTML = "Score: " +score+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Level: "+level+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Game Over</b>";
controlDiv.innerHTML = "Please Press \"Enter\" to help Branchy!";
gameOver = true;
clearTimeout(intervalId);
}
else if(snakeLength > 4)
{
if(checkSelfCollision(bodyX[0],bodyY[0]))
{
scoreDiv.innerHTML = "Score: " +score+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Level: "+level+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Game Over</b>";
controlDiv.innerHTML = "Please Press \"Enter\" to help Branchy!";
gameOver = true;
clearTimeout(intervalId);
}
}
}
//See if boa hit into own body
function checkSelfCollision(x, y)
{
for (var i = 4; i < snakeLength; i++)
if(x == bodyX[i] && y == bodyY[i])
{
return true;
}
return false;
}
function checkFoodCollision(x, y)
{
for (var i = 0; i < snakeLength; i++)
if(x == bodyX[i] && y == bodyY[i])
{
return true;
}
return false;
}
//Pieces need to be placed onto board at random once current piece is merged
function placePiece()
{
if(eaten)
{
rX = Math.floor(width*Math.random()/sqSize)*sqSize;
rY = Math.floor(height*Math.random()/sqSize)*sqSize;
if(checkFoodCollision(rX,rY))
placePiece();
else
eaten = false;
}
drawPoint(rX, rY);
}
//Move the boa
function moveSnake()
{
for(var i = 0; i < snakeLength; i++)
{
bodyX[i] += (vX[i]*sqSize);
bodyY[i] += (vY[i]*sqSize);
}
for(var i=snakeLength-1; i>0; i--)
{
vX[i] = vX[i-1];
vY[i] = vY[i-1];
}
eatPiece();
}
//Eat a piece
function eatPiece()
{
if(bodyX[0] == rX && bodyY[0] == rY)
{
eaten = true;
var newX = bodyX[snakeLength-1]-vX[snakeLength-1]*sqSize;
var newY = bodyY[snakeLength-1]-vY[snakeLength-1]*sqSize;
bodyX.push(newX);
bodyY.push(newY);
vX.push(vX[snakeLength-1]);
vY.push(vY[snakeLength-1]);
snakeLength++;
score += 10;
if((score%100) == 0)
level++;
scoreDiv.innerHTML = "Score: " +score+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Level: "+level;
}
}
//Keep track of the whole game. Import function right here!!!
function gameProcess()
{
intervalId = setTimeout(gameProcess, 1000/(6*level));
clear();
drawCanvasBoundary();
placePiece();
moveSnake();
checkCollision();
drawSnake();
}
window.addEventListener("load", init, true);
</script>
<object height="1" width="1" data="media/reggae.mp3"></object>
</head>
<body>
<body bgcolor = "#b7facc"> <!--Set background color -->
<div id="wrapper">
<h1> <img src="img/Logo.jpg" alt="logo"</h1>
<div id="score">Score: 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Level: 1</div>
<canvas width="300" height="400" id="canvas">
</canvas>
<div id="control">Controls - up = w, down = s, left = a, right = d</div>
<p></p>
</div>
</body>
</html>