Question

我正在学习用于游戏设计的javascript，并希望创建一个单独的成就页面，用户可以导航到这个页面，以便他们检查他们在各种游戏中的成就。（目前我并不关心实现localstorage / cookies等，我现在只想在页面上工作）

所以我的基本想法的要求如下：

能够在视口/页面周围拖动以查看所有成就类别，因为它们可能不会在较小的屏幕上全部显示
能够点击某个类别打开一个小方框，其中包含属于该游戏/类别的所有成就
能够将鼠标悬停在方框中的所有成就上，以获取它们的文字描述
可选：在＆＃34; overorld＆＃34;上连接每个方框的线条。向用户展示如果他们在屏幕外的附近的盒子

起初，我以为我需要画布才能做到这一点。我学到了一点关于它并且得到了相当远的距离，直到我意识到画布有很多限制，比如不能做鼠标悬停事件，除非手动实现每一个。以下是我在学习画布测试时所取得的进展，但不是很远：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

所以我想我现在的问题是：实现这个的最佳方法是什么？用帆布做它是否可行，或者我应该废弃它并尝试找出div运动的东西？我应该关注性能问题吗？这会影响我实现它的方式吗？

Javascript：也可以与之交互的可导航视口

0 个答案: