1
\$\begingroup\$

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?

\$\endgroup\$
  • \$\begingroup\$ It's not immediately clear to me why writing Javascript to drive an Achievement menu would need to be different from any webpage that displays a dynamic list of content - like a store catalog, gallery, or collection of blog posts & comments. The features you describe of being able to scroll the collection, group & expand items in categories, and display additional information on hover, are all very conventional website features. As such, this looks like a web development question that does not require achievement or gamedev-specific expertise to answer, so this may not be the best site to ask \$\endgroup\$ – DMGregory Sep 1 '17 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.