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

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

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

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

行動規範の内容に同意します

回答2件

自己解決

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

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

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

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

投稿2022/06/28 04:32

Hiyoko_mochi

総合スコア30

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

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

js
1    const array = []
2    function check(e, percent) {
3        const id = $(e.target).parent().attr("id")
4        if (percent > 1 && !array.includes(id)) {
5            array.push(id)
6        }
7        if (!endFlg && array.length > 2) {
8            endFlg = true;
9            alert("おめでとう！");
10            return false;
11        }
12    }