使用 JavaScript 或 HTML 的填字游戏

Question

Please see this image to read the actual assignment

我需要制作这个填字游戏，我在 IT 领域是全新的，但是我一直在非常努力地制作它，因为我必须将其作为作业提交才能获得 Web 开发工作。我很难决定使用背景颜色已更改的 HTML table 还是制作一个 javascript 多维数组来制作这个填字游戏。

<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
 width:100%;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border: 1px solid black;
}
#cross{
 text-align: center;
 width:30px;
 height:30px;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border: 1px solid white;
}


#buttons{
 width:30%;
 float: right;

}
tr{
 margin: 0;
 padding: 0;
 border-collapse: collapse;
}
#leftBox{
 float: left;
 width:50%
 height: 50%;
}
#rightBox{
 float: left;
}
#butt{
 width: 100px;
 padding:20px;
}
table{
 padding:20px;
}

</style>
</head>
<body>
<div id="leftBox">
<table id="puzzel">
  <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
  <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
   <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
  <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
  </tr>
  <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
  </tr>
   <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
  </tr>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
  </tr>
   <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
  </tr>
   <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
  <tr>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
    <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
</table>
</div>
<div id="rightBox">
<table>
 <tr><td><input id="butt"  type="submit" value="Clear All"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Check"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Solve"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Clue"></td></tr>
</table>

</body>
</html>

我也试过了。

<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
 width:330px;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border: 1px solid black;
}
#cross{
 text-align: center;
 width:30px;
 height:30px;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border: 1px solid white;
}


#buttons{
 width:30%;
 float: right;

}
tr{
 margin: 0;
 padding: 0;
 border-collapse: collapse;
}
#leftBox{
 float: left; 
}
#rightBox{
 float: left;
}
#butt{
 width: 100px;
}

</style>

<script>

function initializeScreen(){

 var puzzelTable = document.getElementById("puzzel");

 var puzzelArrayData = preparePuzzelArray();

 for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
  var row = puzzelTable.insertRow(-1);
  var rowData = puzzelArrayData[i];
  for(var j = 0 ; j < rowData.length ; j++){
   var cell = row.insertCell(-1);
   if(rowData[j] != 0){
    cell.innerHTML = rowData[j];
   }else{
    cell.innerHTML = "1";
    cell.style.backgroundColor  = "black";
   }
  }
 }

}

function preparePuzzelArray(){
var items = [ [0, 0, 0, 0, '?', 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, '?', 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, '?', 0, '?', 0, 0, 0, 0],
    [0, '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'],
    [0, 0, 0, 0, 0, 0, '?', 0, 0, 0, '?'],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
   ];
return items;
}
</script>
</head>
<body onload="initializeScreen()">
<div id="leftBox">
<table id="puzzel">
</table>
</div>
<div id="rightBox">
<table>
 <tr><td><input id="butt"  type="submit" value="Clear All"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Check"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Solve"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Clue"></td></tr>
</table>

</body>
</html>

Answer 1

我知道我不应该这样做，但我喜欢挑战，所以我想出了一个解决方案 JSFiddle

它使用以下标记

<div id="puzzle_container">
    <table id="puzzle">
    </table>
</div>

<div id="hints_container">
    <h3>Vertical</h3>
        <div id="vertical_hints_container"></div>
    <h3>Horizontal</h3>
        <div id="horizontal_hints_container"></div>
</div>

<div id="buttons_container">
    <button id="clear_all">Clear All</button>
    <button id="check">Check</button>
    <button id="solve">Solve</button>
    <button id="clue">Clue</button>
</div>

和jQuery.

Answer 2

<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>

#cross{
 text-align: center;
 width:30px;
 height:30px;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border: 1px solid white;
}
#buttons{
 width:30%;
 float: right;
}
tr{
 margin: 0;
 padding: 0;
 border-collapse: collapse;
}
td{
 height: 30px;
 width: 30px;
}
#leftBox{
 float: left;
}
#rightBox{
 float: left;
 clear:left;
}
.butt{
 height:50px;
 width: 107px;
}
#puzzel{
 text-align: center;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border: 1px solid black;
}
.inputBox{
  width: 40px;
  height:40px;
  border: 1px solid black;
  text-align: center;
}
#hintsTable{
 width: 480px;
 float: left;
 clear: left;
}
</style>

<script>
//Globals
var currentTextInput;
var puzzelArrayData;
//Loads the Crossword
function initializeScreen(){
 var puzzelTable = document.getElementById("puzzel");
 puzzelArrayData = preparePuzzelArray();
 for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
  var row = puzzelTable.insertRow(-1);
  var rowData = puzzelArrayData[i];
  for(var j = 0 ; j < rowData.length ; j++){
   var cell = row.insertCell(-1);
   if(rowData[j] != 0){
    var txtID = String('txt' + '_' + i + '_' + j);
    cell.innerHTML = '<input type="text" class="inputBox" maxlength="1" style="text-transform: lowercase" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
   }else{
    cell.style.backgroundColor  = "black";
   }
  }
 }
 addHint();
}
//Adds the hint numbers
function addHint(){
 document.getElementById("txt_0_4").placeholder = "1";
 document.getElementById("txt_2_6").placeholder = "2";
 document.getElementById("txt_3_1").placeholder = "3";
 document.getElementById("txt_3_9").placeholder = "4";
 document.getElementById("txt_6_2").placeholder = "5";
 document.getElementById("txt_9_0").placeholder = "6";
}
//Stores ID of the selected cell into currentTextInput
function textInputFocus(txtID123){
 currentTextInput = txtID123;
}
//Returns Array
function preparePuzzelArray(){
var items = [ [0, 0, 0, 0, 'p', 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 'u', 0, 0, 0, 0, 0 ],
    [0, 0, 0, 0, 'n', 0, 'b', 0, 0, 0],
    [0, 'h', 'y', 'd', 'e', 'r', 'a', 'b', 'a', 'd'],
    [0, 0, 0, 0, 0, 0, 'n', 0, 0, 'e'],
    [0, 0, 0, 0, 0, 0, 'g', 0, 0, 'l'],
    [0, 0, 'm', 'u', 'm', 'b', 'a', 'i', 0, 'h'],
    [0, 0, 0, 0, 0, 0, 'l', 0, 0, 'i'],
    [0, 0, 0, 0, 0, 0, 'o', 0, 0, 0],
    ['k', 'a', 's', 'h', 'm', 'i','r', 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 'e', 0, 0, 0]
   ];
return items;
}
//Clear All Button
function clearAllClicked(){
 currentTextInput = '';
 var puzzelTable = document.getElementById("puzzel");
 puzzelTable.innerHTML = '';
    initializeScreen();
}
//Check button
function checkClicked(){
 for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
  var rowData = puzzelArrayData[i];
  for(var j = 0 ; j < rowData.length ; j++){
   if(rowData[j] != 0){
    var selectedInputTextElement = document.getElementById('txt' + '_' + i + '_' + j);
    if(selectedInputTextElement.value != puzzelArrayData[i][j]){
     selectedInputTextElement.style.backgroundColor = 'red';
     
    }else{
     selectedInputTextElement.style.backgroundColor = 'white';
    }
   }
  }
 }
}
//Clue Button
function clueClicked(){
 if (currentTextInput != null){
  var temp1 = currentTextInput;
  var token = temp1.split("_");
  var row = token[1];
  var column = token[2];
  document.getElementById(temp1).value = puzzelArrayData[row][column];
  //checkClicked();
 }
}
//Solve Button
function solveClicked(){
 if (currentTextInput != null){
  var temp1 = currentTextInput;
  var token = temp1.split("_");
  var row = token[1];
  var column = token[2];
  
  // Print elements on top
  for(j = row; j >= 0; j--){
   if(puzzelArrayData[j][column] != 0){
    document.getElementById('txt' + '_' + j + '_' + column).value = puzzelArrayData[j][column];
    }else break;
  }
  // Print elements on right
  for(i = column; i< puzzelArrayData[row].length; i++){
   if(puzzelArrayData[row][i] != 0){
    document.getElementById('txt' + '_' + row + '_' + i).value = puzzelArrayData[row][i];
    }else break;
  }
  
  // Print elements below
  for(m = row; m< puzzelArrayData.length; m++){
   if(puzzelArrayData[m][column] != 0){
    document.getElementById('txt' + '_' + m + '_' + column).value = puzzelArrayData[m][column];
    }else break;
  }
  // Print elements on left
  for(k = column; k >= 0; k--){
   if(puzzelArrayData[row][k] != 0){
    document.getElementById('txt' + '_' + row + '_' + k).value = puzzelArrayData[row][k];
    }else break;
  }
  // Done!
  
 }
}
</script>
</head>
<body onload="initializeScreen()">
<div id="leftBox">
<table id="puzzel">

</table>
</div>
<div id="rightBox">
<table>
 <tr><td><input class="butt"  type="submit" value="Clear All" onclick="clearAllClicked()"></td>
 <td><input class="butt"  type="submit" value="Check" onclick="checkClicked()"></td>
 <td><input class="butt"  type="submit" value="Solve" onclick="solveClicked()"></td>
 <td><input class="butt"  type="submit" value="Clue" onclick="clueClicked()"></td></tr>
</table>
</div>
<table id="hintsTable">
  <tr>
   <td><strong>Horizontal:</strong></td><td><strong>Vertical:</strong></td>
  </tr>
  <tr>
   <td>3. Cultural Hub (Hyderabad)</td><td>1. Education Hub (Pune)</td>
  </tr>
  <tr>
   <td>5. India's financial capital (Mumbai)</td><td>2. Information Technology Hub (Bangalore)</td>
  </tr>
  <tr>
   <td>6. Saffron region (Kashmir)</td><td>4. Capital of India (Delhi)</td>
</table>

</body>
</html>

完成！！＆＆完毕！！再次感谢 Alvaro Flaño Larrondo。

Answer 3

这是我的变体。

它是在麻省理工学院的许可下。 Source

DEMO

Answer 4

<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
 width:100%;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border: 1px solid black;
}
#cross{
 text-align: center;
 width:30px;
 height:30px;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border: 1px solid white;
}


#buttons{
 width:30%;
 float: right;

}
tr{
 margin: 0;
 padding: 0;
 border-collapse: collapse;
}
#leftBox{
 float: left;
 width:50%
 height: 50%;
}
#rightBox{
 float: left;
}
#butt{
 width: 100px;
 padding:20px;
}
table{
 padding:20px;
}

</style>
</head>
<body>
<div id="leftBox">
<table id="puzzel">
  <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
  <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
   <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
  <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
  </tr>
  <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
  </tr>
   <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
  </tr>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
  </tr>
   <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
  </tr>
   <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
  <tr>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
    <tr>
    <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross">?</td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
 <td id="cross" bgcolor="#000000"></td>
  </tr>
</table>
</div>
<div id="rightBox">
<table>
 <tr><td><input id="butt"  type="submit" value="Clear All"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Check"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Solve"></td></tr>
 <tr><td><input id="butt"  type="submit" value="Clue"></td></tr>
</table>

</body>
</html>

Answer 5

请查看 Exolve (https://github.com/viresh-ratnakar/exolve)，它可以非常轻松地设置交互式可解填字游戏。 Exolve 是开源且免费的（麻省理工学院许可）。

使用 Exolve，设置可交互式解决的填字游戏（提供或不提供解决方案）就像在 HTML 文件中编辑以下纯文本一样简单：

<script>
const puzzleText = `
======REPLACE WITH YOUR PUZZLE BELOW======
exolve-begin
  exolve-width: 3
  exolve-height: 3
  exolve-grid:
    ACE
    R.R
    EAR
  exolve-across:
    1 Clue for ACE (3)
    3 Clue for EAR (3)
  exolve-down
    1 Clue for ARE (3)
    2 Clue for ERR (3)
exolve-end
======REPLACE WITH YOUR PUZZLE ABOVE======
`;
</script>

使用 JavaScript 或 HTML 的填字游戏

Crossword puzzle using JavaScript or HTML

javascript

css

crossword