如何计算 Javascript 中图像的点击次数？
我需要创建一个网页，其中有一个按钮“开始青蛙游戏”。每当用户点击“开始青蛙游戏”按钮时： ● 按钮下方会出现一条消息，提示“ 您的分数为 0 ”；
● 比分信息下， 每半秒， 随机 出现 5 张 图像 中 的 一张，图像高度应为 150 像素；
● 当用户点击青蛙图片时，用户将获得1分，分数消息应相应更新；
● 当用户点击其他图片时，用户 失去1分 ，分数消息应相应更新（如果用户失去太多，分数可能变为负数）；
● 当分数达到 5 时，用户赢得游戏，游戏停止（图像停止变化），分数消息应显示“ 你的分数是 5。游戏结束 - 你赢了！ ”
● 当分数下降到-5，则用户输掉游戏，游戏停止（图像停止变化），分数信息应显示“ 你的分数是-5。游戏结束 - 你输了！ ”用户可以点击“开始青蛙游戏”按钮重新玩游戏，分数应重置为 0。
我做了什么：
现在已经能够创建一个网页来计算任何图像被点击的次数并让它显示下面的分数。
我需要什么帮助：
我似乎无法弄清楚如何仅在单击青蛙图像时使点数增加，然后在仅单击其他图像（不是青蛙）时使点数减少。当分数达到 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>
阿晨19983回答
-
慕哥9229398
您需要一种方法来识别当前图像是否是青蛙。您可以通过随时向图像添加一个类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);}然后你的score函数（你只需要一个）可以确定图像是否具有“青蛙”类，添加或删除一个点，并在需要时触发残局状态：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] 是青蛙，然后将图像从 0 到 4 随机化。当索引为 0 时，您知道正在显示青蛙图像。 -
慕尼黑8549860
所以想法是创建 5 个图像 ing html 代码，青蛙图像 - onclick="frog"，其余的 - onclick="notfrog()"，在 javascript 文件中创建函数，每 500 毫秒重复一次，并制作一个随机图像出现，另一个函数 - frog()，执行 score++，并检查 score==5，最后一个函数是 notfrog()，与上一个函数非常相似，只是 -score--，并检查 score= =-5,这是我的代码：网页格式<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>javascriptvar 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; }}
随时随地看视频慕课网APP
相关分类
JavaScript