2007-08-29

環境をちょっと変更中

JavaScript

昨日で1冊終わって、2冊目に突入といきたいところです。
2冊目といっても1ヶ月前に1冊目と同時に買っていたものです。
一応紹介すると

速効!図解プログラミング JavaScript

作者: 古籏一浩
出版社/メーカー: 毎日コミュニケーションズ
発売日: 2003/09
メディア: 単行本
購入: 1人クリック: 4回
この商品を含むブログ (4件) を見る

↑ これです。

実は最初の方をちょくちょく読んでみたのですが、最初はJavaScriptの概念だったり、基本的な計算とか配列のことだったので、これはもう1冊目でなんとなく理解していたわけだから、おさらい程度に読み流しています。

話はちょっと変わりますが、実は3冊目を買ってしまいました。
一応紹介すると

Vista、Google、Yahoo! 対応ガジェットプログラミングのためのJavaScript入門

作者: アスキー書籍編集部
出版社/メーカー: アスキー
発売日: 2007/08/24
メディア: 単行本（ソフトカバー）
クリック: 39回
この商品を含むブログ (8件) を見る

↑ これです。

僕は本屋でよく立ち読みをするのですが、これはその時に見つけたもので、発売日も最近だし、Ajaxも色々載せていたので、思わず購入してしまいました。

こちらも最初の方だけ読み出してしまっているのですが、この本ではJavaScriptを作成するのにEclipse(エクリプス)というソフトを入れていたので、僕もこのEclipseをインストールしてみることにしました。

このEclipseというのは http://www.eclipse.org/ で無料配布されている、いわゆるフリーソフトで、さらに英語ベースなのですが、プラグインがすごくたくさんあって、日本語化もできるという高性能なやつのようです。

もともとはJava言語の開発で使われていたものらしいのですが、その他のプログラミング言語のエディションもあって、その中の「Web Tools Platform」というのはJavaScriptやHTMLやCSSを作るのに最適化されたものだということで、今回はそれを入れてみたわけです。

このサイトで結構詳しく出てますので、興味のある人はどうぞ。

2007-08-28

ようやく1冊の本が終了したわけです

JavaScript

ちょうど1ヶ月なんと1ヶ月もかかってしまいましたね。

たぶん普通に読むだけなら数日で終わったのだろうけど、こうやってひとつひとつ理解しながらブログに書き込んでいくとすごく時間がかかるものです。
でもおかげで浅く広くJavaScriptが理解できたのではないかと思うわけです。

ということで、もう一度本の紹介です。

はじめてのJavaScript―プログラミング初心者のための定番スクリプト言語入門 (I・O BOOKS)

作者: 天野友道
出版社/メーカー: 工学社
発売日: 2006/08
メディア: 単行本
クリック: 3回
この商品を含むブログ (5件) を見る

ありがとー。

2007-08-28

第7章ゲーム作り3

JavaScript

ゲーム作りつづきのつづき。

ということで、前々回、前回のをまとめる。

まずはtop.html

<html>
<head>
<title>もぐらたたき</title>
</head>

<body>

<iframe src="data.html" width="600" height="400" scrolling="no"></iframe>

</body>
</html>

これは前々回のと同じ。

そしてdata.html

<html>
<head>
<title>データ部分</title>

<script type="text/javascript">

var i; //もぐらをたたいた回数
var j; //何回move()が呼び出されたか(経過時間を調べる)

function kaishi() {
	i=0; j=0; //開始時は0
	jikan=setInterval('move()', 800); //0.8秒ごとにmove()を呼び出す
	hyouji.style.left=1000; //スタートボタンを画面外に
}

function owari() {
	clearInterval(jikan);
	alert(i + "回");
	hyouji.style.left=260; //スタートボタンを戻す
}

function move() {
	if(j=="10") { //10になったら終了
		owari();
	} else {
		mogura.style.left = Math.floor(Math.random()*590); //left位置の乱数
		mogura.style.top = Math.floor(Math.random()*390); //top位置の乱数
		j++; //カウント1つ追加
	}
}

function atari() {
	i++; //「mogura」をクリックするたびに1つ追加
}

</script>

</head>

<body style="background-color:#66CCFF">

<div id="hyouji" style="position:absolute;top:10px;left:260px;" onClick="kaishi()">
<p>スタート！</p>
</div>

<div id="mogura" style="position:absolute;top:10px;left:35px;" onClick="atari()">
<img src="mogura.gif">
</div>

</body>
</html>

top.html
data.html
mogura.gif

↑ あとはtop.htmlを開いてやればゲームが立ち上がる。

2007-08-27

第7章ゲーム作り2

JavaScript

ゲーム作りつづき。

ランダムに座標を作り、そこに「もぐら」画像を表示させる(関数move)

function move() {
	if(j=="10") {
		owari();
	} else {
		mogura.style.left = Math.floor(Math.random()*590);
		mogura.style.top = Math.floor(Math.random()*390);
		j++;
	}
}

最初のjは「何回move()が呼び出されたか」で、11回目で終わりになるようにセット。
後で説明するdivボックス「mogura」のX,Y座標をランダムで呼び出す。(同時にjを1つ足す)

もぐらをクリック → 点数を集計する関数を呼び出し、クリックした回数を集計する(関数atari)

function atari() {
	i++;
}

説明は長いけど、要はもぐらをクリックした回数なので、呼び出されるたびに1足せばいいだけ。

それでもってdivボックス「mogura」を作って、中にもぐら画像を入れてやる ↓

<div id="mogura" style="position:absolute;top:10px;left:35px;" onClick="atari()">
<img src="mogura.gif">
</div>

一定時間経過後に終了 → ゲームの成績を表示する関数を呼び出す(関数owari)

function owari() {
	clearInterval(jikan);
	alert(i + "回");
	hyouji.style.left=260;
}

clearIntervalで、0.8秒ごとに動かしていたjikanを止める。
何回たたいたかを表示。
隠れていたスタートボタンを戻す。

こんなかんじで1コ1コ見ていった関数を次回はまとめるよ。

2007-08-26

第7章ゲーム作り1

JavaScript

前回のクッキーのあれが僕の中では未解決なんだけど、先にいくとしよう。

6章が終わって、いよいよ7章に入りました。
いよいよというのは、この章が最終章だからです。
最後は簡単なゲームを作るということで、じっくりいきたいですね。

本では「ねずみたたきゲーム」となっていたけど、そのままなのもあれなんで、ちょっとひねって「もぐらたたきゲーム」でいこうと思います。

もぐらたたきゲーム

画面内にでてくる「もぐら」をたたくゲーム
ゲーム画面は「iframe」内に表示させる
「もぐら」をランダムで表示させ、タイマーを使って移動
「もぐら」が逃げる前にたたければ(クリックしたら)おk

もう少し構造を関数でまとめると

一定時間ごとに動くタイマーを設定
ランダムに作った座標をつくり、そこに「もぐら」を動かす
↑ この関数をタイマーで呼び出す
「もぐら」をクリックした場合、「点数を集計する関数」を呼び出し、クリックした回数を集計する
一定時間経過後に終了し、ゲームの成績を表示する関数を呼び出す

まずは準備。
今回は「iframe」を使うので、フレームを設定する「top.html」と、フレーム内に表示させる「data.html」の2つのHTMLをつくる。

top.html

<html>
<head>
<title>top</title>
</head>

<body>

<iframe src="data.html" width="600" height="400" scrolling="no"></iframe>

</body>
</html>

こっちは「iframe」で「data.html」を幅600ピクセル、高さ400ピクセルで表示させただけ。
ゲームに関するJavaScriptは全て「data.html」の方に記述する。

「data.html」内のプログラムは関数ごとに考えていく。

スタートボタンを押して、一定時間ごとに動くタイマー(関数kaishi)

<div id="hyouji" style="position:absolute;top:10px;left:260px;" onClick="kaishi()">
<p>スタート！</p>
</div>

というように、まずは「hyouji」というdivボックスを作り、上から10ピクセル、左から260ピクセルの位置に表示させる。
これをクリックすると関数kaishiを呼び出す。
それがこれ ↓

function kaishi() {
	i=0; j=0;
	jikan=setInterval('move()', 800);
	hyouji.style.left=1000;
}

変数i : もぐらをたたいた回数
変数j : 何回タイマーが呼び出されたか(経過時間を調べる)

iとjはスタート時は0にして初期化。
setIntervalを使って、もぐらを動かすための関数moveを0.8秒感覚で呼び出す。
スタートボタンを押すと、ボタンを左へ1000ピクセル移動させ、画面上から消す。

スタートはこんなかんじ。
長くなったので、もぐらを動かす関数move以降は次回に。

2007-08-25

ひさびさに

ひとりごと

ひとりごとを言ったりしてみます。
まぁ僕の場合、ひとりごとはアニメの話ばかりなのですが。

電脳コイルというアニメがNHK教育で土曜の夕方6:30からやっていて、これは毎週見てます。
とは言っても、先週と先々週は夏休みだったようで、今日久々にやってました。
タイトルが自由研究とかなっていたのですが、総集編だったんですこれが。

普段アニメの総集編なんかは見なかったりするのですが、この電脳コイルというアニメは難しい単語が多くて、それらの解説を色々とやっていたので、今回のは今までのを頭の中で整理するのにはもってこいでした。

とりあえず、今まで「メタタグ」と「メタバグ」をごっちゃにしていたのが悪かったようです。
すっきりしました。

電脳コイル第1巻限定版 [DVD]

出版社/メーカー: バンダイビジュアル
発売日: 2007/09/25
メディア: DVD
購入: 2人クリック: 98回
この商品を含むブログ (128件) を見る

2007-08-25

第6章 6-7 クッキー

JavaScript

6-6は「マルチメディアを使った処理」という項目で、それほどJavaScriptの雰囲気でもなかったし、IEあたりでのみ実装されているような「Filter」の話だったりしたので読み飛ばし。

で、6-7のクッキーの項。
相手のコンピュータにファイルの情報を保存したりするやつだ。
最近は切ってる人もけっこういるらしいね。

クッキーへの情報の記述

document.cookie = (クッキーの値)
	(クッキーの値) キーワード1=値1; キーワード2=値2; ・・・

クッキーを書き込むときは、書き込みたい値とそのキーワードを連結して書き込まないといけなくて、それを読み出すときは、キーワード名と値を分別して、独立した情報として使えるようにしないといけない、というとてもややこしいという事だけは理解した。

書き込み

キーワード1 + "=" + 値1 + ";" + キーワード2 + "=" + 値2 + ";"

というように演算子「+」を使う。

読み出し

substring(開始位置, 終了位置)

substringメソッドを用いて、ある文字列から指定された範囲を抜き出す。

あと、キーワード名や値は半角英数しかダメなようで、日本語の全角を用いるためには「escape」メソッドで半角文字列に変換し、読み出すときも「unescape」メソッドで全角に戻さないといけないらしい。

さて、正直ここまで僕は半分も理解できていないわけだけど進めますよ。

クッキーの内容によって、以後の表示ページを分ける

<html>
<head>

<script type="text/javascript">

function GetCookie(name) { //読み出しの関数
	var arg = name + "=";
	var arg1 = arg.length;
	return unescape(document.cookie.substring(arg1, document.cookie.length));
}

function SetCookie(name, value) { //書き込みの関数
	document.cookie = name + "=" + escape (value);
}

// ページが読み込みされるたびに自動的に読み込まれる部分
suki = GetCookie('sport');

if (suki != null) { //1度ボタンを押した後の動作
	switch (suki) {
		case 'boat':window.location="boat.html";
			break;
		case 'ski':window.location="ski.html";
			break;
		case 'bike':window.location="bike.html";
			break;
	}
}

</script>

</head>

<body>

<p>どのスポーツが一番好きですか？</p>

<button onClick="SetCookie('sport', 'boat');">BOAT</button>
<button onClick="SetCookie('sport', 'ski');">SKI</button>
<button onClick="SetCookie('sport', 'bike');">BICYCLE</button>

</body>
</html>

最初にこのページが表示された時に、「BOAT」ボタンを押した場合は、以後boat.htmlに飛び、その他の「SKI」「BICYCLE」ボタンも同様の動作。

「読み出し」「書き込み」の部分はちょっと理解しにくい。
見ただけで分かる人もいるのだろうけど。
まだまだだ。