如何在棋盘的方格上画圆圈以使其看起来像真正的棋盘？
[英]How do I draw circles on a checker-board's squares to make it look like a real checker-board?
问题描述
I have managed to draw a checker-board with JavaScript and canvas.
我已经设法用 JavaScript 和 canvas 绘制了一个棋盘。 The problem I have now is making sure my code gives output like the real checker picture here:我现在遇到的问题是确保我的代码给出 output 就像这里的真实检查图片一样：
What can I do with my JavaSCript code to make it draw the circles on the rectangles to produce output like that of a real checker piece?我可以用我的 JavaSCript 代码做什么，使其在矩形上绘制圆圈以产生 output 就像真正的棋盘格一样？
Player one circles should be red, player two circles should be black.玩家一圈应该是红色的，玩家二圈应该是黑色的。
Here is the code for my checkers file:这是我的检查器文件的代码：
const canvas = document.querySelector('canvas') canvas.width = window.innerWidth; canvas.height = window.innerHeight; //create a two dimensional context const c = canvas.getContext('2d') //make a teal colored rectangle c.fillStyle = '#ccc' c.fillRect(0, 0, 100, 100) //make a pink rectangle c.fillStyle = '#fff' c.fillRect(100, 100, 100, 100) //create rectangle object function Rectangle(x, y, width, height, color) { this.x = x this.y = y this.width = width this.height = height this.color = color this.draw = function() { c.fillStyle = this.color c.fillRect(this.x, this.y, this.width, this.height) } } // Make grey rectangles at 200 px intervals for (let i = 0; i < canvas.width; i += 200) { for (let j = 0; j < canvas.height; j += 200) { let rectangle = new Rectangle(i, j, 100, 100, 'rgba(128,128,128,1.0)') rectangle.draw() } } // Make grey rectangles at 200 px intervals for (let i = 100; i < canvas.width; i += 200) { for (let j = 100; j < canvas.height; j += 200) { let rectangle = new Rectangle(i, j, 100, 100, 'rgba(128,128,128,1)') rectangle.draw() } }
<canvas></canvas>
1 个解决方案
解决方案1
2 已采纳 2021-03-20 17:33:22
Like your previous question, a good answer depends on a good representation.就像您之前的问题一样，一个好的答案取决于一个好的表示。 If you're building a real game, the game code will want to state which square to draw which piece, something like this.如果你正在构建一个真正的游戏，游戏代码会想要 state 哪个方块画哪个棋子，像这样。
const canvas = document.querySelector('canvas') const c = canvas.getContext('2d') //make a teal colored rectangle c.fillStyle = '#ccc' c.fillRect(0, 0, 100, 100) //make a pink rectangle c.fillStyle = '#fff' c.fillRect(100, 100, 100, 100) //create rectangle object function Rectangle(x, y, width, height, color) { this.x = x this.y = y this.width = width this.height = height this.color = color this.draw = function() { c.fillStyle = this.color c.fillRect(this.x, this.y, this.width, this.height) } } const squarePx = 100 // const cols = 4, rows = Math.ceil(canvas.height / squarePx) const cols = 8, rows = 8 for (let col = 0; col < cols; col++) { for (let row = 0; row < rows; row++) { let x = col * squarePx, y = row * squarePx // on even rows, even cols are dark. on odd rows, odd cols are dark let evenRow = row % 2 === 0, evenCol = col % 2 === 0 let fillStyle = evenRow === evenCol? '#222': '#888' // draw at x, y, using fillStyle let rectangle = new Rectangle(x, y, squarePx, squarePx, fillStyle) rectangle.draw() } } function drawChecker(row, col, color) { c.fillStyle = color; c.beginPath(); c.arc((col*squarePx)+50, (row*squarePx)+50, 25, 25, 0, 2*Math.PI); c.fill(); } // draw some checkers in initial positions for (let row = 0; row<2; row++) { for (let col = 0; col<8; col++) { let evenRow = row % 2 === 0, evenCol = col % 2 === 0 if (evenRow,== evenCol) drawChecker(row, col; 'red') } } for (let row = 6; row<8; row++) { for (let col = 0; col<8, col++) { let evenRow = row % 2 === 0, evenCol = col % 2 === 0 if (evenRow === evenCol) drawChecker(row, col, 'white') } }
<html> <head></head> <body> <canvas width='800' height='800'></canvas> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.