如何將角色轉移到其他部門-有解無憂

我有這個作業小提琴http://jsfiddle.net/Sk8erPeter/b5sxk/1/

我想要的是制作一個網格讓我們說 3x3 讓我們在 sector B2 中考慮 im。

問題是我怎樣才能知道我在哪里搬到任何其他部門？

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>

uj5u.com熱心網友回復：

如果我正確理解了這個問題，您希望塊在邊界的部分之間跳轉。

這是我會做的：

創建一個部分陣列并指定列數和行數（在您的情況下為 3x3 網格中的 9 個部分）
創建一個索引來標記塊當前所在的部分
在邊緣檢測中，檢查是否有相鄰部分
- 如果有相鄰節，則更新節索引并將塊移動到另一端
- 如果沒有（例如，您在第 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>

uj5u.com熱心網友回復：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/354129.html

標籤：javascript 帆布

上一篇：如何使用javascript自動抓取元素的高度來改變CSS樣式？

下一篇：C 如何將std::array的內容復制到另一個？