お世話になります。
これまで基礎程度しか触れたことのない初心者で、足りないことを申し上げてしまうと思いますが教えていただけますと嬉しいです。
標記につきまして、サイトでかんたんなスタンプラリーのようなものを設置したいと思っています。
設置したいページにスタンプ画像を置き、画像をクリックすると一覧表のページに戻り、取ったスタンプが記録されており、全て揃えるとゴールのページのリンクが表示されるというかたちです。
参考になるサンプルを探してみたのですが、見つけたものは複雑で、cgiの触り方は分からずだったのでこちらはあきらめました。
参考サイト様:http://www.nmt.ne.jp/~misao/cgi/stamps.html
JavaScriptで出来ないかと考えております。
別のところで「画像がクリックされる度にイベントを発生させる。その画像のフラグを立て、クッキーにでも保存する。フラグをチェックし、全て立っていたらリンクを表示。」という回答文言があったのですが、文字だけで詳細なJavaScriptが無かったため実際にどういう構造なのかが分かりませんでした。
もし、サンプルや参考になりそうなサイトをご存じでしたら教えていただけますと嬉しいです。
宜しくお願い致します。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
HTML5 で実装できるなら
フラグを保存する
var STOREKEY = 'stump_rally_status';
function storeStatus(status) {
window.localStorage.setItem(STOREKEY, JSON.stringify(status));
}
function readStatus() {
var str = window.localStorage.getItem(STOREKEY);
var status = (str && str != 'null' && str != 'undefined')? JSON.parse(str): {};
return status;
}
画像がクリックされたらイベント
function recordStump(id, pswd) {
var status = readStatus();
status[id] = pswd;
storeStatus(status);
}
window.addEventListener('click', function(ev){
var elem = ev.target;
if (elem instanceof HTMLImageElement) {
if (elem && elem.dataset && elem.dataset.stump) {
var m = /(\w+)\/(\w+)/.exec(elem.dataset.stump);
if (m) recordStump(m[1], m[2]);
}
}
}, false);
<a href="一覧表のページ"><img data-stump="hoge/abc" src=stump_hoge.png></a>
<a href="一覧表のページ"><img data-stump="boke/ijk" src=stump_boke.png></a>
<a href="一覧表のページ"><img data-stump="fuga/xyz" src=stump_fuga.png></a>
フラグをチェックし、全て立っていたらリンクを表示
チート対策として、判断にダイジェスト値を利用する
function createDigest(str) {
var M = 0x1FFFFFFF;
var v = 123456789 & M;
for (var i = 0; i < str.length; i++) {
var c = str.charCodeAt(i);
v = (v * c * 2 + 3) & M; // TODO もっと難しく!
}
return v;
}
function checkRallyGoal(status) {
var KEYS = 'hoge,boke,fuga'.split(/,/);
var GOAL = createDigest('abc,ijk,xyz'); // TODO 定数に置換して
var passwords = KEYS.map(function(x){return status[x]}).join(',');
var digest = createDigest(passwords);
return digest == GOAL;
}
window.addEventListener('DOMContentLoaded', function(ev){
if (checkRallyGoal(readStatus())) {
var a = document.getElementById('goal').appendChild(document.createElement('a'));
a.href = 'ゴールのページ'; // TODO チート対策
a.textContent = 'ゴール';
}
}, false);
<p id=goal></p>
この度はありがとうございました。
お返事とお礼が大変に遅くなり申し訳ございませんでした。もっと難しいことを考えていて、あまりに無知だったとお恥ずかしい限りです。本当にありがとうございます。
しばらく作業が止まっていたのですが、またこれから頑張って作業を進めたいと思います。取り入れたい機能が増えたので、またわからないことがあればご教授をよろしくお願いいたします。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
javascriptでiframeのURL変更は?
-
C#OpenCv V4にのエラーに関する...
-
responseTextから連想配列へ
-
gas スプレッドシートがアクテ...
-
C#で、ContextMenuStripに動的...
-
GASでundefinedエラーが出ます
-
【乱数】任意の範囲、固定個数...
-
ASP.NETのコントロールの値をJa...
-
どうすれば良いでしょうか?
-
ジェネレーターの作り方
-
アコーディオンメニューの高さ...
-
船のゲームを作っているのです...
-
var_dumpのdump意味はを知りた...
-
イラレでナンバリングする方法
-
極小コードに挑戦!part2 数列...
-
ASP.NET MVCでObjectをjsに渡す
-
なぜmatchメソッドがエラーにな...
-
JavaScriptで平日のみをカウン...
-
javascriptでの時刻表示カスタム
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
ジェネレーターの作り方
-
ASP.NETのコントロールの値をJa...
-
C#で、ContextMenuStripに動的...
-
GASでundefinedエラーが出ます
-
ASP.NET MVCでObjectをjsに渡す
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
シンプルなweb版スタンプラリー...
-
html javascript リンク先アド...
-
ローカルにあるファイルを検索...
-
javascriptでiframeのURL変更は?
-
javaScript textareaの一行あた...
-
イベントが初めの一回しか起き...
-
C# 演算 奇数と偶数 表現の仕方
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
条件に応じて座席表をつくりた...
おすすめ情報