// Repository: https://codeberg.org/dandeto/HTML5-Snake
// Tutorial: https://www.scipress.io/post/RD2DB4zGgNNkZ6wR9uz0/html5-canvas-snake

let canvas = document.getElementById("canvas");
let ctx    = canvas.getContext("2d");

const width       = Number(canvas.width);
const height      = Number(canvas.height);
const tileWidth   = 50;
const tileHeight  = 50;
const tilesX      = Math.round(width / tileWidth);
const tilesY      = Math.round(height / tileHeight);
const totalTiles  = tilesX * tilesY;
const borderWidth = 2;

let gameOver = false;
let eaten    = false;

let player = [];
let apple;
let highscore = 0;

// Keyboard controls
let lastKey;
let bufferedKey;
let deniedKey = {
	"ArrowLeft": "ArrowRight",
	"ArrowRight": "ArrowLeft",
	"ArrowUp": "ArrowDown",
	"ArrowDown": "ArrowUp",
	"undefined": "ArrowLeft"
}

document.addEventListener("keydown", function (e) {
	bufferedKey = e.key;
});

function getKey() {
	if(bufferedKey == "ArrowLeft" || bufferedKey == "ArrowRight" || bufferedKey == "ArrowUp" || bufferedKey == "ArrowDown") {
		if(!(deniedKey[lastKey] == bufferedKey)) {
			lastKey = bufferedKey;
		}
	}
	else if(gameOver && bufferedKey == " ") {
		lastKey = bufferedKey;
	}
}

// Setup the game - called once each time we init the game.
function setup() {
	if(player.length > highscore)
		highscore = player.length;
	
	gameOver = false;
	lastKey = undefined;
	player = [
		{
			x: 4,
			y: 5
		},
		{
			x: 3,
			y: 5
		},
		{
			x: 2,
			y: 5
		},
		{
			x: 1,
			y: 5
		}
	];

	createApple();
}

// Update - called every frame
function update() {
	getKey();

	if(lastKey == undefined)
		return;

	if(gameOver) {
		if(lastKey == " ") {
			setup();
		}
		return;
	}

	// Remove the last element in the array
	if(!eaten)
		player.pop();
	else
		eaten = false;

	// This is a confusing line of code. We are copying the head of the snake at player[0]
	// into an empty object {} and returning it to the variable `head`.
	// If we use `head = player[0]`, we would be referencing `player[0]` instead of copying it.
	let head = Object.assign({}, player[0]);

	if(lastKey == "ArrowLeft")
		--head.x;
	else if(lastKey == "ArrowRight")
		++head.x;
	else if(lastKey == "ArrowUp")
		--head.y;
	else if(lastKey == "ArrowDown")
		++head.y;

	// Add the head of the snake to the beginning of the array
	player.unshift(head);

	for(let i = 0; i < player.length; ++i) {
		// Check if the snake has hit itself
		if(i > 0 && head.x == player[i].x && head.y == player[i].y) {
			gameOver = true;
		}
		
		// Check if the snake is out of bounds
		if(player[i].x == tilesX)
			player[i].x = 0;
		else if(player[i].x == -1)
			player[i].x = tilesX -1;
		
		if(player[i].y == tilesY) 
			player[i].y = 0;
		else if(player[i].y == -1)
			player[i].y = tilesY -1;
	}

	// Check if the snake hit the apple
	if(head.x == apple.x && head.y == apple.y) {
		eaten = true;
		createApple();
	}
}

// Render - called every frame
function render() {
	// Draw background
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, width, height);

	if(!gameOver) {
		// Draw grid
		for(var i = 0; i < tilesX; ++i) {
			for(var j = 0; j < tilesY; ++j) {

				// Set the default tile color
				ctx.fillStyle = "blue";

				// Detect if the player is in this tile
				for(var k = 0; k < player.length; ++k) {
					if(player[k].x == i && player[k].y == j) {
						ctx.fillStyle = "green";
						break;
					}
				}
				
				drawTile(i,j);
			}
		}

		// Draw apple
		ctx.fillStyle = "red";
		drawTile(apple.x, apple.y);
	}
	else {
		// Draw GameOver screen
		ctx.font = "50px serif";
		ctx.fillStyle = "red";
		ctx.textAlign = "center";
		ctx.fillText("GAME OVER", width / 2, height / 2);
		ctx.font = "25px serif";
		ctx.fillText("Press Space to Restart", width / 2, height / 2 + 50);
	}

	// Draw the score
	ctx.font = "20px sans serif";
	ctx.fillStyle = "yellow";
	ctx.textAlign = "left";
	ctx.fillText(`Score: ${player.length}`, 10, 20);
	ctx.textAlign = "right";
	ctx.fillText(`Highscore: ${highscore}`, width - 10, 20);
}

// The entry point for the game
function main() {
	update();
	render();
}

// Utility functions
function randomTile(max) {
	// Generate a random number between 0 and max
	let randomFloat = Math.random() * max;

	// Convert float (decimal) to integer
	return Math.floor(randomFloat);
}

function drawTile(x, y) {
	// Calculate the x, y, w, h for each tile
	x = x * tileWidth + borderWidth;
	y = y * tileHeight + borderWidth;
	let w = tileWidth - borderWidth * 2;
	let h = tileHeight - borderWidth * 2;

	// Draw each tile
	ctx.fillRect(x, y, w, h);
}

function createApple() {
	let collision;

	do {
		collision = false;

		// Choose a random tile for the Apple
		apple = {
			x: randomTile(tilesX),
			y: randomTile(tilesY)
		}

		// Check to see if the apple was generated on a tile the player occupies
		for(let i = 0; i < player.length; ++i) {
			if(player[i].x == apple.x && player[i].y == apple.y) {
				collision = true;
				break;
			}
		}
	} while(collision);
}

// Setup the game before starting the game loop
setup();

// This will call the function main at 10fps and start the game
setInterval(main, 1000 / 10);