シンプルなweb版スタンプラリーの作成について

質問

お世話になります。
これまで基礎程度しか触れたことのない初心者で、足りないことを申し上げてしまうと思いますが教えていただけますと嬉しいです。

標記につきまして、サイトでかんたんなスタンプラリーのようなものを設置したいと思っています。
設置したいページにスタンプ画像を置き、画像をクリックすると一覧表のページに戻り、取ったスタンプが記録されており、全て揃えるとゴールのページのリンクが表示されるというかたちです。

参考になるサンプルを探してみたのですが、見つけたものは複雑で、cgiの触り方は分からずだったのでこちらはあきらめました。
参考サイト様：http://www.nmt.ne.jp/~misao/cgi/stamps.html

JavaScriptで出来ないかと考えております。
別のところで「画像がクリックされる度にイベントを発生させる。その画像のフラグを立て、クッキーにでも保存する。フラグをチェックし、全て立っていたらリンクを表示。」という回答文言があったのですが、文字だけで詳細なJavaScriptが無かったため実際にどういう構造なのかが分かりませんでした。

もし、サンプルや参考になりそうなサイトをご存じでしたら教えていただけますと嬉しいです。
宜しくお願い致します。

回答No.1

Ogre7077

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>

お礼

この度はありがとうございました。
お返事とお礼が大変に遅くなり申し訳ございませんでした。もっと難しいことを考えていて、あまりに無知だったとお恥ずかしい限りです。本当にありがとうございます。

しばらく作業が止まっていたのですが、またこれから頑張って作業を進めたいと思います。取り入れたい機能が増えたので、またわからないことがあればご教授をよろしくお願いいたします。
本当にありがとうございました。