━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
レンタル掲示板とクイズ投稿サイトを開発した櫻井文人の
プログラムの考え方が身につくメルマガ『プログラムは考え方です』
───────────────────────────────────
メルマガ発行人
櫻井文人のプロフィール ⇒ http://www.bunzin.net/program/prof.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

こんにちは、メルマガ発行人の櫻井文人です。

最近、コッペリオン(COPPELION)という漫画にはまっています。
詳しくは編集後記で。


今回は「宇宙戦艦シリーズ(宇宙戦艦のゲームの作成)」に
ついての続きとなります。

前回までの宇宙戦艦シリーズでは、
ページに表示した宇宙戦艦の絵を動かすところまで行いました。

今回は、宇宙戦艦を動かすために準備したJavaScriptで作ったプログラム
の内容を説明しようと思います。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【おすすめ】今回も『初音ミク』特集です。

できる初音ミク＆鏡音リン・レン
価格：1,680円（税込、送料別）


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■■　宇宙戦艦を動かすJavaScript
───────────────────────────────────

今回は、宇宙戦艦を動かすために準備したJavaScriptで作ったプログラム
の内容を説明しようと思います。

なお、念のために、
実際にキーボードで宇宙戦艦を動かしてるページのURLを再掲しておきますね。

　宇宙戦艦の絵をキーボード操作で動かすページ
　⇒ http://www.bunzin.net/program/mailmaga/backnumber/20110720/


■　移動のしくみ

　宇宙戦艦の位置を覚えておくようにします。
　キーボード操作で「WSAD」の各キーが押された時に、覚えておいた宇宙戦艦
　の位置を修正して、画面の中の宇宙戦艦をその位置まで移動させます。

　宇宙戦艦の位置は横軸(x)と縦軸(y)の座標で覚えて置くようにします。
　横軸(x)は画面の一番左が0で、右にいくほど数値が増えていき、
　縦軸(y)は画面の一番上が0で、下にいくほど数値が増えていきます。


■　battleship.jsの中身

　battleship.jsの中身は以下のようになっています。


    １行目：var MyBattleship = { 'x':10, 'y':10 }
    ２行目：
    ３行目：window.onload = function()
    ４行目：{
    ５行目：   window.document.onkeydown = moveMyBattleship;
    ６行目：   setPositionMyBattleship();
    ７行目：}
    ８行目：
    ９行目：function moveMyBattleship(evt)
  １０行目：{
  １１行目：   if (evt)
  １２行目：   {
  １３行目：      var kc = evt.keyCode;
  １４行目：   }
  １５行目：   else
  １６行目：   {
  １７行目：      var kc = event.keyCode;
  １８行目：   }
  １９行目：
  ２０行目：   if (kc == 87 && MyBattleship.y > 0)  MyBattleship.y = MyBattleship.y - 1;
  ２１行目：   if (kc == 83 && MyBattleship.y < 30) MyBattleship.y = MyBattleship.y + 1;
  ２２行目：   if (kc == 65 && MyBattleship.x > 0)  MyBattleship.x = MyBattleship.x - 1;
  ２３行目：   if (kc == 68 && MyBattleship.x < 30) MyBattleship.x = MyBattleship.x + 1;
  ２４行目：
  ２５行目：   setPositionMyBattleship()
  ２６行目：}
  ２７行目
  ２８行目function setPositionMyBattleship()
  ２９行目{
  ３０行目   document.getElementById("my_battleship").style.top  = MyBattleship.y * 8;
  ３１行目   document.getElementById("my_battleship").style.left = MyBattleship.x * 8;
  ３２行目}


　１行目は、宇宙戦艦の位置を覚えておくための
　オブジェクト「MyBattleship」を宣言しています。
　オブジェクトには横軸(x)と縦軸(y)の位置に
　対応したプロパティ「x」と「y」を準備して、
　それぞれを10で初期化しています。

　２行目から７行目では、ウェブページが表示された時に
　最初に実行するための関数を宣言し、そのまま登録しています。
　この登録した関数はウェブページが表示された時に
　最初に実行されるよになります。

　　５行目では、キーボードが押された時に実行するための
　　関数「moveMyBattleship」を登録しています。
　　　※関数「moveMyBattleship」については、あとで説明します。

　　６行目では、関数「setPositionMyBattleship」を実行することで
　　宇宙戦艦の表示ををゲーム開始時の位置に移動しています。
　　　※関数「setPositionMyBattleship」については、あとで説明します。

　９行目から２６行目は、関数「moveMyBattleship」を宣言しています。
　この関数では、キーボード操作で「WSAD」の各キーのうち
　どれかが押されたかによって横軸(x)と縦軸(y)の値を
　増やしたり減らしたりしています。
　そして、後述する関数「setPositionMyBattleship」によって
　表示している宇宙戦艦の位置を移動します。

　２８行目から３２行目は、
　関数「setPositionMyBattleship」を宣言しています。
　この関数では、宇宙戦艦を表示している位置を移動します。
　横軸(x)と縦軸(y)の値を、画面の宇宙戦艦の位置として指定することで
　移動をしています。


■　次回のメルマガでは・・・

　今回は、追加したJavaScriptのプログラムの説明はしましたが、
　htmlとの連携については説明していませんので、
　次回は、JavaScriptのプログラムとhtmlとの連携について
　説明したいと思います。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■■　編集後記
───────────────────────────────────

私の大好きな漫画のうちの1つである、
コッペリオン(COPPELION)の11巻が新しく出たので、
さっそく入手して読んでみました。

さて、このコッペリオンですが、、
ネタバレしない程度に簡単に説明しますと、
お台場の原子力発電所のメルトダウンから20年後の廃墟と化した
東京に、ある特殊能力をもった女子高生達が生存者の救助に向かうと
ころから始まるお話です。

この、コッペリオンという漫画・・・
いろいろと思い入れがあるのですが、
その辺はブログに整理してみました。

　【ブログ】新しく出たコッペリオン(COPPELION)の11巻をさっそく入手しました
　　⇒ http://ameblo.jp/bunzin-net/entry-10984000498.html

もし興味がありましたら、ブログのほうもぜひご覧ください。


最後までお読みいただき、ありがとうございました。


───────────────────────────────────

メルマガに関してのご意見・ご要望は、以下の受付フォームから
常時受け付けております。

　　ご意見・ご要望 受付フォーム
　　　⇒ http://www.bunzin.net/program/mailmaga/demand/


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【おすすめ】今回も『初音ミク』特集です。

できる初音ミク＆鏡音リン・レン
価格：1,680円（税込、送料別）


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

●櫻井が開発したレンタル掲示板は
　　コチラ ⇒ http://www.bunzin.gr.jp/m_board/

　　画像のアップロードも可能なレンタル掲示板です。
　　無料ですのでお気軽にどうぞ。


●櫻井が開発したクイズ投稿サイトは
　　コチラ ⇒ http://www.bunzin.gr.jp/quiz/

　　あなたが考えたクイズを投稿することができます。
　　投稿されたクイズに回答することもできます。
　　無料ですのでお気軽にどうぞ。


●BUNZIN NET アプリ
　　コチラ ⇒ http://www.bunzin.net/app/


●プログラム用語辞典
　　コチラ ⇒ http://www.bunzin.net/program/dictionary/


●お手軽！VBScriptを使ってみよう
　　コチラ ⇒ http://www.bunzin.net/program/vbscript/


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
メルマガ発行人　櫻井文人

メルマガ発行責任者情報は
 コチラ ⇒ http://www.bunzin.net/program/mghsinfo.html

アドレス変更と登録解除はコチラ ⇒ http://www.mag2.com/m/0000293166.html

メルマガバックナンバーは
 コチラ ⇒ http://www.bunzin.net/program/mailmaga/backnumber/

櫻井文人のプロフィール ⇒ http://www.bunzin.net/program/prof.html

ご意見・ご感想はコチラ ⇒ bunzin●bunzin.gr.jp
（メール送信の際は、●を@に置き換えてください。）
（櫻井が確実に読みますが、返信は保障できません。）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━