92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
const cellSize = 150;
|
|
const size = cellSize * 3;
|
|
const margin = 10;
|
|
|
|
let ctx = undefined;
|
|
let initialPos = undefined;
|
|
let circle = true;
|
|
|
|
function resizeCanvas() {
|
|
ctx.canvas.width = window.innerWidth;
|
|
ctx.canvas.height = window.innerHeight;
|
|
}
|
|
|
|
function drawGrid() {
|
|
ctx.strokeStyle = "white";
|
|
ctx.lineWidth = 5;
|
|
|
|
for (let x = 1; x < 3; ++x) {
|
|
ctx.moveTo(initialPos.x + x * cellSize, 0 + initialPos.y);
|
|
ctx.lineTo(initialPos.x + x * cellSize, initialPos.y + size);
|
|
}
|
|
|
|
for (let y = 1; y < 3; ++y) {
|
|
ctx.moveTo(initialPos.x + 0, initialPos.y + y * cellSize);
|
|
ctx.lineTo(initialPos.x + size, initialPos.y + y * cellSize);
|
|
}
|
|
|
|
ctx.stroke();
|
|
}
|
|
|
|
|
|
function drawCircle(x, y) {
|
|
ctx.beginPath();
|
|
// arc(x, y, radius, startAngle, endAngle)
|
|
ctx.arc(x, y, 50, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawCross(x, y) {
|
|
startPoint = { x: x-50, y: y-50 };
|
|
ctx.beginPath();
|
|
ctx.moveTo(startPoint.x, startPoint.y);
|
|
ctx.lineTo(startPoint.x + 100, startPoint.y + 100);
|
|
ctx.moveTo(startPoint.x + 100, startPoint.y);
|
|
ctx.lineTo(startPoint.x, startPoint.y + 100);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function init() {
|
|
const canvas = document.getElementById("canvas");
|
|
if (canvas.getContext) {
|
|
ctx = canvas.getContext("2d");
|
|
resizeCanvas(ctx); // Init canvas
|
|
ctx.fillStyle = "red";
|
|
|
|
initialPos = {
|
|
x: ctx.canvas.width / 2 - size / 2,
|
|
y: ctx.canvas.height / 2 - size / 2
|
|
};
|
|
|
|
ctx.fillRect(initialPos.x, initialPos.y, 5, 5); // origin of grid
|
|
|
|
canvas.addEventListener("click", (evt) => {
|
|
const {clientX, clientY} = evt;
|
|
// Coord relative to origin of the grid (initialPos)
|
|
const pt = { x: clientX - initialPos.x, y: clientY - initialPos.y };
|
|
const gridIndex = {
|
|
x: Math.floor(3 * pt.x / size),
|
|
y: Math.floor(3 * pt.y / size)
|
|
};
|
|
if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
|
|
ctx.fillStyle = "blue";
|
|
const center = {
|
|
x: initialPos.x + gridIndex.x * cellSize + cellSize/2,
|
|
y: initialPos.y + gridIndex.y * cellSize + cellSize/2
|
|
};
|
|
if (circle) drawCircle(center.x, center.y);
|
|
else drawCross(center.x, center.y);
|
|
circle = !circle;
|
|
}
|
|
});
|
|
|
|
//window.addEventListener('resize', () => resizeCanvas(ctx));
|
|
//window.requestAnimationFrame(time => update(ctx, time))
|
|
|
|
drawGrid(ctx);
|
|
}
|
|
}
|
|
|
|
init();
|
|
|