首頁猿問如何計算 Javascript...

如何計算 Javascript 中圖像的點擊次數？

JavaScript

阿晨1998 2023-05-19 14:27:49

我需要創建一個網頁，其中有一個按鈕“開始青蛙游戲”。每當用戶點擊“開始青蛙游戲”按鈕時： ● 按鈕下方會出現一條消息，提示“ 您的分數為 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>

查看完整描述

3 回答

慕哥9229398

TA貢獻1877條經驗獲得超6個贊

您需要一種方法來識別當前圖像是否是青蛙。您可以通過隨時向圖像添加一個類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;

}

反對回復 2023-05-19

智慧大石

TA貢獻1946條經驗獲得超3個贊

區分青蛙和非青蛙圖像的一種簡單方法是使用數組。將五個圖像 URI 存儲在一個數組中，讓 arr[0] 是青蛙，然后將圖像從 0 到 4 隨機化。當索引為 0 時，您知道正在顯示青蛙圖像。

反對回復 2023-05-19

慕尼黑8549860

TA貢獻1818條經驗獲得超11個贊

所以想法是創建 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>

</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;

}

反對回復 2023-05-19

3 回答
0 關注
206 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何計算 Javascript 中圖像的點擊次數？

如何計算 Javascript 中圖像的點擊次數？

3 回答

添加回答

如何計算 Javascript 中圖像的點擊次數？

如何計算 Javascript 中圖像的點擊次數？