var tWidth = 100;
var tHeight = 100;
var mWidth = 3180;
var mHeight = 2120;
var pc = {};
//CHARACTERS
var tokenImg = new Image();
var axe_dude = {
img: "./images/axe_guy.png",
hp: 50,
toHit: 4,
damage: 12,
init: 0,
per: 13,
range: 5
}
var fighter_bro = {
img: "./images/fighter_bro.png",
hp: 40,
toHit: 6,
damage: 10,
init: 2,
per: 15,
range: 10
}
var bow_lady = {
img: "./images/bow_elf.png",
hp: 30,
toHit: 8,
damage: 8,
init: 4,
per: 17,
range: 30
}
var goblin = {
img: "./images/goblin.png",
hp: 7,
toHit: 2,
damage: 6,
init: 2,
per: 9,
range: 5
}
var tokens = [];
var token1 = {tokenImg, tokenX: 350, tokenY: canvas.height - 175, isDraggable: false, rotation: 0, distance: 0 };
var tokenImg = new Image;
tokenImg.src = "./images/bow_elf.png";
var token2 = {tokenImg, tokenX: 150, tokenY: canvas.height - 175, isDraggable: false, rotation: 0, distance: 0 };
var tokens = [token1, token2];
var mapImg = new Image();
mapImg.src = "./images/cragmaw.jpg";
var map = {mapImg, mapX: -600, mapY: -1400, isDraggable: false, distance: 0};
var currentX = 10;
var currentY = 10;
var gDrag = false;
window.onload = function() {
//console.log("Hello there!");
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
currentX = canvas.width/2;
currentY = canvas.height/2;
_Go();
};
function _Go() {
_MouseEvents();
setInterval(function() {
_ResetCanvas();
_DrawImage();
}, 1000/30);
}
function _ResetCanvas() {
ctx.fillstyle = "#FFFFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function _DrawImage() {
ctx.drawImage(map.mapImg, map.mapX, map.mapY, mWidth, mHeight);
for (var i = 0; i < tokens.length; i++) {
ctx.drawImage(tokens[i].tokenImg, tokens[i].tokenX, tokens[i].tokenY, tWidth, tHeight);
}
}
function _MouseEvents() {
canvas.onmousedown = function(e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
//console.log(mouseX, mouseY);
var onToken = false;
for (var i = 0; i < tokens.length; i++) {
if (mouseX >= tokens[i].tokenX && mouseX <= tokens[i].tokenX + tWidth && mouseY >= tokens[i].tokenY && mouseY <= tokens[i].tokenY + tHeight) {
onToken = true;
//console.log("YES!");
tokens[i].isDraggable = true;
}
}
if (!onToken) {
//console.log("movin' da map");
map.distance = [(e.pageX - this.offsetLeft) - map.mapX, (e.pageY - this.offsetTop) - map.mapY];
//console.log(map.distance[0], map.distance[1]);
map.isDraggable = true;
gDrag = true;
for (var i = 0; i < tokens.length; i++) {
tokens[i].distance = [(e.pageX - this.offsetLeft) - tokens[i].tokenX, (e.pageY - this.offsetTop) - tokens[i].tokenY];
//console.log(tokens[i].distance);
}
}
};
canvas.onmousemove = function(e) {
if (gDrag) {
map.mapX = -map.distance[0] + (e.pageX - this.offsetLeft);
map.mapY = -map.distance[1] + (e.pageY - this.offsetTop);
//console.log(map.mapX, map.mapY);
for (var i = 0; i < tokens.length; i++) {
tokens[i].tokenX = -tokens[i].distance[0] + e.pageX - this.offsetLeft;
tokens[i].tokenY = -tokens[i].distance[1] + e.pageY - this.offsetTop;
}
} else {
for (var i = 0; i < tokens.length; i++) {
if (tokens[i].isDraggable) {
tokens[i].tokenX = e.pageX - this.offsetLeft - tWidth/2;
tokens[i].tokenY = e.pageY - this.offsetTop - tHeight/2;
}
}
}
};
canvas.onmouseup = function(e) {
gDrag = false;
map.isDraggable = false;
for (var i = 0; i < tokens.length; i++) {
tokens[i].isDraggable = false;
}
};
canvas.onmousewheel = function(e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
for (var i = 0; i < tokens.length; i++) {
if (mouseX >= tokens[i].tokenX && mouseX <= tokens[i].tokenX + tWidth && mouseY >= tokens[i].tokenY && mouseY <= tokens[i].tokenY + tHeight) {
if (tokens[i].rotation < 3) {
tokens[i].rotation++;
} else {
tokens[i].rotation = 0;
}
//console.log(tokens[i].rotation)
}
}
};
}
var charPick = 0;
$( "#fighterBro" ).click(function() {
$( "#desc" ).html("
Fighter bro!
"); charPick = 1; }); $( "#axeDude" ).click(function() { $( "#desc" ).html("Axe Dude!
"); charPick = 2; }); $( "#bowLady" ).click(function() { $( "#desc" ).html("Bow Lady!
"); charPick = 3; }); $( "#createChar").click(function() { if (charPick != 0) { if (charPick == 1) { pc = fighter_bro; } else if (charPick == 2) { pc = axe_dude; } else { pc = bow_lady; } tokenImg.src = pc.img; $( "#splash" ).css("display", "none"); $( "#top_banner").css('display', "block"); $( "#nav").css('display', "block"); $( "#playArea").css('display', "block"); } });