portfolio/assets/js/app.js

var TO_RADIANS = Math.PI/180; 

var _listener

var controlsMode = false
var dialogMode = true
var terminalMode = false

var spriteSize = 16 * 5
var spriteMap = new Image()
spriteMap.src = './assets/img/sprites/sprite-map-1.png'

var canvasOffset = 9
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
canvas.width = spriteSize * canvasOffset
canvas.height = canvas.width

var audio = null
var terminal = new Terminal()
var games = new Games()
var music = new Music()
var dialog = new Dialog()
var resume = new Resume()
var portfolio = new Portfolio()
var indicator = new Indicator()
var player = new Player(5, 4, 'down')

window.addEventListener("resize", function() {
	terminal.resize();
	games.resize();
})

function renderRoom() {
	// render wall
	for (let i = 0; i < canvasOffset; i++) {
		new Renderer(2, 1, i, 0)
	}

	// Render Wood Floor
	for (let i = 0; i < canvasOffset; i++) {
		for (let j = 1; j < canvasOffset; j++) {
			new Renderer(1, 0, i, j)
		}
	}
	
	// Render Rug row 1
	new Renderer(2, 0, 1, 2)
	new Renderer(3, 0, 2, 2)
	new Renderer(3, 0, 3, 2)
	new Renderer(3, 0, 4, 2)
	new Renderer(3, 0, 5, 2)
	new Renderer(3, 0, 6, 2)
	new Renderer(2, 0, 7, 2, 90)
	// Render Rug row 1
	new Renderer(3, 0, 1, 3, 270)
	new Renderer(4, 0, 2, 3)
	new Renderer(4, 0, 3, 3)
	new Renderer(5, 0, 4, 3)
	new Renderer(5, 0, 5, 3)
	new Renderer(5, 0, 6, 3)
	new Renderer(3, 0, 7, 3, 90)
	// Render Rug row 2
	new Renderer(3, 0, 1, 4, 270)
	new Renderer(5, 0, 2, 4)
	new Renderer(5, 0, 3, 4)
	new Renderer(5, 0, 4, 4)
	new Renderer(5, 0, 5, 4)
	new Renderer(5, 0, 6, 4)
	new Renderer(3, 0, 7, 4, 90)
	// Render Rug row 3
	new Renderer(3, 0, 1, 5, 270)
	new Renderer(5, 0, 2, 5)
	new Renderer(5, 0, 3, 5)
	new Renderer(5, 0, 4, 5)
	new Renderer(5, 0, 5, 5)
	new Renderer(5, 0, 6, 5)
	new Renderer(3, 0, 7, 5, 90)
	// Render Rug row
	new Renderer(3, 0, 1, 6, 270)
	new Renderer(5, 0, 2, 6)
	new Renderer(5, 0, 3, 6)
	new Renderer(5, 0, 4, 6)
	new Renderer(5, 0, 5, 6)
	new Renderer(4, 0, 6, 6)
	new Renderer(3, 0, 7, 6, 90)
	// Render Rug row 4
	new Renderer(2, 0, 1, 7, 270)
	new Renderer(3, 0, 2, 7, 180)
	new Renderer(3, 0, 3, 7, 180)
	new Renderer(3, 0, 4, 7, 180)
	new Renderer(3, 0, 5, 7, 180)
	new Renderer(3, 0, 6, 7, 180)
	new Renderer(2, 0, 7, 7, 180)

	// render TV
	new Renderer(6, 0, 7, 0)
	new Renderer(7, 0, 8, 0)
	new Renderer(6, 1, 7, 1)
	new Renderer(7, 1, 8, 1)

	// render bookshelves
	new Renderer(1, 1, 0, 0)
	new Renderer(1, 1, 1, 0)

	// render computer
	new Renderer(0, 8, 2, 4)
	new Renderer(1, 8, 3, 4)
	new Renderer(2, 8, 4, 4)
	new Renderer(3, 8, 5, 4)

	// render maomao
	new Renderer(4, 1, 6, 6)

	// render window
	new Renderer(3, 1, 4, 0)

	//render player
	player.render()

	// render second half of computer
	new Renderer(0, 7, 2, 3)
	new Renderer(1, 7, 3, 3)
	new Renderer(2, 7, 4, 3)
	new Renderer(3, 7, 5, 3)

	// render guitar
	new Renderer(3, 2, 0, 7)
	new Renderer(3, 3, 0, 8)
	new Renderer(4, 2, 1, 8)
}

dialog.startIntroDialogSequence()

function toggleController() {
	var enterIndicatorElem = document.getElementById('enter-indicator')
	if (!controlsMode) {
		controlsMode = true
		enterIndicatorElem.innerHTML = 'TOUCH/CLICK ANYWHERE'
	} else {
		controlsMode = false
		enterIndicatorElem.innerHTML = 'PRESS ENTER'
	}
}

if (window.innerWidth <= 479) {
	toggleController()
}

function gameLoop() {
	if (!dialogMode && controlsMode) {
		dialog.controlsElem.style.display = 'block'
	} else if (!controlsMode || dialogMode) {
		dialog.controlsElem.style.display = 'none'
	}

	renderRoom()
	document.removeEventListener("keydown", _listener);
	if (terminalMode) {
		terminal.getKeystroke();
	} else if (!dialogMode) {
		this.getKeystroke();
	}

}

spriteMap.onload = function() {
	setInterval(gameLoop, 33);
}