Question

我有以下代码，允许用户与表进行交互以创建井字游戏，如何更改它以替换＆＃39; X＆＃39;和＆＃39; O＆＃39;文字与图像相反？这样，当用户点击正方形时，会显示图像而不是纯文本？

<!DOCTYPE html>
  <html>
  <head>
  <title>tic-tac-toe</title>
  <style>
     td { border: 1px solid black;
          width: 2em;
          height: 2em;
          margin: 0em;
          text-align: center;
          vertical-align: middle;
     }
     div.RedBG  { background-color: #f00; }
     td.BlueBG  { background-color: white; }
  </style>
  </head>
  <body>
  <center><table id="t1"></table></center>
  <div id="m1"></div>
  <script>
     var board = var board = [[0,0,0],[0,0,0],[0,0,0]];
     var free  = 9;
     var turn  = 0;

     function numToLetter(num) {
        switch (num) {
           case 0: return " "
           case 1: return "O"
           case 2: return "X"
        }
     }

     function clearMessage() {
        m1 = document.getElementById("m1");
        m1.style.display = "none";
     }

     function showMessage(message,style) {
        m1 = document.getElementById("m1");
        m1.innerHTML = message;
        m1.style.display = "block";
        m1.className = style;
     }
    ...

Answer 1

更改numToLetter函数以返回td中包含的图像的来源或将源指定给图像......

我认为返回源代码会更容易和更清洁。

在这种情况下：在numToLetter调用代码中将源分配给适当的网格方...

function numToSource(num) {
    switch (num) {
       case 0: return "path/to/blank.png";
       case 1: return "path/to/O.png";
       case 2: return "path/to/X.png";
    }
 }

function assignImageSource(gridId, num){
      var element = document.getElementById(gridId);
      var source = numberToSource(num);
      element.src = source;  
}

用户与javascript的互动？

1 个答案: