Notes

var player;
var upPressed = false;
var downPressed = false;
var leftPressed = false;
var rightPressed = false;
var spaceBar;
var playerFacePosition;
var weapon;

function setPlayerDirection(dir) {
//Display the walk animation for the correct direction, remove the other directions
//to ensure the player does not have both "left" and "right" applied at the same time
player.classList.remove('up');
player.classList.remove('left');
player.classList.remove('right');
player.classList.remove('down');
player.classList.add(dir);
}

function keyUp(event) {
if (event.keyCode == 37) {
leftPressed = false;
}

if (event.keyCode == 39) {
rightPressed = false;
}

if (event.keyCode == 38) {
upPressed = false;
}

if (event.keyCode == 40) {
downPressed = false;
}
if (event.keyCode == 32) {
spaceBar = false;
player.classList.remove('fire');
}
}


function move() {

var left = player.offsetLeft;
var top = player.offsetTop;

if (downPressed) {
setPlayerDirection('down');
top = top + 1;
playerFacePosition = 'down';
}

if (upPressed) {
setPlayerDirection('up');
top = top - 1;
playerFacePosition = 'up';
}

if (leftPressed) {
setPlayerDirection('left');
left = left - 1;
playerFacePosition = 'left'
}

if (rightPressed) {
setPlayerDirection('right');
left = left + 1;
playerFacePosition = 'right';
}

//Get the the element at the coordinates for where the play will move to
//All 4 corners of the player are required to check there is no collision on any side
var playerTopLeft = document.elementFromPoint(left, top);
var playerTopRight = document.elementFromPoint(left+32, top);
var playerBottomLeft = document.elementFromPoint(left, top+48);
var playerBottomRight = document.elementFromPoint(left+32, top+48);


//If the element that the player is about to walk over contains the class "blocking" then
// the player is not moved.
// The player will only be moved to coordinates `top` and `left` if the element in that position is not blocking
if (!playerTopLeft.classList.contains('blocking') && !playerTopRight.classList.contains('blocking')
&& !playerBottomLeft.classList.contains('blocking') && !playerBottomRight.classList.contains('blocking')) {
player.style.left = left + 'px';
player.style.top = top + 'px';
}

//If any of the keys are being pressed, display the walk animation
if (leftPressed || rightPressed || upPressed || downPressed) {
player.classList.add('walk');
player.classList.remove('stand');
}
//Otherwise, no keys are being pressed, display stand
else {
player.classList.add('stand');
player.classList.remove('walk');
}

}


function keyDown(event) {
if (event.keyCode == 37) {
leftPressed = true;
}

if (event.keyCode == 39) {
rightPressed = true;
}

if (event.keyCode == 38) {
upPressed = true;
}

if (event.keyCode == 40) {
downPressed = true;
}
if(event.keyCode == 32){
throwArrow();
player.classList.add('fire');
}
}

function throwArrow(){
weapon = document.createElement('div');
weapon.className = 'arrow';

weaponPositiontop = player.offsetTop;
weaponPositionleft = player.offsetLeft;



weapon.style.left = weaponPositionleft + 'px';
weapon.style.top = weaponPositiontop+ 'px';

var body = document.getElementsByTagName('body');
body[0].appendChild(weapon);

if(playerFacePosition == "down"){
weapon.classList.add('down');
}


if(playerFacePosition == "left"){
weapon.classList.add('left');
}

if(playerFacePosition == "up"){
weapon.classList.add('up');
}

if(playerFacePosition == "right"){
weapon.classList.add('right');
}
setInterval(firearrow,5);
}

function firearrow() {
var firearrowleft = weapon.offsetLeft;
var firearrowtop = weapon.offsetTop;
if(weapon.classList.contains('down')){
firearrowtop = firearrowtop + 1;
}
else if(weapon.classList.contains('up')){
firearrowtop = firearrowtop - 1;
}
else if(weapon.classList.contains('left')){
firearrowleft = firearrowleft - 1;
}
else if(weapon.classList.contains('right')){
firearrowleft = firearrowleft + 1;
}
blockArrow(firearrowtop,firearrowleft)
killEnemy(firearrowtop,firearrowleft)
}

function blockArrow(firearrowtop,firearrowleft){
var FireArrowTopLeft = document.elementFromPoint(firearrowleft, firearrowtop);
var FireArrowTopRight = document.elementFromPoint(firearrowleft+32, firearrowtop-15);
var FireArrowBottomLeft = document.elementFromPoint(firearrowleft, firearrowtop+40);
var FireArrowBottomRight = document.elementFromPoint(firearrowleft+30, firearrowtop+20);

if (!FireArrowTopLeft.classList.contains('blocking') && !FireArrowTopRight.classList.contains('blocking')
&& !FireArrowBottomLeft.classList.contains('blocking') && !FireArrowBottomRight.classList.contains('blocking')) {
weapon.style.top = firearrowtop + 'px';
weapon.style.left = firearrowleft + 'px';
}
}

function killEnemy(firearrowtop,firearrowleft){
var FireArrowTopLeft = document.elementFromPoint(firearrowleft, firearrowtop);
var FireArrowTopRight = document.elementFromPoint(firearrowleft+30, firearrowtop-15);
var FireArrowBottomLeft = document.elementFromPoint(firearrowleft, firearrowtop+40);
var FireArrowBottomRight = document.elementFromPoint(firearrowleft+30, firearrowtop+20);
var msg = "You Win";
if(FireArrowTopLeft.classList.contains('enemy') || FireArrowTopRight.classList.contains('enemy')
|| FireArrowBottomLeft.classList.contains('enemy') || FireArrowBottomRight.classList.contains('enemy')){
for (i=0; i < document.getElementsByClassName('enemy').length; i++) {
enemyCount = document.getElementsByClassName('enemy')[i];
enemyCount.setAttribute("id",i);
if (enemyCount == document.getElementsByClassName('enemy').length) {
enemyCount.classList.add("dead");
}
}
diedEnemy = document.getElementById(FireArrowTopRight.id);
if (!diedEnemy.classList.contains("dead")) {
diedEnemy.classList.add("dead");
weapon.parentNode.removeChild(weapon);
}
}
}
function win() {
// win
pause();

// remove game area
gameAreaElement.style.display = 'none';

// stop game
startGameElement.disabled = true;
pauseGameElement.disabled = true;
// document.getElementById('new-game').disabled = true;

// hide toolbar
document.getElementById('toolbar').style.display = 'none';

// fill win time and win score
document.getElementById('win-time').innerHTML = getTimerString();
document.getElementById('win-score').innerHTML = player.score;

// show win screen
document.getElementById('win-play-again').addEventListener('click', init);
document.getElementById('win').style.display = 'block';
document.getElementById('win-overlay').style.display = 'block';
}
var gameState = "startScreen";
if(gameState=="startScreen") {
// show the start Screen
}
else if (gameState=="gameInProgress") {
// game code goes here
}
else if (gameState=="endScreen") {
// show endscreen
}
function gameStart() {
player = document.getElementById('player');
setInterval(move, 10);
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
}


document.addEventListener('DOMContentLoaded', gameStart);