评论太长了。
根据我从游戏中了解到的情况。您有 36 个框,您需要单击随机框。如果您单击正确框的 X 个数字,您就赢了。
我能够通过检查 HTML 并搜索指示获胜密钥的图像来作弊。图像名称是images/keytowin/frontImage.png
一种解决方案可能是不将指示“正确”选择的图像预先分配给 HTML div。相反,仅在单击图像后分配图像。这将使它更难找到,因为单独的 HTML 不会泄露它。
这里的想法是Random
。使用 Javascript,生成 3 个介于 1 和 36 之间的随机数。这三个随机数表示中奖框。如果用户单击一个框,并且它具有相同的编号(我注意到div
编号为data-id="1"
),则使用 JS 在内部 div 中动态添加图像。
然而,这三个随机数将在游戏开始时确定。因此,模糊变量很重要。
我提供了一个示例代码来演示这个概念。
var luckyNumbers = getUniqueNumbers();
var winImg = "<img src='https://mcthompsonatl.github.io/images/keytowin/frontImage.png' alt='X LOGO'>";
var loseImg = "<img src='https://mcthompsonatl.github.io/images/keytowin/TryAgain.png' alt='X LOGO'>";
console.log(luckyNumbers);
$(".card").on("click", function() {
if (!$(this).hasClass("clicked")) {
$(this).addClass("clicked");
selected = Number($(this).attr("data-id"));
if (luckyNumbers.indexOf(selected) > -1) {
//code to put a key image
$(this).find(".back").append(winImg);
} else {
console.log("wrong: " + selected);
//code to put not-winning image
$(this).find(".back").append(loseImg);
}
}
});
function getUniqueNumbers() {
var arr = []
while (arr.length < 3) {
var someRand = Math.ceil(Math.random() * 36)
if (arr.indexOf(someRand) > -1) continue;
arr[arr.length] = someRand;
}
return arr;
}
img {
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>JS Bin</title>
</head>
<body>
<div class="game">
<div class="card" data-id="5">
<div class="inside">
<div class="front">
<img src="image/someimage.jpg" alt="keytowin">
</div>
<div class="back">
</div>
</div>
</div>
<div class="card" data-id="6">
<div class="inside">
<div class="front">
<img src="image/someimage.jpg" alt="keytowin">
</div>
<div class="back">
</div>
</div>
</div>
<div class="card" data-id="7">
<div class="inside">
<div class="front">
<img src="image/someimage.jpg" alt="keytowin">
</div>
<div class="back">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js">
</script>
</body>
</html>