我正在尝试创建一个井字游戏，用户可以在上面画图并拥有计算机 识别是x还是o，然后相应地移动。用户绘画和用户 按下“完成”按钮，该按钮触发一个确定它是x还是o的功能。对于一些 为什么简单的形状给了我很多拦截，但是有人可以看到我的代码有问题吗？
window.addEventListener("load", ()=>{
//make rectangles all over the titles and track cordinates and have the computer not allow anything outside of it
const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
var timerVar;
var totalSeconds = 0;
var position = 40;
var cc = 0;
var positionArrayX = [];
var positionArrayY = [];
// Dynamic sizing based on window size
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
context.fillRect(475,10,10,600);
context.fillRect(700,10,10,600);
context.fillRect(300,200,600,10);
context.fillRect(300,400,600,10);
//creating button
const path = new Path2D()
path.rect(25,72,100,50);
path.closePath();
context.font = "20px Arial";
context.fillText("Clear",45,100,100,50);
context.fillStyle = "#FFFFFF"
context.fillStyle = "rgba(225,225,225,0.5)"
context.fill(path)
context.lineWidth = 2
context.strokeStyle = "#000000"
context.stroke(path)
//creating button
const path2 = new Path2D()
path2.rect(25,150,100,50);
path2.closePath();
context.font = "20px Arial";
context.fillStyle = "#000000"
context.fillText("Done",50,182,100,50);
context.fillStyle = "#FFFFFF"
context.fillStyle = "rgba(225,225,225,0.5)"
context.fill(path2)
context.lineWidth = 2
context.strokeStyle = "#000000"
context.stroke(path2)
let painting = false;
// Whether the user is painting or not is tracked to know when to stop
// drawing and start a new line
function startPosition(){
painting = true;
}
//function for the button
function get_XY(canvas, event){
const rect = canvas.getBoundingClientRect()
const y = event.clientY - rect.top
const x = event.clientX - rect.left
return {x:x, y:y}
}
//listens for the button click
canvas.addEventListener("click", function (e) {
//stops drawing on the button
painting = false;
const XY = get_XY(canvas, e)
// if button at location is clicked perform clear operation
if(context.isPointInPath(path, XY.x, XY.y)) {
cc = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
// Dynamic sizing based on window size
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
context.fillRect(475,10,10,600);
context.fillRect(700,10,10,600);
context.fillRect(300,200,600,10);
context.fillRect(300,400,600,10);
//creating button
const path = new Path2D()
path.rect(25,72,100,50);
path.closePath();
context.font = "20px Arial";
context.fillText("Clear",45,100,100,50);
context.fillStyle = "#FFFFFF"
context.fillStyle = "rgba(225,225,225,0.5)"
context.fill(path)
context.lineWidth = 2
context.strokeStyle = "#000000"
context.stroke(path)
//creating button
const path2 = new Path2D()
path2.rect(25,150,100,50);
path2.closePath();
context.font = "20px Arial";
context.fillStyle = "#000000"
context.fillText("Done",50,182,100,50);
context.fillStyle = "#FFFFFF"
context.fillStyle = "rgba(225,225,225,0.5)"
context.fill(path2)
context.lineWidth = 2
context.strokeStyle = "#000000"
context.stroke(path2)
}
else if (context.isPointInPath(path2, XY.x, XY.y))
{
context.fillText(positionArrayX.length,230,40,100,50);
const intercep = compare(positionArrayX,positionArrayY);
if (intercep == 0 || intercep % 2 != 0)
{
context.fillStyle = "#1438c7";
context.fillText(intercep,200,182,100,50);
}
else if (intercep % 2 == 0)
{
context.fillStyle = "#1438c7";
context.fillText(intercep,200,182,100,50);
}
}
}, false)
function finishedPosition(){
painting = false;
context.beginPath();
}
function compare(positionArrayX,positionArrayY){
var i = 0;
var j = 0;
var positioner = 0;
var intercepts = 0;
for(i=0;i <= positionArrayX.length;i++){
for(j=0;j<=positionArrayX.length;j++){
if(positionArrayX[j] === positionArrayX[i] && i != j)
{
positioner = positioner + 50
context.fillText("(",30,60 + positioner,100,50);
context.fillText(positionArrayX[i],35,40 + positioner + 15,100,50);
context.fillText(",",70,60+ positioner,100,50);
context.fillText(positionArrayY[i],75,40 + positioner + 15,100,50);
context.fillText(")",110,60+ positioner,100,50);
context.fillText("(",130,60+ positioner,100,50);
context.fillText(positionArrayX[j],150,40 + positioner + 15,100,50);
context.fillText(",",180,60+ positioner,100,50);
context.fillText(positionArrayY[j],200,40 + positioner + 15,100,50);
context.fillText(")",230,60+ positioner,100,50);
if ((positionArrayY[j] == positionArrayY[i]))
{
intercepts++;
}
}
}
}
return intercepts
}
function draw(e){
if(!painting){
return;
}
// line settings
context.lineWidth = 20;
context.lineCap = "round";
// actual drawing starts
context.lineTo(e.clientX, e.clientY);
context.stroke();
context.beginPath();
context.moveTo(e.clientX,e.clientY);
positionArrayX[cc] = e.clientX;
positionArrayY[cc] = e.clientY;
context.clearRect(0, 0, 300,50);
context.fillText("(",30,40,100,50);
context.fillText(positionArrayX[cc],35,40,100,50);
context.fillText(",",70,40,100,50);
context.fillText(positionArrayY[cc],75,40,100,50);
context.fillText(")",110,40,100,50);
cc++;
}
// EventListeners
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove",draw);
});