[英]Draw a board on canvas with Javascript objects
I want to create a simple game with Javascript and using canvas to show it. 我想用Javascript创建一个简单的游戏,并使用画布显示它。 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. 我试图使函数drawBoard(Board的原型)使用this.width和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... 原因:此棋盘对象将包含玩家/武器...
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. 您需要使用Board.prototype.drawBoard = function() {....
然后,当您调用drawBoard()
您应这样称呼它: board.drawBoard()
因为它是board
对象的一种方法。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.