JSで○×ゲームをつくってみる1

プログラムは使って覚えた方がいいと思いますが、いきなり大きいものに取りかかると挫折するので、簡単なものを作って覚えていくことにしました。今回はJavaScript○×ゲームを作っています。demoの公開の仕方がよくわからないので、とりあえずjsdoitというサービスを使用。
他の人は自分のサイトに作品用のディレクトリを作って置いているのかな?

jsdoitでは、gistというgithubのサービスを使えばバージョン管理が出来るとのことですが、方法がわかりませんでした。とりあえず、ローカルにリポジトリを作って管理していくことにしました。githubには確かリポジトリの作成数に制限があったと思われます。

以下、今回の作業で調べた備忘録

HTML・CSS

tableを中央に寄せる

table {
    margin-left: auto;
    margin-right: auto;
}

外部CSSとJSファイルの読み込み方

<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script> 

Wordpress

crayon【プラグイン

下記のコードでcrayonが適用される

<pre><code>ソースコード</code></pre>

Wordpressで「現在メンテナンス中のため、しばらくの間ご利用いただけません」と表示される

/.matintenanceを削除すれば解決 Wordpressのバージョンのアップデートやプラグインの更新時に、一時的に生成されるファイル。 アップデート中に管理画面から移動すると削除されずに残ってしまう可能性がある。

現在メンテナンス中のため、しばらくの間ご利用いただけません【ワードプレス】 | ネットビジネスで20代にて転職して独立したなるひこのブログ

Javascirpt

配列の宣言

複数の言語に触れていると、それぞれの宣言の仕方を区別できなくなってきました。

var square[3]; // エラー
var square = [3]; // 成功
var square = [tableLength][tableLength]; // 要素数を変数で指定することもできる。

二次元配列の宣言の仕方は少し特殊。下記を参考。

Javascriptって2次元の連想配列できないの? « ウップス!!なかわけ

宣言の仕方一覧は下記参照。

JavaScriptの配列 vol.1 -配列の宣言- - 真夜中のプログラミングTips

配列の宣言時に要素数を変数で指定

配列の要素数が変化するときはArrayオブジェクト生成時に、コンストラクタで指定していします。

var len = 3; // 要素数の決定

var array = new Array(len);
array[0] = 12;
array[1] = 10;
array[5] = 10; // 宣言外のインデックスに格納

console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
console.log(array[3]);
console.log(array[4]);
console.log(array[5]);

素数を宣言した後でも、それ以上の要素を追加できるようです。下記、Chromeでの出力結果。

12
10
undefined
undefined
undefined
10

ちなみに私は最初、Arrayを使わずに下記の方法で要素数を指定しようとしていました。

var array = [len];

これでは要素の中身を格納しているだけですね(笑)

クロージャとは

下記の目次6を見れば、すぐに復習できます。

[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記

今回はボタンをクリックしたときに、現在のプレイヤーが誰かを変数で保持するのに使いました。

DOM

ページ読み込みが完了してからjsを起動

下記の無名関数を使う。

window.onload = function() {
    // ページ読み込み後に実行する処理
}

※DOMツリー構築後、画像などの関連データ読み込み後に処理を実行

ページ読み込み時に実行するjavascriptについてのTips | Tips Note

DOM操作・イベントの設定

javascript DOMの基本操作まとめ | Designup

DOMの取得・追加・削除・置換だけでなく、イベントハンドラ・リスナについても説明あり。

DOMの存在チェック

[JavaScript][jQuery] 要素 DOM の存在確認・チェック | CodeNote.net

DOMの取得はページ読み込み後に行う

onloadイベントが起きる前、つまりDOMが生成される前に取得しようとするのでエラーになってしまいました。存在しないものを取得することができないため。

var gameArea = document.getElementById("gameArea");

window.onload = function() {
    // 処理
};
// Uncaught TypeError: Cannot set property 'onclick' of null

appendChild()でtableをセットしても表示されない

tableにborderを設定していなかったため、見えない状態でした(笑)