मैं एनीमेशन गेम बनाने की कोशिश कर रहा हूं। एनिमेशन गेम में हर आधे सेकेंड में एक छवि को दूसरे के साथ बारी-बारी से शामिल करना चाहिए। मैं खुश चेहरे वाली मछली के प्रत्येक क्लिक पर count++ और प्रत्येक उदास चेहरे वाली मछली पर count-- क्लिक करने का इरादा रखता हूं। लेकिन, मेरा कोड केवल बढ़ रहा है, जो भी छवि क्लिक की जाती है। साथ ही, मेरा कोड मुझे दो अलग-अलग छवियां दिखाता है जबकि इसे केवल एक ही होना चाहिए।

जब मेरा एनीमेशन चल रहा हो तो मुझे एक क्लिक गिनना होगा (एनीमेशन: छवियों को हर आधे सेकेंड में बदलना चाहिए। ऐसा लगेगा कि मछली आधे सेकेंड के लिए मुस्कुरा रही है और फिर आधे सेकेंड के लिए रो रही है फिर दोहराती है)। अगर मैं खुश चेहरे पर क्लिक करता हूं, तो मैं score 1 करूंगा और अगर उदास-चेहरे पर क्लिक करता हूं तो मैं हार जाऊंगा। अंत में यह आपको जीतना होगा यदि मैं 10 हासिल करता हूं और Start Animation पर क्लिक करने पर फिर से रीसेट हो जाता है।

[Output should be like this:][1]
var image = "happy";
var totalscore = 0;
var counter = 0;
var Schedule;

function happyFish() {
  totalscore++;
  var happyclickSpan = document.getElementById("score");
  happyclickSpan.innerHTML = totalscore;
  counter = counter + 1;
  if (counter == 10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Win!";
  }

}

function sadFish() {
  totalscore--;
  var sadclickSpan = document.getElementById("score");
  sadclickSpan.innerHTML = totalscore;
  counter = counter - 1;
  if (counter == -10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Lose!";
  }
}

function StartAnimation() {
  counter = 0;
  totalscore = 0;
  fish_img = document.getElementById("happy_fish");
  f_img = document.getElementById("happy_fish");
  fish_img.classList.add('on');
  Schedule = setInterval(animationfunction, 500);
}

function animationfunction() {
  if (image == "happy") {
    image = "sad";
    fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png";
  } else {
    image = "happy";
    fish_img.src =
      "https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png";
  }
}
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png" alt="" id="happy_fish" onClick="happyFish()">
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png" alt="" id="sad_fish" onClick="sadFish()">
<br>
<h1 id="d">
  Your Score: <span id="score">0</span>
</h1>
1
mmkk347 16 सितंबर 2018, 07:13

2 जवाब

सबसे बढ़िया उत्तर

मैंने आपके StartAnimation और animationfunction तरीकों को संशोधित किया है ताकि छवि के स्रोत को संशोधित करने की कोशिश करने के बजाय मछली को टॉगल के साथ गायब कर दिया जाए।

मैंने इसे एक सीएसएस वर्ग off के साथ बनाया है जो display: none; के साथ एक मछली को गायब कर देगा

var totalscore = 0;
var counter = 0;
var Schedule;

function happyFish() {
  totalscore++;
  var happyclickSpan = document.getElementById("score");
  happyclickSpan.innerHTML = totalscore;
  counter = counter + 1;
  if (counter == 10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Win!";
  }

}

function sadFish() {
  totalscore--;
  var sadclickSpan = document.getElementById("score");
  sadclickSpan.innerHTML = totalscore;
  counter = counter - 1;
  if (counter == -10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Lose!";
  }
}

function StartAnimation() {
  counter = 0;
  totalscore = 0;
  var initialWords = document.getElementById("d");
    initialWords.innerHTML = "Your Score: <span id=\"score\">0</span>";

  Schedule = setInterval(animationfunction, 500);
}

function animationfunction() {
  var fish_img = document.getElementById("happy_fish");
  var f_img = document.getElementById("sad_fish");

  fish_img.classList.toggle('off');
  f_img.classList.toggle('off');
}
.off {
  display: none;
}
<button onClick="StartAnimation()">Start Animation</button>
<br>
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png" alt="happy" id="happy_fish" onClick="happyFish()">
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png" alt="sad" id="sad_fish" class="off" onClick="sadFish()">
<br>
<h1 id="d">
  Your Score: <span id="score">0</span>
</h1>
1
Pietro Nadalini 16 सितंबर 2018, 08:28

आप एक आईएमजी तत्व और एक क्लिक हैंडलर होने से चीजों को बहुत आसान बना सकते हैं।

स्निपेट में मैंने दो क्लिक हैंडलर को एक में मिला दिया और मछली की स्थिति के लिए एक चेक जोड़ा (बूलियन isHappy द्वारा अब प्रतिनिधित्व किया जा रहा है)।

मैंने इस हैंडलर को आपके HTML में एक img तत्व से जोड़ा है और एनीमेशन फ़ंक्शन में मैं isHappy स्थिति के अनुसार खुश और उदास मछली के बीच इसकी src विशेषता को वैकल्पिक करता हूं।

इसके अतिरिक्त, चूंकि काउंटर और कुल स्कोर समान हैं, इसलिए मैं केवल कुल स्कोर चर का उपयोग करता हूं।

var isHappy = true;
var totalscore;
var Schedule;

function clickFish() {
  if (isHappy) {
    totalscore++;
  } else {
    totalscore--;
  }
  var scoreSpan = document.getElementById("score");
  scoreSpan.innerHTML = totalscore;
  if (totalscore === 10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + totalscore + " Game Over. You Win!";
  }
}

function StartAnimation() {
  isHappy = true
  totalscore = 0;
  clearInterval(Schedule);
  Schedule = setInterval(animationfunction, 500);
}

function animationfunction() {
  fish_img = document.getElementById("fish");
  isHappy = !isHappy;
  if (isHappy) {
    fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png";
  } else {
    fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png";
  }
}
<button onclick="StartAnimation()">Start animation</button><br />
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png" alt="" id="fish" onClick="clickFish()">
<br>
<h1 id="d">
  Your Score:
  <span id="score">0</span>
</h1>
1
Oram 16 सितंबर 2018, 14:02