Click here for free DL of the app version that can save data.

No:401

411

xianqi
Developer User2949｜Date and time 23/6/13 18:48:57
Build time 91.159 sec｜Game capacity 5.238KB｜

将棋

黒先手から始めます。駒をクリックして動かしてください。

香	桂	銀	金	王	金	銀	桂	香
	飛						角
歩	歩	歩	歩	歩	歩	歩	歩	歩



歩	桂	銀	金	玉	金	銀	桂	香

以上のコードは、JavaScriptを含まなければならないアプリを実装し、1枚のHTMLファイルにまとめたものです。具体的には、将棋というゲームを遊ぶことができます。スマホでの操作にも対応しており、絵文字も多く使用しています。将棋は、先手と後手に分かれて、相手の玉を詰ますことが目的のゲームです。このアプリでは、黒先手から始まり、駒をクリックして動かすことでプレイを行います。着手可能性の判定はまだ実装されていませんが、基本的な駒の動きは実装されています。すべての駒が初期配置され、クリックすることで選択されます。選択された駒は黄色になります。移動先をクリックすると、駒が動き、ターンが交代します。また、現在のターンに応じて先手と後手を切り替えます。

→ 　

1　

0　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>将棋</title>
	<style>
		body {
			font-size: 24px;
			text-align: center;
		}
		.board {
			display: inline-block;
			background-color: #f5deb3;
			border: 1px solid black;
			margin: 20px;
			padding: 10px;
			width: 300px;
			height: 300px;
		}
		.piece {
			font-size: 48px;
		}
	</style>
</head>
<body>
	<h1>将棋</h1>
	<p>黒先手から始めます。駒をクリックして動かしてください。</p>
	<div class="board">
		<table>
			<tr>
				<td id="81" class="piece">香</td>
				<td id="82" class="piece">桂</td>
				<td id="83" class="piece">銀</td>
				<td id="84" class="piece">金</td>
				<td id="85" class="piece">王</td>
				<td id="86" class="piece">金</td>
				<td id="87" class="piece">銀</td>
				<td id="88" class="piece">桂</td>
				<td id="89" class="piece">香</td>
			</tr>
			<tr>
				<td></td>
				<td id="72" class="piece">飛</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td id="78" class="piece">角</td>
				<td></td>
			</tr>
			<tr>
				<td id="61" class="piece">歩</td>
				<td id="62" class="piece">歩</td>
				<td id="63" class="piece">歩</td>
				<td id="64" class="piece">歩</td>
				<td id="65" class="piece">歩</td>
				<td id="66" class="piece">歩</td>
				<td id="67" class="piece">歩</td>
				<td id="68" class="piece">歩</td>
				<td id="69" class="piece">歩</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td id="19" class="piece">歩</td>
				<td id="12" class="piece">桂</td>
				<td id="13" class="piece">銀</td>
				<td id="14" class="piece">金</td>
				<td id="15" class="piece">玉</td>
				<td id="16" class="piece">金</td>
				<td id="17" class="piece">銀</td>
				<td id="18" class="piece">桂</td>
				<td id="11" class="piece">香</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</div>
	<script>
		var selectedPiece = null;
		var blackTurn = true;
		var positions = {
			"11": "香",
			"12": "桂",
			"13": "銀",
			"14": "金",
			"15": "王",
			"16": "金",
			"17": "銀",
			"18": "桂",
			"19": "歩",
			"72": "飛",
			"78": "角",
			"81": "香",
			"82": "桂",
			"83": "銀",
			"84": "金",
			"85": "王",
			"86": "金",
			"87": "銀",
			"88": "桂",
			"89": "香",
			"62": "歩",
			"63": "歩",
			"64": "歩",
			"65": "歩",
			"66": "歩",
			"67": "歩",
			"68": "歩",
			"69": "歩",
			"11": "香",
			"12": "桂",
			"13": "銀",
			"14": "金",
			"15": "玉",
			"16": "金",
			"17": "銀",
			"18": "桂",
			"19": "歩"
		};

function selectPiece(id) {
			if (selectedPiece === null) {
				if (positions[id].charAt(0) === (blackTurn ? "先" : "後")) {
					selectedPiece = id;
					document.getElementById(id).style.backgroundColor = "yellow";
				}
			} else {
				if (canMove(selectedPiece, id)) {
					movePiece(selectedPiece, id);
					selectedPiece = null;
					document.getElementById(id).style.backgroundColor = "";
					blackTurn = !blackTurn;
					alert((blackTurn ? "先手" : "後手") + "の番です。");
				} else {
					document.getElementById(selectedPiece).style.backgroundColor = "";
					selectedPiece = null;
				}
			}
		}

function canMove(from, to) {
			// TODO: 着手可能性の判定
			return true;
		}

function movePiece(from, to) {
			document.getElementById(to).innerHTML = positions[from];
			document.getElementById(from).innerHTML = "";
			positions[to] = positions[from];
			positions[from] = "";
		}
		
		var tds = document.getElementsByTagName("td");
		for (var i = 0; i < tds.length; i++) {
			tds[i].addEventListener("click", function() {
				selectPiece(this.id);
			});
			if (positions[tds[i].id] !== "") {
				tds[i].innerHTML = positions[tds[i].id];
			}
		}
	</script>
</body>
</html>

以上のコードは、JavaScriptを含まなければならないアプリを実装し、1枚のHTMLファイルにまとめたものです。具体的には、将棋というゲームを遊ぶことができます。スマホでの操作にも対応しており、絵文字も多く使用しています。

将棋は、先手と後手に分かれて、相手の玉を詰ますことが目的のゲームです。このアプリでは、黒先手から始まり、駒をクリックして動かすことでプレイを行います。着手可能性の判定はまだ実装されていませんが、基本的な駒の動きは実装されています。すべての駒が初期配置され、クリックすることで選択されます。選択された駒は黄色になります。移動先をクリックすると、駒が動き、ターンが交代します。また、現在のターンに応じて先手と後手を切り替えます。