如何在棋盘格的正方形上绘制圆圈，使其看起来像真正的棋盘格? [英] How do I draw circles on a checker-board's squares to make it look like a real checker-board?
问题描述
我设法用JavaScript和画布绘制了一个棋盘.我现在遇到的问题是确保我的代码像下面的真实检查器图片一样给出输出:
I have managed to draw a checker-board with JavaScript and canvas. The problem I have now is making sure my code gives output like the real checker picture here:
我如何使用JavaSCript代码使其在矩形上绘制圆以产生类似于真实棋子的输出?
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?
玩家1圈应该是红色，玩家2圈应该是黑色.
Player one circles should be red, player two circles should be black.
这是我的checkers文件的代码:
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>推荐答案
就像您之前的问题一样，一个好的答案取决于一个好的表示形式.如果您要构建一个真实的游戏，那么游戏代码将要说明要绘制哪个棋子的正方形，就像这样.
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.
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>这篇关于如何在棋盘格的正方形上绘制圆圈，使其看起来像真正的棋盘格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
