使用Javascript对象在画布上绘制一块板_Javascript_Object_Canvas

使用Javascript对象在画布上绘制一块板

javascript object canvas

使用Javascript对象在画布上绘制一块板,javascript,object,canvas,Javascript,Object,Canvas,我想用Javascript创建一个简单的游戏，并使用画布来显示它。我有一个用于board的对象，不知道如何使用先前生成的board对象在画布上绘制列和行我试着用this.width和this.height来制作功能drawBoard，一个纸板的原型。但它不使用这些值我完全不知道如何在绘制电路板的函数中重用对象属性（宽度和高度）。在画布上很新 <html> <head> <meta charset="utf-8"> <meta http-equiv=

我想用Javascript创建一个简单的游戏，并使用画布来显示它。我有一个用于board的对象，不知道如何使用先前生成的board对象在画布上绘制列和行

我试着用this.width和this.height来制作功能drawBoard，一个纸板的原型。但它不使用这些值

我完全不知道如何在绘制电路板的函数中重用对象属性（宽度和高度）。在画布上很新

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


熔岩神庙
* {
填充：0；
边界：0；
}
身体{
背景色：#181818；
}
#董事会{
显示：块；
背景色：白色；
保证金：0自动；
边缘顶部：100px；
}
功能板（宽度、高度）{
这个。宽度=宽度；
高度=高度；
this.chartBoard=[]；
对于（var i=0；i


实际结果：有一个画布和一个board对象创建，在控制台中可见
预期结果：创建的这块板也用黑色笔划绘制在画布上
为什么：这个board对象将包含玩家/武器的对象…
您需要使用board.prototype.drawBoard=function（）{..
然后当您调用drawBoard（）
时，您可以这样调用它：board.drawBoard（）
，因为它是board
对象的一种方法

功能板（宽度、高度）{
这个。宽度=宽度；
高度=高度；
this.chartBoard=[]；
对于（var i=0；i

*{
填充：0；
边界：0；
}
身体{
背景色：#181818；
}
#董事会{
显示：块；
背景色：白色；
保证金：0自动；
边缘顶部：100px；
}
您需要使用Board.prototype.drawBoard=function（）{..
然后当您调用drawBoard（）
时，您可以这样调用它：Board.drawBoard（）
，因为它是Board
对象的一种方法

功能板（宽度、高度）{
这个。宽度=宽度；
高度=高度；
this.chartBoard=[]；
对于（var i=0；i

*{
填充：0；
边界：0；
}
身体{
背景色：#181818；
}
#董事会{
显示：块；
背景色：白色；
保证金：0自动；
边缘顶部：100px；
}