如何将角色转移到其他部门

Question

我有这个工作fiddlehttp://jsfiddle.net/Sk8erPeter/b5sxk/1/

我想要的是制作一个 3x3 的网格让我们考虑我在扇区 B2 中。

问题是我怎么能知道我在哪里就可以转到任何其他部门？

A1 A2 A3
B1 B2 B3
C1 C2 C3

目标是能够从一个部门走到另一个部门！有帮助吗？

现在编码：

<style>
canvas {
    display:block;
    margin:auto;
    border:1px dashed black;
}
</style>

<canvas id="canvas" width="500" height="400"></canvas>

<script>
(function (d, w) {

    var context;
    var rightKey = false;
    var leftKey = false;
    var upKey = false;
    var downKey = false;
    var block_x;
    var block_y;
    var block_h = 30;
    var block_w = 30;

    function init() {
        var canvas = d.getElementById('canvas');

        var canvasTextRectangle = canvas.getBoundingClientRect();

        context = canvas.getContext('2d');
        WIDTH = canvasTextRectangle.width;
        HEIGHT = canvasTextRectangle.height;
        block_x = WIDTH / 2 - 15;
        block_y = HEIGHT / 2 - 15;

        setInterval(draw, 25);
    }

    function clearCanvas() {
        context.clearRect(0, 0, WIDTH, HEIGHT);
    }

    function draw() {

        clearCanvas();
        if (rightKey) block_x += 5;
        else if (leftKey) block_x -= 5;
        if (upKey) block_y -= 5;
        else if (downKey) block_y += 5;
        if (block_x <= 0) block_x = 0;
        if ((block_x + block_w) >= WIDTH) block_x = WIDTH - block_w;
        if (block_y <= 0) block_y = 0;
        if ((block_y + block_h) >= HEIGHT) block_y = HEIGHT - block_h;

        context.fillRect(block_x, block_y, block_w, block_h);
    }

    function onKeyDown(evt) {
        if (evt.keyCode == 39) rightKey = true;
        else if (evt.keyCode == 37) leftKey = true;
        if (evt.keyCode == 38) upKey = true;
        else if (evt.keyCode == 40) downKey = true;

        evt.preventDefault();
        evt.stopPropagation();
    }

    function onKeyUp(evt) {

        if (evt.keyCode == 39) rightKey = false;
        else if (evt.keyCode == 37) leftKey = false;
        if (evt.keyCode == 38) upKey = false;
        else if (evt.keyCode == 40) downKey = false;

        evt.preventDefault();
        evt.stopPropagation();
    }


    w.addEventListener("load", init, false);

    w.addEventListener("keydown", onKeyDown, false);

    w.addEventListener("keyup", onKeyUp, false);


})(document, window);
</script>

Answer 1

const cellSize = 30; // grid resolution

(function (d, w) {
    var context;
    var rightKey = false;
    var leftKey = false;
    var upKey = false;
    var downKey = false;
    var block_h = 30;
    var block_w = 30;
  
    // Remember what this x and y now is grid x y, not in pixels!
    var block_x;
    var block_y;

    function init() {
        var canvas = d.getElementById('canvas');

        var canvasTextRectangle = canvas.getBoundingClientRect();

        context = canvas.getContext('2d');
        WIDTH = canvasTextRectangle.width;
        HEIGHT = canvasTextRectangle.height;
        // Find center cell..
        block_x = (WIDTH / 2 - block_w / 2) / cellSize >>> 0;
        block_y = (HEIGHT / 2 - block_h / 2) / cellSize >>> 0;

        setInterval(draw, 75);
    }

    function clearCanvas() {
        context.clearRect(0, 0, WIDTH, HEIGHT);
    }

    function drawGrid(){
      for(let i = 0; i < canvas.width; i+=cellSize){
        context.fillRect(i, 0, 1, canvas.height);
      }
      for(let i = 0; i < canvas.height; i+=cellSize){
        context.fillRect(0, i, canvas.width, 1);
      }
    }

    function draw() {
        clearCanvas();
        drawGrid();
        
        // Since block x and y is grid position, not pixels
        // we have to move it for one cell per step
        if (rightKey) {
          block_x += 1;
        }else if (leftKey) {
          block_x -= 1;
        }
        if (upKey) {
          block_y -= 1;
        }
        else if (downKey) {
          block_y += 1;
        }
        
        if (block_x <= 0) block_x = 0;
        if (block_y <= 0) block_y = 0;
        
        // Here you see, how to find last _full_ cell on right and bottom sides of grid
        if ((block_x + 1) * cellSize >= WIDTH) block_x = (WIDTH - block_w) / cellSize >>> 0;
        if ((block_y + 1)* cellSize >= HEIGHT) block_y = (HEIGHT - block_h) / cellSize >>> 0;


        // calculating pixel position is easy:
        context.fillRect(block_x * cellSize, block_y * cellSize, block_w, block_h);
    }

    function onKeyDown(evt) {
        if (evt.keyCode == 39) rightKey = true;
        else if (evt.keyCode == 37) leftKey = true;
        if (evt.keyCode == 38) upKey = true;
        else if (evt.keyCode == 40) downKey = true;

        evt.preventDefault();
        evt.stopPropagation();
    }

    function onKeyUp(evt) {

        if (evt.keyCode == 39) rightKey = false;
        else if (evt.keyCode == 37) leftKey = false;
        if (evt.keyCode == 38) upKey = false;
        else if (evt.keyCode == 40) downKey = false;

        evt.preventDefault();
        evt.stopPropagation();
    }


    w.addEventListener("load", init, false);

    w.addEventListener("keydown", onKeyDown, false);

    w.addEventListener("keyup", onKeyUp, false);


})(document, window);

canvas {
    display:block;
    margin:auto;
    border:1px dashed black;
}

<canvas id="canvas" width="500" height="400"></canvas>

Answer 2

如果我理解正确的话，你希望方块在边界处的部分之间跳转。

我会这样做：

创建一个部分数组并指定列数和行数（在您的情况下，3x3 网格中有 9 个部分）
创建一个索引来标记块当前所在的部分
在你的边缘检测中，检查是否有相邻的部分
- 如果有相邻的section，则更新section index并将block移动到对端
- 如果没有（例如，您在第 0 行并向上移动），请确保块贴在边缘（您已经拥有的当前实现）

这是一个工作示例：

(function (d, w) {

    var context;
    var rightKey = false;
    var leftKey = false;
    var upKey = false;
    var downKey = false;
    var block_x;
    var block_y;
    var block_h = 20;
    var block_w = 20;
    
    const sect_rows = 3;
    const sect_cols = 3;
    const sections = [
     "A1", "A2", "A3",
     "B1", "B2", "B3",
     "C1", "C2", "C3"];
    
    let sectionIndex = 4;

    function init() {
        var canvas = d.getElementById('canvas');

        var canvasTextRectangle = canvas.getBoundingClientRect();

        context = canvas.getContext('2d');
        WIDTH = canvasTextRectangle.width;
        HEIGHT = canvasTextRectangle.height;
        block_x = WIDTH / 2 - 15;
        block_y = HEIGHT / 2 - 15;

        setInterval(draw, 25);
    }

    function clearCanvas() {
        context.clearRect(0, 0, WIDTH, HEIGHT);
    }

    function draw() {

        clearCanvas();
        
        // Move player
        if (rightKey) block_x += 5;
        else if (leftKey) block_x -= 5;
        if (upKey) block_y -= 5;
        else if (downKey) block_y += 5;
        
        // Edge detection
        if (block_x <= 0) {
          const hasSectionToLeft = sectionIndex % sect_rows !== 0;
          if (hasSectionToLeft) {
            sectionIndex -= 1;
            block_x = WIDTH - block_w - 1;
          } else {
            block_x = 0;
          }
        } else if ((block_x + block_w) >= WIDTH) {
          const hasSectionToRight = sectionIndex % sect_rows !== (sect_rows - 1);
          if (hasSectionToRight) {
            sectionIndex += 1;
            block_x = 1;
          } else {
            block_x = WIDTH - block_w;
          }
          
        }
        
        if (block_y <= 0) {
          const hasSectionAbove = sectionIndex >= sect_cols;
          if (hasSectionAbove) {
            sectionIndex -= sect_cols;
            block_y = HEIGHT - block_h - 1;
          } else {
            block_y = 0;
          }
        } else if ((block_y + block_h) >= HEIGHT) {
          const hasSectionBelow = sectionIndex < sections.length - sect_rows;
          if (hasSectionBelow) {
            sectionIndex += sect_cols;
            block_y = 1;
          } else {
            block_y = HEIGHT - block_h;
          }
        }


        // Draw section
        context.font = '48px sans-serif';
        context.fillText(sections[sectionIndex], 10, 50);

        // Draw player
        context.fillRect(block_x, block_y, block_w, block_h);
        
    }

    function onKeyDown(evt) {
        if (evt.keyCode == 39) rightKey = true;
        else if (evt.keyCode == 37) leftKey = true;
        if (evt.keyCode == 38) upKey = true;
        else if (evt.keyCode == 40) downKey = true;

        evt.preventDefault();
        evt.stopPropagation();
    }

    function onKeyUp(evt) {

        if (evt.keyCode == 39) rightKey = false;
        else if (evt.keyCode == 37) leftKey = false;
        if (evt.keyCode == 38) upKey = false;
        else if (evt.keyCode == 40) downKey = false;

        evt.preventDefault();
        evt.stopPropagation();
    }


    w.addEventListener("load", init, false);

    w.addEventListener("keydown", onKeyDown, false);

    w.addEventListener("keyup", onKeyUp, false);


})(document, window);


// ********************************

canvas { border: 1px solid red; }

<canvas id="canvas" width="200" height="200"></canvas>

如何将角色转移到其他部门

How to move charater to other sectors

javascript

canvas