Snake

HTML

<body id="page-color">
	<a href="../Snake/options.html">
		<p id="options">Options</p>
	</a>
	<div id="snake"></div>
</body>

CSS

.fitpage {
	position:absolute;
	z-index:0;
	left:0vw;
	top:0vh;
	width:100px;
	height:100px;
	background-color: blue;
}

#page-color {
	background-color: white;
	transition: 3s;
}

#options, #options:visited {
	color: black;
	position: fixed;
	transition: 3s;
	bottom: 0%;
	right: 2%;
}

#snake {
	height: 10px;
	width: 10px;
	background-color: black;
	position: fixed;
//	bottom: 50vh;
//	left: 50vw;
}

JavaScript

var theme;
var snakeObject = document.getElementById("snake");
var speed = 300;
var direction;
var x_pos = window.innerWidth / 2;
var y_pos = window.innerHeight / 2;

snakeObject.style.bottom = x_pos + "px";
snakeObject.style.left = y_pos + "px";

function checkTheme() {
	if (theme == true) {
		document.getElementById("page-color").style.backgroundColor = "black";
		document.getElementById("options").style.color = "white";
		snakeObject.style.backgroundColor = "white";
	}
	else {
		document.getElementById("page-color").style.backgroundColor = "white";
		document.getElementById("options").style.color = "black";
		document.getElementById("snake").style.backgroundColor = "black";
	}
}

function start() {
	setInterval(checkTheme, 1000);
}

start();

document.addEventListener('keydown', function keypress(event){
	if (event.keyCode == 38) {
		snakeObject.style.bottom = (parseInt(snakeObject.style.bottom) + 1) + "px";
	}
	else if (event.keyCode == 40) {
		snakeObject.style.bottom = (parseInt(snakeObject.style.bottom) - 1) + "px";
	}
	else if (event.keyCode == 37) {
		snakeObject.style.left = (parseInt(snakeObject.style.left) - 1) + "px" ;
	}
	else if (event.keyCode == 39) {
		snakeObject.style.left = (parseInt(snakeObject.style.left) + 1) + "px";
	}
});