Check out my tutorial: https://youtu.be/3bHccvXBM-M

tilecursor.js

const KeyManager = {
  keys: {},
  setupEvents() {
    if (!this.isActive) {
      this.isActive = true;
      document.addEventListener("keydown", KeyManager._onKeyDown);
      document.addEventListener("keyup", KeyManager._onKeyUp);
    }
  },
  removeEvents() {
    if (this.isActive) {
      this.isActive = false;
      document.removeEventListener("keydown", KeyManager._onKeyDown);
      document.removeEventListener("keyup", KeyManager._onKeyUp);
    }
  },
  _onKeyUp: e => delete KeyManager.keys[e.keyCode],
  _onKeyDown: e => KeyManager.keys[e.keyCode] = true
};

class Canvas {
  constructor(w, h) {
    // standard stuff
    let canvas = document.createElement("canvas");
    this.w = canvas.width = w;
    this.h = canvas.height = h;
    document.body.appendChild(canvas);
    this.ctx = canvas.getContext("2d");
  }
  drawGrid(w, h, s) {
    // n | 0 is a quicker way of doing Math.floor
    let cols = (this.w / s) | 0;
    let rows = (this.h / s) | 0;

    this.ctx.save();
    this.ctx.strokeStyle = "lightgrey";
    this.ctx.beginPath();
    // draw horizontal and vertical lines at each step
    for (let x = 0; x <= cols * s; x += s) this.drawLine(x, 0, x, this.w);
    for (let y = 0; y <= rows * s; y += s) this.drawLine(0, y, this.h, y);

    this.ctx.stroke();
    this.ctx.beginPath();
    this.ctx.strokeStyle = "black";
    this.ctx.strokeRect(0, 0, this.w, this.h);
    this.ctx.restore();
  }
  drawLine(x1, y1, x2, y2) {
    this.ctx.moveTo(x1, y1);
    this.ctx.lineTo(x2, y2);
  }
  clear() {
    this.ctx.clearRect(0, 0, this.w, this.h);
  }
}

class TileCursor {
  constructor(canvas, x, y, tileSize, blinkRate) {
    this.canvas = canvas;
    this.x = x;
    this.y = y;
    this.blinkRate = blinkRate || 8;
    this.blinkCounter = this.blinkRate;
    this.render = true;
    this.tileSize = tileSize;
  }
  blink(m) {
    this.blinkCounter--;

    // this turns off the square wave at a certain point
    if (this.blinkCounter < this.blinkRate / (m || 2))
      this.render = false;

    // once the counter reaches zero, reset everything
    if (!this.blinkCounter) {
      this.render = true;
      this.blinkCounter = this.blinkRate;
    }
  }
  move() {
    // key codes: 37 == left, 38 == up, 39 == right, and 40 == down
    if (KeyManager.keys[37]) this.x--;
    if (KeyManager.keys[39]) this.x++;
    if (KeyManager.keys[38]) this.y--;
    if (KeyManager.keys[40]) this.y++;

    // figure out max rows and cols
    let maxCols = (this.canvas.w / this.tileSize) | 0;
    let maxRows = (this.canvas.h / this.tileSize) | 0;

    // do a little bounds checking...
    if (this.x < 0) this.x = 0;
    if (this.y < 0) this.y = 0;
    if (this.x > maxCols - 1) this.x = maxCols - 1;
    if (this.y > maxRows - 1) this.y = maxRows - 1;
  }
  draw() {
    // shorthand
    let [s, ctx] = [this.tileSize, this.canvas.ctx];

    ctx.save();
    ctx.strokeStyle = "red";
    ctx.beginPath();
    if (this.render)
      ctx.strokeRect(this.x * s, this.y * s, s, s);
    ctx.stroke();
    ctx.restore();
  }
}

class World {
  constructor(w, h, fps, tileSize) {
    this.fps = fps || 10;
    this.w = w || 400;
    this.h = h || 400;
    this.tileSize = tileSize || 20;
    this.canvas = new Canvas(this.w, this.h);

    let centerTileX = this.w / this.tileSize / 2 - 1;
    let centerTileY = this.h / this.tileSize / 2 - 1;

    this.tileCursor = new TileCursor(
      this.canvas,
      centerTileX,
      centerTileY,
      this.tileSize
    );

    KeyManager.setupEvents();

    requestAnimationFrame(this.animate.bind(this));
  }
  animate() {
    setTimeout(() => {
      requestAnimationFrame(this.animate.bind(this));
      this.canvas.clear();
      this.canvas.drawGrid(this.w, this.h, this.tileSize);
      this.tileCursor.move();
      this.tileCursor.blink();
      this.tileCursor.draw();
    }, 1 / this.fps * 1000);
  }
}

new World();

hi sir, i want to learn phaser framework