pinguin-viewer/resources/js/main.js

"use strict";

var width = 30;
var height = 15;

LoadResources(function(images) {
	drawBoard(images);
});

function drawBoard(images) {
	var board = Board(width, height, "board");
	board.drawGrid();
	
	for (var y = 0; y < board.boardHeight; y++) {
		for (var x = 0; x < board.boardWidth; x++) {
			board.drawImage(images.water, x, y);
		}
	}
	
	board.drawImage(images.pinguin, 5, 5);
	board.drawImage(images.rock, 5, 7);
	board.drawImage(images.rock, 6, 7);
	board.drawImage(images.rock, 7, 6);
	board.drawImage(images.rock, 7, 5);
	board.drawImage(images.iglo, 25, 10);

	startGame(board);
}

function startGame(board) {
	console.log("start the game!");
}

function putHttp(url, callback) {
	var req = new XMLHttpRequest();
	req.addEventListener("load", callback);
	req.open("PUT", url);
	req.send();	
}

function Board(width, height, canvasId) {
	var board_canvas = document.getElementById(canvasId);
	var context = board_canvas.getContext("2d");
	var tileSize = 20;
	
	return {
		boardWidth : width,
		boardHeight : height,
		tileWidth : tileSize,
		tileHeight : tileSize,
		width : width * tileSize,
		height : height * tileSize,
		context : context,
		
		drawGrid : function() {
			for (var x = 0; x <= this.width; x += this.tileWidth) {
			  context.moveTo(x, 0);
			  context.lineTo(x, this.height);
			}
			
			for (var y = 0; y <= this.height; y += this.tileHeight) {
			  context.moveTo(0, y);
			  context.lineTo(this.width, y);
			}
			
			context.strokeStyle = "#ddd";
			context.stroke();
		},
		
		drawImage : function(image, x, y) {
			context.drawImage(image, x*this.tileWidth, y*this.tileHeight);
		},
	}
}

function LoadResources(callback) {
	var pinguin = new Image(20, 20);
	var water = new Image(20, 20);
	var rock = new Image(20, 20);
	var iglo = new Image(20, 20);
	var resources = {
		pinguin : pinguin,
		water : water,
		rock : rock,
		iglo : iglo,
	}
	
	pinguin.onload = function () { 
		water.onload = function (){
			rock.onload = function (){
				iglo.onload = function (){
					callback(resources);
				}
			}
		}
	}
	pinguin.src = "img/pinguin.png";
	water.src = "img/water.png";
	rock.src = "img/rock.png";
	iglo.src = "img/iglo.png";
}