wScratchPad.jsを使った銀はがしにて、1度削った銀部分をタップすると再度カウントされてしまう。

Question

Javascript勉強中です。

やりたい事

wScratchPad.jsを用いて、銀はがしを試しています。

下記の記述で、当たりが3回出ると「おめでとう！」のアラートが
出るようになっていますが、1度削った当たりの部分を再度タップすると、
また削った判定がされてしまいます。

最初に行った事（土台）

【html】
<ul>
	<li id="wScratchPad1"></li>
	<li id="wScratchPad2"></li>
	<li id="wScratchPad3"></li>
	<li id="wScratchPad4"></li>
	<li id="wScratchPad5"></li>
	<li id="wScratchPad6"></li>
</ul>

【Javascript】
<script type="text/javascript">
var count = 0;
var endFlg = false;
function check() {
	if (!endFlg && count > 2) {
		endFlg =true;
		alert("おめでとう！");
		return false;
	}
}
strikeList = new Array();
while (strikeList.length < 3){
	var rand = Math.floor(Math.random()*2+1);
	if (!("," + strikeList.join(",") + ",").match("," + rand + ",")) {
		strikeList[strikeList.length] = rand;
	}
}
for (var i = 1; i < 10; i = i +1){
	if (("," + strikeList.join(",") + ",").match("," + i + ",")) {
		$("#wScratchPad" + i).wScratchPad({
			width: 80,
			height: 80,
			image: "/img/atari.png",
			color: "#000",
			cursor: "/img/coin.png",
			size: 50,
			scratchDown: function(e, percent) {
				if (percent > 1){
					count++;
				}
			},
			scratchUp: function(e, percent) {
				check();
			}
		});
	} else {
		$("#wScratchPad" + i).wScratchPad({
			width: 80,
			height: 80,
			image: "/img/hazure.png",
			color: "#000",
			cursor: "/img/coin.png",
			size: 50,
			scratchUp: function(e, percent) {
				if(!endFlg) {
					endFlg = false;
					alert("ざんねんでした！");
				}
			}
		});
	}
}
</script>

この中で

scratchDown: function(e, percent) {
	if (percent > 1){
		count++;
	}
},
scratchUp: function(e, percent) {
		check();
}

この部分に手を加える事でいけそうな気もしており、
いくつか試してみましたが、銀はがし自体が消えてしまったり、
動かなくなってしまったりしてしまいます。

1度削った当たりの部分は、再度触れてもカウントしないようにさせたいのですが、
どうしたら良いのかわからず、お手上げ状態です。

恐縮ではございますが、お知恵貸して頂ければ幸いです。

よろしくお願い致します。

Answer 1

余り良いやり方ではないかもしれませんが、
1％以上だとカウントしてしまうのであれば
特定の％以下の場合のみカウントさせると言う風にしてしまえば良いと思い

scratchDown: function(e, percent) {
	if (percent < 20){
		count++;
	}
},

上記にした所、求めていた挙動になりました。

ご助言頂いた方、ありがとうございました。

Answer 2

scratchDownのコールバックの中から外側の変数がうまく扱えないのですかね・・

scratchDownを削除して、
check関数を次のような感じにしてみたらどうでしょうか。

    const array = []
    function check(e, percent) {
        const id = $(e.target).parent().attr("id")
        if (percent > 1 && !array.includes(id)) {
            array.push(id)
        }
        if (!endFlg && array.length > 2) {
            endFlg = true;
            alert("おめでとう！");
            return false;
        }
    }

Comments

[Hiyoko_mochi]

ご助言ありがとうございます。

check関数で試してみましたが、同じ挙動になってしまい変わらずでした。
只、初歩的な部分に気づき解決しました！