How to move charater to other sectors

Question

I have this working fiddle http://jsfiddle.net/Sk8erPeter/b5sxk/1/

What i want is to make a grid lets say 3x3 Lets consider i m in scector B2.

The question is how could i move to any other sector knowing where i m?

A1 A2 A3
B1 B2 B3
C1 C2 C3

Goal is to be able to walk from one sector to other! Any help?

Code now:

user_3297291 · Answer

If I understand the question correctly, you want the block to jump between sections at the border.

Here's what I would do:

Create an array of sections and specify the number of columns and rows (in your case 9 sections in a 3x3 grid)
Create an index that marks the section the block is currently in
In your edge detection, check if there is an adjacent section
- If there is an adjacent section, update the section index and move the block to the opposite end
- If there isn't (e.g. you're on row 0 and moving up), ensure the block sticks to the edge (current implementation you already have)

Here's a working example:

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

user_4782423 · Answer

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

How to move charater to other sectors

2 Answers