ただの備忘記録

忘れないように記録を残します。忘れるから記録に残してます。そして、その記録が役立つといいかな。

【JS】三択クイズ、アンケート調査、テキストRPG

2013年11月12日 | JavaScript

JavaScriptのこども工作教室に３つのスクリプトを追加しました。
三択クイズ、アンケート調査、テキストRPGは、どれも同じ派生のスクリプトです。

JSこども工作教室：http://www.shurey.com/js/craft/index.html

まず、問題（質問、物語）の欄、選択肢、選択結果の３つの表示区分からなっています。
どれも設問から選択肢を選ぶ形式で、結果の表示方法が異なっています。

最初は、三択クイズの作成から解説しています。

ソースと解説：http://www.shurey.com/js/craft/quiz/index.html

１つの質問と選択肢、解答を１つの配列変数で管理しています。こうしておけば、質問の数も自由に増減できます。
あとは、それぞれの解答の結果を記録して、最後にまとめて表示するだけです。

次のアンケート調査は、三択クイズを改良して作っています。ソースは同ページの続きにあります。
解答は１つではありませんので、選択肢それぞれに応じた得点を集計して、集計結果で回答を表示するものです。

最後にテキストRPGです。これはアドベンチャーゲームとして作成できます。

ソースと解説：http://www.shurey.com/js/craft/text_rpg/index.html

物語の管理は、アンケート調査と同じ形式です。選択肢と同じ数の結果があり、プラスマイナスの得点を与えています。
ステータスがHPだけという単純仕様にして、HPが０になるとゲームオーバーです。
あとは、最終のHPによってエンディングが変わります。結果は得点ではなく、エンディングストーリーとして変化します。

テキスト部分にはタグを埋め込むこともできますので、イラストや写真を使うのも簡単にできますし、CSSでデザインを作り込んでも良いでしょう。
まずはシンプルなサンプルを動かして流れを理解して、これを土台にすると手軽にオリジナル作品が作れるかと想います。


テキスト・リバーシ

2013年10月07日 | JavaScript

以前、将棋掲示板を作りたいなと考えてましたが、盤面をTwitterに投稿するだけでも面白いかなと思っていたので、将棋よりも簡単にできそうなオセロをJavaScriptで作ってみることにしました。

今回作った最初の目的は、オセロの盤面をそのままTwitterに投稿し、それを見た挑戦者に続きを打ってもらおうというものです。
また、盤面がTL上では目障りになるかもしれないので、URLでの投稿も可能にして、その場合には盤面の情報も引き継いで二人で打ち合えるように考えました。
Twitterの投稿文字数を考えて、盤面とURLを両方載せるのは無理だと思ってましたが、URLは自動的に短縮してくれるので、両対応もしてみました。

http://www.shurey.com/js/board/reversi.html

画面上の盤面をクリックすると石が表示されたり、ひっくりかえります。
最初は黒石の手番なので置ける石は黒のみになっています。間違って置いた石もそのままでは消すことができません。
配置制限を解除すると、自由に石を動かせるようになります。

Twitterで対戦する場合は、名前欄にお互いのアカウント名を入れます。@から始まるやつです。
自分の手を打ったら、盤面出力、URL出力、対戦出力のどれかのTwitterボタンを押して投稿します。
盤面出力の場合は、相手はそれを見て手動で盤面を作ります。
URL出力の場合は、盤面がないのでURLをクリックすると、次の手順が表示されます。
対戦出力では、盤面とURLが出力されます。

他の掲示板などでも使えるようにテキストの出力も用意してあります。

【課題】

HPでは石部分に記号である●○を使っています。
これをTwitterに投稿すると少しやせて表示されてしまうので、絵文字の⚫⚪を使うようにしてみたら、Androidでは表示できませんでした。
そのため出力は記号のままになっています。


JavaScript 年齢比較一覧表

2012年01月10日 | JavaScript

人物の生年と没年から年齢や没年齢を指定の日で比較する表を作成することができます。

小説や漫画を製作する際に、登場人物の年齢を管理することができます。もちろん、歴史上の人物や家族の年齢比較にも利用できます。
日付を指定してリアルタイムに年齢を計算します。また、没年齢にも対応し、また同時に他の人物との年齢差も計算します。
年齢一覧表も出力しますので、年々の比較を追うことも可能です。

http://www.shurey.com/js/works/age.html


CSSに関するメモ【ComboBox】

2011年08月23日 | JavaScript

その１

HTMLのフォームでは、SelectBoxとListBoxとして使える<select>というタグがあります。
しかし、このタグではあらかじめ準備された文字列か、JavaScriptで追加生成してしか選択できない。
テキストボックスに▼ボタンを付けて、テキストを切り替えたり、直接入力できるものはComboBoxと呼ぶそうで、フォームではサポートされていない。

Ajaxを使ったサンプルもあったもののかなり構造が複雑だったので、無理矢理それっぽく作ってみた。

<input type="text"><select><option></select>

と並べておいて、selectタグをCSSでwidth:20pxに設定した。
Firefoxでは、左側に少し枠ができて、▼が右にずれて表示される。▼を押すと選択肢が表示される。
IE8では、表示は綺麗に見えるが、▼を押すとその幅のまま選択肢が表示されるため、中身が判らない。
iPadでは、表示に異常が発生する。その一行分だけ白く網掛けのようになってしまう。21px以上にすると直るため、22pxで丁度綺麗な表示となる。

IE8の表示の修正には別の方法を考える必要がありそうだ。

その２

もう１つは<input>と<select>を重ねて作る方法。iPadでは綺麗に重なるが、FirefoxやIE8では上下にずれてしまう。最終的にはブラウザに応じて使い分けるのが良いかも。

<div class="divClass"><input type="text" class="inpClass"><select class="selClass"><option></select></div>

タグは上記のようになる。ボタンをCSSで重ねるために、divが土台となっている。

.divClass {
    position:relative;
}
.inpClass {
    width: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.selClass {
    width: 220px;
}

selClass にも absolute を割り当てるとボタンの位置が揃うが、続きにボタンがある場合、それらが上記のボタンに隠れてしまう。そのため、selClassの幅を生かすことにした。

テスト用ページを作成した。http://www.shurey.com/js/labo/combobox.html


CSSに関するメモ【疑似リンク】

2011年08月20日 | JavaScript

 

テキストにCSSで色を設定後、その中にリンクを置くと当然にリンクの色はリンク用の色になる。
このとき、カウンタを作っていたので、①～⑳までのカウンタに色を付けており、押したカウンタまで❶で表していた。
カウンタをクリックするとスクリプトを起動させるため<a>タグを使っていたが、上記の通りこれでは色が正しく表現できない。
そこで、こんなことをやってみたけど、クリックして文字列が入れ替わるとクリック色に戻ってしまう。

obj = document.getElementsByName("counter");
for (n=0;n<obj.length;n++) {
	obj[n].style.display = s;
}

タグ：<a href="javascript:changeCounter(0,1)" name="counter" class="counter">❶</a>

そこで、タグを変更してみた。これでスクリプトはいらなくなる。

タグ：<span onClick="javascript:changeCounter(0,1)" class="counter">❶</a>

あとはCSSの設定にこれを付け加えると、リンクっぽく見える。

span.counter:hover {
	cursor: pointer;
}

グラフ年表スクリプト

2011年05月02日 | JavaScript

三国志の人物を登場している期間を比較しながら眺めたいと思って、生年から没年をグラフ化して並べて見られる表にしました。
これをHTMLファイルとテキストファイルに分割し、テキストファイルからデータを読み込ませることにして、データを差し替えて様々なバージョンを楽しめるようにしました。更に、HTMLファイルとJavaScriptも分割し、初期設定はHTMLファイル内で完結し、スクリプトは共有できるようにしています。

年表のグラフに年齢表記も加えて、縦に年齢を比較できるようにもなりました。
また、棒グラフとしても機能するように改良を加えています。
データはCSV形式のテキストファイルを読み込むことができます。

http://www.shurey.com/js/h_graph/index.html

事例として、三国志の人物データと、大河ドラマ「江」の人物データを用意しています。


JavaScript 覚え書き　日付について

2010年08月31日 | JavaScript

JavaScriptの日時の扱いについて発見がありました。

//日付と時間の設定
now = new Date();

として日付を取得すると、今日は8/31です。
次に

year = 2010;
mon = 9;
day = 1;

として9/1に日時を設定するため、下記の処理をします。

//タイマーの時間
now.setYear(year);
now.setMonth(mon-1);
now.setDate(day);

nowの値は10/1になってしまいます。
 
これは、setMonthを実行した時点で「9/31」となり、これが「10/1」と解釈されてしまうためです。
事前に
 
now.setDate(1);

を実行することで回避できます。
リファレンス本や解説サイトを見てもこのような手順は踏まず、ただ順番に年月日をあてがっていますので、月と日数の関係でこのようなズレが月末で生じます。注意が必要です。

現在カウントダウンタイマーを制作中です。
http://www.shurey.com/js/timer/countdown.html


JavaScriptでデータベースを作ってみる

2010年07月20日 | JavaScript

面白い質問を見つけたので、自分で解決策を作ってみました。
JavaScriptでデータベースは作れるのかどうか。
基本的にJavaScriptというのは、ファイルの入出力が出来ません。しかし、Ajaxの通信機能を使えばファイルやデータを入力することができるはず。
Ajaxの最も代表的な使用例がGoogleMapです。地図を動かすと画面が遅れて表示されるのは、通信をしているからなのです。

データベースの基本構造は、データと、それを検索し出力するプログラムです。
データをリアルタイムに追加編集することはできませんが、データの検索や並び替えをして表示する辞書的用途には十分使えるものができるでしょう。

準備したデータはCSV形式のテキストファイルです。エクセルの表を保存するときにCSV形式を選ぶことで簡単にできあがります。表示の状態がそのまま出力されます。もちろん、データベースソフトでも出力できます。
CSVファイルの大きな注意点として、そのままではShift-JISで保存されるため、Ajaxでは日本語が含まれていると正しく処理することができません。そこで、テキストエディタを使い、UTF-8に変換し保存し直す必要があります。

データベースのHTMLもUTF-8で保存したテキストファイルにします。
Ajaxのファイル読み込みには、古旗氏の作成した外部スクリプトを利用させていただきます。
そして、学習の過程を紹介しながら、段階的に改良を加えていきます。
行程は次のようになっています。

①テキスト受信テスト
②Excelで作ったCSVファイルを読み込む
③CSVファイルを配列変数へ読み込む
④簡易検索機能の組み込み
⑤テキスト検索機能の組み込み
⑥数値の範囲検索の組み込み
⑦検索結果の並び替え
⑧検索対象の選択
⑨並び替えの順序を切替

http://www.shurey.com/js/labo/db/