-1

実際の割り当てを読むには、この画像を参照してください

このクロスワード パズルを作成する必要があります。私は IT の初心者ですが、Web 開発の仕事を得るために課題として提出しなければならないので、これを作成するのに非常に苦労しました。パズルの背景色を変更した HTML テーブルを使用するか、このクロスワードを作成するために 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>

4

5 に答える 5

8

私はこれを行うべきではないことを知っていますが、私は挑戦が好きだったので、この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-23T18:56:36.760 に答える
1 

<!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>

終わり！！＆＆ 終わり！！アルバロ・フラニョ・ラロンドに感謝します。

于 2015-09-28T10:08:36.847 に答える
0

Exolve ( https://github.com/viresh-ratnakar/exolve ) を参照して、インタラクティブに解けるクロスワードを非常に簡単に設定してください。Exolve はオープン ソースで無料です (MIT ライセンス)。

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>
于 2020-04-08T21:45:50.863 に答える