K3の住民

最近レア社のことをほとんど書いていない自称レア社好きがゲームやプログラミングについて色々書いていく。

SDK2時計を作ってみた Ver.2

皆さん、こんにちは。雪圀です。
今回、SDK2時計を完成させてからすぐにバージョンアップさせたのでそれについて
書いていきます。

追加機能・変更箇所

まずは、追加機能についてです。
今回のバージョンアップで、以下の機能を追加しました。

  • 背景の追加
  • 背景変更ボタン
  • Cookie

また、背景があまりにも小さすぎると思ったので、背景の大きさを変更しました。

背景の追加

スーパードンキーコング2 ディクシー&ディディー」の背景のみならず

スーパードンキーコングSFC
スーパードンキーコング3 謎のクレミス島
スーパードンキーコングGB

の背景を追加しました。
また、「スーパードンキーコング2 ディクシー&ディディー」の背景も若干変更
されています。

変更箇所は、使用する画像の変更と、変数により使用する画像の範囲を変更させる
処理を追加しただけです。

背景変更ボタン

背景を変更させるボタンを追加しました。背景変更ボタンを押すと、onclickイベント
が発生し、背景を変更させるための変数が変わる仕組みになっています。

また、ボタンのデザインですが、CSSにより変更しています。
1個1個色を指定したかったので、HTMLに書いてあるタグにはid属性も書いています。

Cookie

背景を変更しても、別のサイトに行く、もしくはページを更新すれば、初期設定に
戻ってしまいます。

そこで、Cookieによって設定を保持するようにしました。

そもそも、Cookieって何?ってことについて、簡単に解説します。

Cookieは、使用するブラウザがデータを保持する機能です。主にパスワードやユーザ
IDの保持等に使われています。

Cookieには、ブラウザを閉じることで消える「一時的Cookie」と有効期限を過ぎる
ことで消える「永続的Cookie」の2種類があります。

Cookieをセットするときに有効期限を書かなければそれは一時的Cookieとなり、有効
期限を書けばそれは永続的Cookieとなります。
僕は永続的Cookieを使っています。

JavaScriptCookieを取得、セットする為に以下のように書きました。

var bcookie;
var opt = /*初期設定 */;

// Cookieの取得
if(document.cookie.split('=')[ 0 ] == "(データ名)") {
	bcookie = document.cookie.split( '; ' )[ 0 ].split( '=' )[ 1 ];
	var opt = Number(bcookie);
}

// 背景の変更
function bgchg(btnNo) {
	/* optをボタンにより変更する */
	
	// Cookieをセットする
	document.cookie = "(データ名)=" + opt + ";expires=(有効期限);secure";
}

今回使わせていただいているページの仕様上、Cookieを取得する為にまずは最初の
データに自分がセットしたCookieが無いか確かめる為に条件文でデータ名を探して
います。


以上です。今回は短いですが、バージョンアップであるが故仕方の無いこと
でしょう。
因みに今回はプログラム作成よりも、背景の方に時間をかけました(笑)。理由は
察してください・・・。

今回はこれくらいにしときます。