如何计算Javascript中图像的点击量

我需要创建一个网页，其中有一个按钮"开始青蛙游戏"。每当用户点击"开始青蛙游戏"按钮时：●按钮下会显示一条消息，上面写着"你的分数为0";

●在得分消息下，每隔半秒，出现5张图像中的一张随机,图像高度应为150像素；

●当用户单击青蛙图像，然后用户赢得1分,并且应当相应地更新分数消息；

●当用户单击其他图像时损失1分,并且应该相应地更新分数消息(如果用户损失太多，分数可能变成负数(；

●当分数达到5时，用户赢得游戏，游戏停止(图像停止更改(，分数消息应显示"你的分数是5。游戏结束-你赢了！">

●当分数下降到-5时，用户输掉游戏，游戏停止(图像停止更改(，分数消息应显示"你的分数是-5。游戏结束-你输了！"用户可以点击"开始青蛙游戏"按钮再次玩游戏，分数应重置为0。

我所做的：

现在，我们已经能够创建一个网页，统计点击ANY IMAGE的次数，并在下面显示分数。

我需要帮助：

我似乎不知道如何只在点击青蛙图像时使积分增加，然后只在点击其他图像(而不是青蛙(时使积分减少。当比分达到5(你赢了(或-5(你输了(时，我也很难让图像停止。

这是我的代码：

function rollImages(){
var counter = 0;
var interval = setInterval(function () {
if (counter === 10000) {
clearInterval(interval);
return;
}
var imageValue = Math.floor(Math.random() * 5) + 1;
var imageFile = "img" + imageValue + ".png";
var theImage = document.getElementById("display");
theImage.src = imageFile;
counter++;
}, 500);
}
var scoreClick = 0;
function score(){
scoreClick = scoreClick + 1;
var scoreSpan = document.getElementById("scoreDisplay");
scoreSpan.innerHTML = scoreClick;
if (scoreClick == 5){
scoreDisplay.innerHTML = " Game over - you win!";
}
}
function minusScore(){
scoreClick = scoreClick - 1;
var scoreSpan = document.getElementById("scoreDisplay");
scoreSpan.innerHTML = scoreClick;
}

<button onClick="rollImages()">Start frog game</button>
<br /><br />
<img height='150px' id="display" onclick="score()">
<br /><br />
<p id="score">Your score is:
<span id="scoreDisplay">0</span></p>

您需要一种方法来识别当前图像是否是青蛙。您可以通过在rollImages()时向图像中添加一个类，或者通过检查其源，或者通过给它一个ID:来实现这一点

function rollImages() {
var counter = 0;
var interval = setInterval(function () {
if (counter === 10000) {
clearInterval(interval);
return;
}
var imageValue = Math.floor(Math.random() * 5) + 1;
var imageFile = "img" + imageValue + ".png";
var theImage = document.getElementById("display");
theImage.src = imageFile;

if (imageValue === 1) {   // <--- Whatever imageValues correspond to frogs
theImage.classList.add("frog");
} else {
theImage.classList.remove("frog");
}
counter++;
}, 500);
}

然后你的CCD_ 2函数(你只需要一个(可以确定图像是否具有"；青蛙；类，添加或删除一个点，并在需要时触发游戏结束状态：

function score(event) {
var img = event.target;
if (img.classList.contains("frog") {
scoreClick += 1;
} else {
scoreClick -+ 1;
}
var scoreSpan = document.getElementById("scoreDisplay");
if (scoreClick >= 5) {
scoreSpan.innerHTML = " Game over - you win!";
return;
}
if (scoreClick <= -5) {
scoreSpan.innerHTML = "LOSER!";
return;
}
}

区分青蛙和非青蛙图像的一种简单方法是使用数组。将五个图像URI存储在一个数组中，并让arr[0]为frog，然后将图像从0随机化为4。当索引为0时，您就知道正在显示青蛙图像。

所以我们的想法是用html代码创建5个图像，到frog图像-onclick="青蛙"；，而剩余的onclick="；notfrog(("；，在javascript文件创建函数中，每500ms收获一次，并随机出现一个图像，另一个函数-frog((，它执行score++，并检查score==5，最后一个函数是notfrog((，与上一个函数非常相似，只是-score-，并检查score是否=-5，

这是我的代码：

html

<style>
img{
width: 150px;
height: 150px;
}
</style>
<body>
<img src="./images/frog.jpg" onclick="frog()" id="frog">
<img src="./images/monkey.jpg" onclick="notfrog()">
<img src="./images/bird.jpg" onclick="notfrog()">
<img src="./images/lion.jpg" onclick="notfrog()">
<img src="./images/giraffe.jpg" onclick="notfrog()">
<span id="score">0</span>
</body>

javascript

var images = document.querySelectorAll("img");
var score_html = document.getElementById('score');
var score = 0;
var repeat_fn = setInterval(function choose_image(){
var random = Math.floor(Math.random() * images.length);
images[random].style.display = 'block';
for(var i = 0; i<=images.length; i++){
if(i != random){
images[i].style.display = 'none';
}
}
}, 500)
function frog(){
score++;
if(score === 5){
score_html.innerHTML = "you won";
score = 0;
}
else{
score_html.innerHTML = score;
}
}
function notfrog(){
score--;
score_html.innerHTML = score;
if(score === -5){
score_html.innerHTML = "you lost";
score = 0;
}
}

相关内容

最新更新

热门标签：