56将棋開発ブログ

5×6マスのミニ将棋、「56将棋」で遊べるものをいろいろ開発してます。

JavaScriptで将棋盤その2

前回の記事で書いたHTMLの<table>タグをつかった将棋盤ですが、HTMLのソースコードも一応載せておきます。

 

<html>
<head>
<title>shogi</title>
<style>
table{
    border-collapse: collapse;
}
td{
    border: solid 1px;
    padding: 0em
}
</style>
</head>

<body>
<table>

    <tr>
        <td><img src="駒の画像ファイル名" width="40" height="40"></td>
              ~中略~

  <td><img src="駒の画像ファイル名" width="40" height="40"></td>
    </tr>

 

    <tr>
        <td><img src="駒の画像ファイル名" width="40" height="40"></td>

              ~中略~
        <td><img src="駒の画像ファイル名" width="40" height="40"></td>
    </tr>
   

~中略~

 

</table>
</body>
</html>

 

駒の画像が表になっているだけですが、とりあえず将棋盤をブラウザ上に表示させることは出来ました。

 

 そして前回の記事の最後で、いよいよJavascriptで将棋盤を表示させますと書いたわけですが、 ↓

 

JavaScriptの配列に駒画像を入れておいて、それをdocument.write()で順番に表示するようにすれば、駒を動かしたり取ったりすることもできそうなので、今度はそれをつくってみたいと思いますー。

 

これはまったくJavaScriptがわかっていない人が書いてますね。そうです。ただのあほです。

 

document.write()が出力できるのは、文字列もしくはHTMLのタグなので、たとえば

 

document.wirte("<img src='画像ファイル名'>");

 

というふうに<img>タグを書き出して画像を表示させることはできるわけです。

これをたくさん並べればとりあえず将棋盤にみえるものは表示できますね。

ただ、これだと 駒を動かす = 画像ファイルを入れ替える ことは無理そうです。

 

そこで、前回ただのあほが考えたのは、配列に<img>タグを入れておくというものだったのですが、つまり、

 

var board = ["<img src='飛車の画像ファイル名'>","<img src='角の画像ファイル名'>"];

 

とやればいいじゃないかと思ってしまったんですが、これは間違いでした。あほでした。

 

何がどう間違っているかの説明はちょっと長くなるので、参考にしたサイトのURLを貼っておきます。(DOM - JavaScript超初心者によるJavaScript入門講座

 

 

【プログラミング】オセロを1時間で作ってみた【実況解説】 ‐ ニコニコ動画:GINZA

では、

 

document.getElementByIdで指定IDの要素を取得して、それを変数に格納する

                ↓

          element.cloneNode(true)でノードを複製する

                ↓

       appendChild()で、複製したノードを追加する

 

というやり方をしているようです。

 

そこで、オセロの人のコードを参考にして、将棋盤を表示させてみました。

 

前回と見た目まったく同じですけどね!

 

次回は駒が動かせるようになっている予定です。

 

それでは。