Кроссворд с помощью JavaScript или HTML

-1

Please see this image to read the actual assignment Кроссворд с помощью JavaScript или HTML

мне нужно сделать этот кроссворд, я совершенно новое в области ИТ, однако я пытался очень трудно сделать это, как я должен представить это как задание, чтобы получить работа в веб-разработке. Я с трудом решаю использовать таблицу 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>

Готово !! & & Done !! Еще раз спасибо Alvaro Flaño Larrondo.

источник

2015-09-28 10:08:36

Рад, что я мог бы помочь;) –

ответ

Смежные вопросы