このようなチェス盤を作ろうとしています。
テーブルを作成しましたが、色を付ける方法がわかりません。また、ボード名 (A1、A2、... H8 など) を印刷し、任意のセルに任意の図を挿入できるようにする必要もあります。
まず、これはテーブルを作成するコードです。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ChessBoard</title>
<script type="text/javascript">
function CreateTable(){
var poz = document.getElementById('space');
// createing table adn inserting into document
tab = document.createElement('table');
poz.appendChild(tab);
tab.border = '5';
for (var i = 0; i < 8; i++){
// creating row and inserting into document
var row = tab.insertRow(i);
for(var j = 0; j < 8; j++){
// creating cells and fill with data (numbers)
var cell = row.insertCell(j);
cell.innerHTML = i*j;
cell.style.backgroundColor = 'blue';
cell.style.color = 'white';
cell.style.height = '50px';
cell.style.width = '50px';
};
};
}
</script>
</head>
<body onload="CreateTable()" id ="space">
</body>
</html>
特定のセルに数字 (A3、E5、H8 など) を入力するにはどうすればよいですか? 図はイメージです。
パート 2: あなたの助けを借りてボードを作成しました。今、私はこのコードからさらにいくつかのことをしようとしています。
複数の異なる画像を複数のセルに入れるにはどうすればよいですか? 私は正しく機能するコードを取得しようとしていますが、成功していません。この画像は、テーブルがロードされるときに表示されるはずです(CreateTableボタンを押したとき)。私はこのコードで作成しようとしています:
この時点で、私は数字をボードに載せたいと思います。テーブルを作成するときは、空白にする必要があります。次に、図を追加するためのボタンがあります。各フィギュア専用ボタンの冒頭に
このようなもの：
function addKing(idStr){
cell = document.getElementById(idStr);
if(cell != null){
// works for color, doesn't work for images!!
// cell.style.backgroundColor = 'red';
cell.src = 'http://akramar.byethost8.com/images/SplProg/DN3/images/50px/king_m.png'
}
}
HTMLのボタンaddKing：
<button id="king" onclick="addKing(prompt('Insert field'))">Add King</button>
すべてをまとめて、挿入したいものを選択できる場合は、以前のコードをさらに良くアップグレードします（プロンプトウィンドウ1：どの図：「キング、クイーン、...」、プロンプトウィンドウ2：どの位置に挿入しますか？ : 'A1、B3、...'))。
関数 addImage (型、位置){ var img = ?? }
ボタンを押して画像を追加すると、プロンプト ウィンドウが表示され、タイプ(キング、クイーン、ルートなど) と場所(A1、B4、...) を尋ねられます (さらに更新する場合は、おそらく色 (黒または白) でもかまいませんが、段階的に構築してみましょう）。
すべてのチェス盤は、javascript と dom だけで構築したいと考えています。
動作しない例へのリンク: jsfiddle
