Javascript 如何仅使用context.save/context.restore、if语句、画布和动画制作一个tic-tac-toe游戏？

如何仅使用context.save/context.restore、if语句、画布和动画制作tic-tac-toe游戏？我还试图使它，如果图像X显示在框1中，图像O不能显示在同一个框中，所以你不能作弊

我不知道如何防止有人把图像O放在图像X上，反之亦然。有人，请告诉我一种方法，防止人们在X上加O，反之亦然

这就是我目前所拥有的

重新启动
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（'2d'）；
变量c1=1
变量c2=1
变量c3=1
变量c4=1
变量c5=1
变量c6=1
变量c7=1
变量c8=1
变量c9=1
var cup1=2
var cup2=2
var cup3=2
var cup4=2
var cup5=2
var cup6=2
var cup7=2
var cup8=2
var cup9=2
//水平线和垂直线
context.beginPath（）；
上下文。移动到（40145）；
上下文。lineTo（360145）；
context.lineWidth=5
context.lineCap='round'；
stroke（）；
context.beginPath（）；
上下文。移动到（40260）；
lineTo（360260）；
context.lineCap='round'；
stroke（）；
context.beginPath（）；
上下文。moveTo（260,40）；
上下文。lineTo（260360）；
context.lineCap='round'；
stroke（）；
context.beginPath（）；
上下文。moveTo（140,40）；
lineTo（140360）；
context.lineCap='round'；
stroke（）；
context.font=“italic bold 30pt Calibri”
上下文。填充文本（“1”，75，325）；
上下文。填充文本（“2”，190，325）；
上下文。填充文本（“3”，305，325）；
上下文。填充文本（“4”，75，215）；
上下文。填充文本（“5”，190，215）；
上下文。填充文本（“6”，305，215）；
上下文。填充文本（“7”，75，105）；
上下文。填充文本（“8”，190，105）；
上下文。填充文本（“9”，305，105）；
函数重新启动（）{
文档。位置。重新加载（true）；
}
document.onkeydown=Nombre；
Nombreup1=49；Nombreup2=50；Nombreup3=51；
Nombreup4=52；Nombreup5=53；Nombreup6=54；
Nombreup7=55；nombrup8=56；Nombreup9=57；
Nombre7=103；Nombre8=104；Nombre9=105；
Nombre4=100；Nombre5=101；Nombre6=102；
Nombre3=99；Nombre2=98；Nombre1=97；
函数名（e）{
ToucheCournate=e.keyCode；
if（touchecourant==Nombre7）{
lettreO7（）；
}else if（ToucheCournate==Nombre8）{
lettreO8（）；
}else if（ToucheCournate==Nombre9）{
lettreO9（）；
}else if（ToucheCournate==Nombre6）{
lettreO6（）；
}else if（ToucheCournate==Nombre5）{
lettreO5（）；
}else if（ToucheCournate==Nombre4）{
lettreO4（）；
}否则如果（ToucheCournate==Nombre3）{
lettreO3（）；
}否则如果（ToucheCournate==Nombre2）{
lettreO2（）；
}否则如果（ToucheCournate==Nombre1）{
lettreO1（）；
}
/////////////////////////////////////////
if（touchecourant==Nombreup7）{
lettreX7（）；
}否则如果（ToucheCournate==Nombreup8）{
lettreX8（）；
}否则如果（ToucheCournate==Nombreup9）{
lettreX9（）；
}否则如果（ToucheCournate==Nombreup6）{
lettreX6（）；
}else if（ToucheCournate==Nombreup5）{
lettreX5（）；
}else if（ToucheCournate==Nombreup4）{
lettreX4（）；
}else if（ToucheCournate==Nombreup3）{
lettreX3（）；
}否则如果（ToucheCournate==Nombreup2）{
lettreX2（）；
}否则如果（ToucheCournate==Nombreup1）{
lettreX1（）；
}
}
函数lettreO1（）
{
lettreO=新图像（）；
lettreO.src='O.jpg'；
lettreO.onload=函数（）{
背景。drawImage（lettreO，40265,95,93）；
}
}
函数lettreX1（）
{
lettreX=新图像（）；
lettreX.src='X.PNG'；
lettreX.onload=函数（）{
drawImage（lettreX，40265,95,93）；
}
}
函数lettreO2（）
{
lettreO=新图像（）；
lettreO.src='O.jpg'；
lettreO.onload=函数（）{
drawImage（lettreO，145，265110,93）；
}
}
函数lettreX2（）
{
lettreX=新图像（）；
lettreX.src='X.PNG'；
lettreX.onload=函数（）{
drawImage（lettreX，145，265110,93）；
}
}
函数lettreO3（）
{
lettreO=新图像（）；
lettreO.src='O.jpg'；
lettreO.onload=函数（）{
context.drawImage（lettreO
// Line horizontale et verticale 

context.fillText("9", 305, 105);

    var KEYBOARD = {
        NUMBER_UP_1: 49,
        ...
        NUMBER_UP_9: 57,
        NUMBER_1: 97,
        ...
        NUMBER_9: 105,
    };

function memorizeMove(memoryContext, letter, position) {
    memoryContext.fillStyle = letter === `O` ? 'red' : 'blue';
    var coords = getCoordinatesFromPosition(position);
    memoryContext.fillRect(coords.x, coords.y, 1, 1);
}

function letterAt(memoryContext, position) {
    var color = getPixelAt(memoryContext, position);

  return color === 'red' 
    ? 'O'
    : color === 'blue'
        ? 'X'
      : '';
}

function getPixelAt(memoryContext, position) {
  var coords = getCoordinatesFromPosition(position);
  var pixel = memoryContext.getImageData(coords.x, coords.y, 1, 1);
  var data = pixel.data;
  var red = data[0];
  var blue = data[2];
  var color = '';
  if (red === 255) {
    color = 'red';
  } else if (blue === 255) {
    color = 'blue';
  }
  return color;
}

function getCoordinatesFromPosition(position) {
    var x = [1, 4, 7].includes(position) 
        ? 0
        : [2, 5, 8].includes(position) 
            ? 1
            : 2;
    var y = position < 4 
        ? 2
        : position < 7
            ? 1
            : 0;
    return { x: x, y: y };
}

function winOrLoss(memoryContext) {
    var letters = [];
    for (var i = 1; i <= 9; i++) {
        letters.push(letterAt(memoryContext, i));
  }

  if (letters[0] === letters[1] && letters[1] === letters[2] && letters[0] !== ''
        || letters[3] === letters[4] && letters[4] === letters[5] && letters[3] !== ''
        || letters[6] === letters[7] && letters[7] === letters[8] && letters[6] !== ''
        || letters[0] === letters[3] && letters[3] === letters[6] && letters[0] !== ''
        || letters[1] === letters[4] && letters[4] === letters[7] && letters[1] !== ''
        || letters[2] === letters[5] && letters[4] === letters[8] && letters[2] !== ''
        || letters[0] === letters[4] && letters[4] === letters[8] && letters[0] !== ''
        || letters[2] === letters[4] && letters[4] === letters[7] && letters[2] !== ''
      ) {
    return letters[0];
  }
}