Javascript: Navigatable Viewport that can also be interacted with

Question

I am in the process of learning javascript for game design, and wanted to make a separate achievement page that the user can navigate to that will allow them to check their achievements on various games. (at the moment I am not concerned with implementing localstorage/cookies etc, I just want to work on the page for now)

So the requirements of my base idea is as follows:

Able to drag around the viewport/page to view all the achievement categories as they will likely not all be in view on smaller screens
Able to click on a category to open a small box containing all achievements belonging to that game/category
Able to mouse over all achievements in the boxes to get text descriptions of what they are
OPTIONAL: have lines connecting each box on the "overworld" to show users where nearby boxes are if they are off screen

At first, I thought I would need canvas to be able to do this. I learned a bit about it and got decently far until I realized that canvas has a lot of restrictions like not being able to do mouseover events unless manually implementing each one. Here is the current progress I was at in doing a test-run of learning canvas, but it's not very far:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function resize()
    {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(panning.offset.x, panning.offset.y);
        draw();
    }
    window.addEventListener("resize", resize);

var global = {
    scale   : 1,
    offset  : {
        x : 0,
        y : 0,
    },
};
var panning = {
    start : {
        x : null,
        y : null,
    },
    offset : {
        x : 0,
        y : 0,
    },
};
var canvasCenterWidth = (canvas.width / 2);
var canvasCenterHeight = (canvas.height / 2);

function draw() {
    ctx.beginPath();
    ctx.rect(canvasCenterWidth, canvasCenterHeight, 100, 100);
    ctx.fillStyle = 'blue';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(350, 250, 50, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'red';
    ctx.fill();
}

draw();

canvas.addEventListener("mousedown", startPan);

function pan() {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(panning.offset.x, panning.offset.y);
    draw();
}

function startPan(e) {
    window.addEventListener("mousemove", trackMouse);
    window.addEventListener("mousemove", pan);
    window.addEventListener("mouseup", endPan);
    panning.start.x = e.clientX;
    panning.start.y = e.clientY;
}

function endPan(e) {
    window.removeEventListener("mousemove", trackMouse);
    window.removeEventListener("mousemove", pan);
    window.removeEventListener("mouseup", endPan);
    panning.start.x = null;
    panning.start.y = null;
    global.offset.x = panning.offset.x;
    global.offset.y = panning.offset.y;
}

function trackMouse(e) {
    var offsetX  = e.clientX - panning.start.x;
    var offsetY  = e.clientY - panning.start.y;
    panning.offset.x = global.offset.x + offsetX;
    panning.offset.y = global.offset.y + offsetY;
}

body{
  overflow: hidden;
}
canvas {
  top: 0;
  left: 0;
  position: absolute; }

<canvas id="canvas"></canvas>

So I guess my question is now: what is the best way to implement this? Is it feasable to do it with canvas, or should I just scrap that and try to figure out something with div movement? Should I be concerned with performance issues and should that affect how I implement it?

Javascript: Navigatable Viewport that can also be interacted with

0 Answers0