在 HTML5 畫布中創建帶有碎片的方格板
[英]Creating a checkered board with pieces in HTML5 canvas
問題描述
我正在嘗試使用 HTML 和 JS 中的畫布，並嘗試繪制棋盤的畫布，棋盤的每一面都有 16 個棋子。 我能夠創建國際象棋棋盤，但我一直堅持如何只在每一側繪制 16 個棋子（這些棋子可以只是圓圈，所以只有一側有 16 個紅色圓圈，一側有 16 個藍色圓圈）。
我不知道為什么這讓我如此困惑，我知道您可能只需要一個 for 循環在特定坐標處停止，但是要在每一側獲得不同顏色的部分以及在某些部分停止給我帶來了麻煩。
我只想幫助我將棋子放在我的代碼中的哪個位置。如果您可以修改我當前的代碼並在您進行更改的位置添加注釋，以便我可以看到，那將非常感激。
到目前為止，這是我制作棋盤的內容：
<canvas id="canvas" width="300" height="300"></canvas>
function drawCheckeredBackground(can, nRow, nCol) {
var ctx = can.getContext("2d");
var w = can.width;
var h = can.height;
nRow = nRow || 8;
nCol = nCol || 8;
w /= nCol;
h /= nRow;
for (var i = 0; i < nRow; ++i) {
for (var j = 0, col = nCol / 2; j < col; ++j) {
ctx.rect(2 * j * w + (i % 2 ? 0 : w), i * h, w, h);
}
}
ctx.fill();
}
var canvas = document.getElementById("canvas");
drawCheckeredBackground(canvas);
這是我希望國際象棋棋盤的樣子，像這樣每邊 16 個棋子。 我很快就用油漆做了這個例子： https : //i.imgur.com/BvbxzSZ.png
2 個解決方案
解決方案1
1 2018-07-27 00:58:10
這可能不是最漂亮的解決方案，但它應該提供一些基本的想法，並且可以使用您的step變量想法進行調整。 很有可能，您需要在購買實際作品時進行重構。
const drawBoard = (ctx, step) => { for (let i = 0; i < 8; i++) { for (let j = 0; j < 8; j++) { ctx.fillStyle = (i + j) & 1 ? "black" : "white"; ctx.fillRect(j * step, i * step, step, step); } } }; const drawPieces = (ctx, y, color, step) => { ctx.fillStyle = color; for (let i = y; i < 2 * step + y; i += step) { for (let j = step / 2; j < 8 * step; j += step) { ctx.beginPath(); ctx.arc(j, i - step / 2, step / 3, 0, Math.PI * 2); ctx.fill(); } } }; const step = 60; const c = document.createElement("canvas"); c.height = c.width = step * 8; document.body.appendChild(c); const ctx = c.getContext("2d"); drawBoard(ctx, step); drawPieces(ctx, step, "red", step); drawPieces(ctx, step * 7, "blue", step);
解決方案2
-1 2018-07-27 15:35:19
<!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background-color: black; } canvas { display: block; margin: auto; border: solid 1px white; border-radius: 10px; } </style> </head> <body> <canvas id="canvas"></canvas> <script type="application/javascript"> // Self executing function void function() { // Turn on strict js rules for this scope "use strict"; // Classes function ChessPeice(x,y,radius) { this.x = x || 0.0; this.y = y || 0.0; this.radius = radius || 1.0; } ChessPeice.prototype = { tick: function() { }, render: function(ctx) { ctx.moveTo( this.x + this.radius, this.y ); ctx.arc( this.x, this.y, this.radius, 0.0, 2.0 * Math.PI, false ); } }; // Constructor, when called with 'new' creates an object and puts it // in the 'this' variable, new properties can then be added to it. function Chessboard(width,height) { this.boardWidth = width || 1; this.boardHeight = height || 1; this.tileWidth = this.boardWidth / this.H_TILE_COUNT; this.tileHeight = this.boardHeight / this.V_TILE_COUNT; this.whitePeices = []; this.blackPeices = []; for (var y = 0; y < 2; ++y) { for (var x = 0; x < this.V_TILE_COUNT; ++x) { this.whitePeices.push( new ChessPeice( x * this.tileWidth + (this.tileWidth >> 1), y * this.tileHeight + (this.tileHeight >> 1), this.CHESS_PIECE_RADIUS ) ); this.blackPeices.push( new ChessPeice( x * this.tileWidth + (this.tileWidth >> 1), (this.V_TILE_COUNT - 1 - y) * this.tileHeight + (this.tileHeight >> 1), this.CHESS_PIECE_RADIUS ) ); } } } // Prototype object, all objects created with 'new Chessboard()' // will share the properties in the prototype, use it for constant values // & class functions Chessboard.prototype = { H_TILE_COUNT: 8, // How many white & black tiles per axis? V_TILE_COUNT: 8, EDGE_THICKNESS: 10.0, EDGE_COLOUR: "#603E11FF", WHITE_TILE_COLOUR: "#BBBBBBFF", BLACK_TILE_COLOUR: "#555555FF", CHESS_PIECE_RADIUS: 5.0, WHITE_PIECE_COLOUR: "#EEEEEEFF", BLACK_PIECE_COLOUR: "#333333FF", tick: function() { // You can add game logic here }, render: function(ctx) { // Draw white tiles var x = 0; var y = 0; var totalTiles = this.H_TILE_COUNT * this.V_TILE_COUNT; ctx.fillStyle = this.WHITE_TILE_COLOUR; ctx.beginPath(); for (var i = 0; i < totalTiles; ++i) { ctx.rect( x * this.tileWidth, y * this.tileHeight, this.tileWidth, this.tileHeight ); x += 2; if (x >= this.H_TILE_COUNT) { x = this.H_TILE_COUNT - x + 1; ++y; } } ctx.fill(); // Draw black tiles x = 1; y = 0; ctx.fillStyle = this.BLACK_TILE_COLOUR; ctx.beginPath(); for (var i = 0; i < totalTiles; ++i) { ctx.rect( x * this.tileWidth, y * this.tileHeight, this.tileWidth, this.tileHeight ); x += 2; if (x >= this.H_TILE_COUNT) { x = this.H_TILE_COUNT - x + 1; ++y; } } ctx.fill(); // Draw edge ctx.lineWidth = this.EDGE_THICKNESS >> 1; ctx.strokeStyle = this.EDGE_COLOUR; ctx.beginPath(); ctx.rect(0,0,this.boardWidth,this.boardHeight); ctx.stroke(); // Draw white pieces ctx.lineWidth = 2; ctx.strokeStyle = "#000000FF"; ctx.fillStyle = this.WHITE_PIECE_COLOUR; ctx.beginPath(); for (var i = 0; i < this.whitePeices.length; ++i) { this.whitePeices[i].render(ctx); } ctx.fill(); ctx.stroke(); // Draw black pieces ctx.lineWidth = 2; ctx.strokeStyle = "#000000FF"; ctx.fillStyle = this.BLACK_PIECE_COLOUR; ctx.beginPath(); for (var i = 0; i < this.blackPeices.length; ++i) { this.blackPeices[i].render(ctx); } ctx.fill(); ctx.stroke(); } }; // Variables var canvasWidth = 160; var canvasHeight = 160; var canvas = null; var ctx = null; var board = null; // Game Loop function loop() { // Tick (Update game logic) board.tick(); // Render ctx.fillStyle = "gray"; ctx.fillRect(0,0,canvasWidth,canvasHeight); board.render(ctx); // requestAnimationFrame(loop); } // Entry Point (Runs when the page loads) onload = function() { canvas = document.getElementById("canvas"); canvas.width = canvasWidth; canvas.height = canvasHeight; ctx = canvas.getContext("2d"); board = new Chessboard(canvasWidth,canvasHeight); loop(); } }(); </script> </body> </html>
HTML5 畫布方格圖案
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.