Draw a board on canvas with Javascript objects

Question

I want to create a simple game with Javascript and using canvas to show it. I have an object for the board, and don't understand how to draw the col and row on the canvas, using the board object previously generated.

I have tried to make the function drawBoard, a prototype of Board, to use the this.width and this.height. But it doesn't use these values.

I am quite lost about how to reuse the object properties (width and height) in this function drawing the board. Quite new at canvas.

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

  <title>Lava Temple</title>

<style>
* {
  padding: 0;
  border: 0;
}

body{
  background-color: #181818;
}

#board {
  display: block;
  background-color: white;
  margin: 0 auto;
  margin-top: 100px;
}
</style>

</head>
<body>
    <canvas id="board" width="800" height="800"></canvas>

<script>

function Board(width, height) {
  this.width = width;
  this.height = height;
  this.chartBoard = [];

  for (var i = 0; i < this.width; i++) {
    const row = [];
    this.chartBoard.push(row);
    for (var j = 0; j < this.height; j++) {
        const col = {};
        row.push(col);
    }
  }
}

let board = new Board(10, 10);
console.log(board);

const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');

Board.prototype.drawBoard = drawBoard;

function drawBoard() {

  for (var i = 0; i < this.width; i++) {
    for (var j = 0; j < this.height; j++) {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.strokeRect(j * 80, i * 80, 80, 80);
        ctx.closePath();
    }
  }
}

drawBoard();

</script>

</body>
</html>

Actual results: There is a canvas and a board object create, visible in the console.

Expected results: That this board created is also drawn on the canvas with black strokes.

Why: This board object will then contain the objects Players / Weapons...

enxaneta · Accepted Answer · 2019-01-17 09:00:17Z

You need to use Board.prototype.drawBoard = function() {.... Then when you call drawBoard()you call it like this: board.drawBoard() because it's a method of the board object.

function Board(width, height) {
  this.width = width;
  this.height = height;
  this.chartBoard = [];

  for (var i = 0; i < this.width; i++) {
    const row = [];
    this.chartBoard.push(row);
    for (var j = 0; j < this.height; j++) {
      const col = {};
      row.push(col);
    }
  }
}

Board.prototype.drawBoard = function() {
  for (var i = 0; i < this.width; i++) {
    for (var j = 0; j < this.height; j++) {
      ctx.beginPath();
      ctx.strokeStyle = "black";
      ctx.strokeRect(j * 80, i * 80, 80, 80);
      ctx.closePath();
    }
  }
};

let board = new Board(10, 10);

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");

board.drawBoard();

* {
  padding: 0;
  border: 0;
}

body{
  background-color: #181818;
}

#board {
  display: block;
  background-color: white;
  margin: 0 auto;
  margin-top: 100px;
}

<canvas id="board" width="800" height="800"></canvas>

Collectives™ on Stack Overflow

Draw a board on canvas with Javascript objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related