縱橫字謎

-1

Please see this image to read the actual assignment 縱橫字謎

我需要做這個填字遊戲，我在IT全新的，但我一直很努力，使這是我必須提交此作爲作業呢網絡開發工作。我很難決定使用背景顏色改變爲拼圖的HTML表格，或者我製作一個javascript多維數組來製作這個填字遊戲。

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

 

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

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

 
</style> 
 
</head> 
 
<body> 
 
<div id="leftBox"> 
 
<table id="puzzel"> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
    </tr> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
    </tr> 
 
    <tr> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross">?</td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
\t <td id="cross" bgcolor="#000000"></td> 
 
    </tr> 
 
</table> 
 
</div> 
 
<div id="rightBox"> 
 
<table> 
 
\t <tr><td><input id="butt" type="submit" value="Clear All"></td></tr> 
 
\t <tr><td><input id="butt" type="submit" value="Check"></td></tr> 
 
\t <tr><td><input id="butt" type="submit" value="Solve"></td></tr> 
 
\t <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 { 
 
\t width:330px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border-collapse: collapse; 
 
\t border: 1px solid black; 
 
} 
 
#cross{ 
 
\t text-align: center; 
 
\t width:30px; 
 
\t height:30px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border-collapse: collapse; 
 
\t border: 1px solid white; 
 
} 
 

 

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

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

 
</style> 
 

 
<script> 
 

 
function initializeScreen(){ 
 

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

 
\t var puzzelArrayData = preparePuzzelArray(); 
 

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

 
} 
 

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

 
</body> 
 
</html>

來源

2015-09-22 Prasad K

可能是JavaScript，我假設它會有某種功能。 –

是的，請參閱鏈接https://drive.google.com/file/d/0B00URazV5RS1djB2NFZrclMwb0k/view?usp=sharing –

中的圖片我看到了，您是否對某個特定的作業有疑問？你問的只是用JS或HTML來填字遊戲。 –

我知道我不應該這樣做，但我喜歡挑戰，所以我在此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。

來源

2015-09-23 18:56:36

Wooooo！驚人的工作阿爾瓦羅·弗拉尼奧拉羅多。我只能使用JS。真的很棒的工作。 –

至少現在我有一段路要走。不能謝謝你。 –

如果您喜歡這個答案並且它很有幫助，請將它提高一點，然後選擇作爲作者反饋的可接受答案，併爲將來尋找類似內容的人提供參考。 –

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

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

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

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

 
</body> 
 
</html>

完成！ & &完成！再次感謝AlvaroFlañoLarrondo。

來源

2015-09-28 10:08:36

很高興能幫到;） –

回答

相關問題