如何在马里奥跳跃管道时使分数增加+1个单位?

huangapple go评论64阅读模式
英文:

How to make a score increment just +1 unity when Mario jump pipe?

问题

I understand that you're trying to increment the score by just +1 when Mario jumps the pipe, but it's increasing by more than 1.

To address this issue, you can try the following:

  1. Ensure that the scoreCount function is only called once per pipe jump. You can do this by adding a condition to check if the score has already been counted for that particular pipe.

  2. Check if the pipe's position is less than or equal to 0 and if Mario's position is greater than or equal to 80 before incrementing the score. This ensures that the score is only incremented when Mario successfully jumps over the pipe.

Here's the modified code snippet:

  1. let pipeCrossed = false; // Add this variable to track if the pipe has been crossed
  2. const loop = setInterval(() => {
  3. const pipePosition = pipe.offsetLeft;
  4. const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', '');
  5. if (pipePosition <= 0 && marioPosition >= 80 && !pipeCrossed) {
  6. scoreCount();
  7. pipeCrossed = true; // Mark the pipe as crossed
  8. }
  9. if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
  10. // Rest of your code
  11. }
  12. }, 10)

By adding the pipeCrossed variable and checking it in the loop, you can ensure that the score is incremented only once per pipe jump.

英文:

I'm trying to make a score increment of just +1 unity when Mario jumps the pipe, but the score increases by more than 1 unity when that happens. How can I do this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const mario = document.querySelector(&#39;.mario&#39;);
  2. const pipe = document.querySelector(&#39;.pipe&#39;);
  3. const jump = () =&gt; {
  4. mario.classList.add(&#39;jump&#39;);
  5. setTimeout(() =&gt; {
  6. mario.classList.remove(&#39;jump&#39;);
  7. }, 500);
  8. }
  9. let score = 0;
  10. function scoreCount() {
  11. score++;
  12. document.querySelector(&#39;#score&#39;).innerHTML = `SCORE: ${score}`;
  13. }
  14. const loop = setInterval(() =&gt; {
  15. const pipePosition = pipe.offsetLeft;
  16. const marioPosition = +window.getComputedStyle(mario).bottom.replace(&#39;px&#39;, &#39;&#39;);
  17. if (pipePosition &lt; 0 &amp;&amp; marioPosition &gt;= 80) {
  18. scoreCount();
  19. }
  20. if (pipePosition &lt;= 120 &amp;&amp; pipePosition &gt; 0 &amp;&amp; marioPosition &lt; 80) {
  21. pipe.style.animation = &#39;none&#39;;
  22. pipe.style.left = `${pipePosition}px`;
  23. mario.style.animation = &#39;none&#39;;
  24. mario.style.bottom = `${marioPosition}px`;
  25. mario.src = &#39;./marioImages/game-over.png&#39;;
  26. mario.style.width = &#39;75px&#39;;
  27. mario.style.margin = &#39;50px&#39;;
  28. clearInterval(loop);
  29. }
  30. }, 10)
  31. document.addEventListener(&#39;keydown&#39;, jump);

<!-- language: lang-css -->

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. #score {
  7. font-family: &#39;Super Mario 256&#39;;
  8. margin: 10px;
  9. z-index: 3;
  10. }
  11. .game-board {
  12. width: 100%;
  13. height: 500px;
  14. border-bottom: 15px solid rgb(35, 160, 35);
  15. margin: 0 auto;
  16. position: relative;
  17. overflow: hidden;
  18. background: linear-gradient(#87CEEB, #E0F6FF);
  19. }
  20. .pipe {
  21. position: absolute;
  22. bottom: 0;
  23. width: 80px;
  24. animation: pipe-animation 1.5s infinite linear;
  25. }
  26. .mario {
  27. position: absolute;
  28. width: 150px;
  29. bottom: 0;
  30. z-index: 2;
  31. }
  32. .jump {
  33. animation: jump 500ms ease-out;
  34. }
  35. .clouds {
  36. position: absolute;
  37. width: 500px;
  38. animation: clouds-animation 4s infinite linear;
  39. z-index: 1;
  40. }
  41. @keyframes pipe-animation {
  42. from {
  43. right: -80px;
  44. }
  45. to {
  46. right: 100%;
  47. }
  48. }
  49. @keyframes jump {
  50. 0% {
  51. bottom: 0;
  52. }
  53. 40% {
  54. bottom: 180px;
  55. }
  56. 50% {
  57. bottom: 180px;
  58. }
  59. 60% {
  60. bottom: 180px;
  61. }
  62. 100% {
  63. bottom: 0;
  64. }
  65. }
  66. @keyframes clouds-animation {
  67. from {
  68. right: -500px;
  69. }
  70. to {
  71. right: 100%;
  72. }
  73. }
  74. @font-face {
  75. font-family: &#39;Super Mario 256&#39;;
  76. src: url(/marioFont/SuperMario256.ttf);
  77. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7. &lt;link rel=&quot;stylesheet&quot; href=&quot;marioCSS/mario.css&quot;&gt;
  8. &lt;script src=&quot;marioJS/mario.js&quot; defer&gt;&lt;/script&gt;
  9. &lt;title&gt;Mario Jump&lt;/title&gt;
  10. &lt;/head&gt;
  11. &lt;body&gt;
  12. &lt;div class=&quot;game-board&quot;&gt;
  13. &lt;h2 id=&quot;score&quot;&gt;SCORE: 0&lt;/h2&gt;
  14. &lt;img src=&quot;marioImages/clouds.png&quot; class=&quot;clouds&quot;&gt;
  15. &lt;img src=&quot;marioImages/mario.gif&quot; class=&quot;mario&quot;&gt;
  16. &lt;img src=&quot;marioImages/pipe.png&quot; class=&quot;pipe&quot;&gt;
  17. &lt;/div&gt;
  18. &lt;/body&gt;
  19. &lt;/html&gt;

<!-- end snippet -->

I tried to create a function scoreCount to increment the score.

And then I called the scoreCount function into the 'loop' for when 'pipePosition' get out of the window, adding +1 to the score.

But it increments much more than 1.

答案1

得分: 1

以下是您要翻译的内容:

因此,似乎在一个setInterval循环内调用了scoreCount()函数,这将不断调用该函数并重复增加得分。

如果您仍希望将其放在循环内,我建议以下操作:

  • 创建一个全局变量“scoreSet”并将其设置为false
  • 添加一个if语句来检查“scoreSet”是否为true
  • 如果为true,请阻止分数再次增加
  • 如果为false,则允许增加分数,但将scoreSet设置为true

使用此示例的最终代码:

  1. const mario = document.querySelector('.mario');
  2. const pipe = document.querySelector('.pipe');
  3. const jump = () => {
  4. mario.classList.add('jump');
  5. setTimeout(() => {
  6. mario.classList.remove('jump');
  7. }, 500);
  8. }
  9. let score = 0;
  10. let scoreSet = false; // 用于检查是否已经增加了分数的变量
  11. function scoreCount() {
  12. if (!scoreSet) {
  13. score++;
  14. scoreSet = true;
  15. }
  16. document.querySelector('#score').innerHTML = `分数: ${score}`;
  17. }
  18. const loop = setInterval(() => {
  19. const pipePosition = pipe.offsetLeft;
  20. const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', '');
  21. if (pipePosition < 0 && marioPosition >= 80) {
  22. scoreCount();
  23. }
  24. if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
  25. pipe.style.animation = 'none';
  26. pipe.style.left = `${pipePosition}px`;
  27. mario.style.animation = 'none';
  28. mario.style.bottom = `${marioPosition}px`;
  29. mario.src = './marioImages/game-over.png';
  30. mario.style.width = '75px';
  31. mario.style.margin = '50px';
  32. clearInterval(loop);
  33. }
  34. }, 10);
  35. document.addEventListener('keydown', jump);

如果您希望在脚本中的某个时候再次增加分数,只需使用“scoreSet = false”。

英文:

So it seems that scoreCount() is called inside a setInterval loop, which will keep calling the function and increment the score repeatedly.

If you still want it inside the loop, I recommend the following:

  • Create a global variable “scoreSet” and set it to false
  • Add an if statement to check if “scoreSet” is true
  • If it is true, block the score from incrementing again
  • If it is false, let it increment the score, but set scoreSet to true

Final code using this example:

  1. const mario = document.querySelector(&#39;.mario&#39;);
  2. const pipe = document.querySelector(&#39;.pipe&#39;);
  3. const jump = () =&gt; {
  4. mario.classList.add(&#39;jump&#39;);
  5. setTimeout(() =&gt; {
  6. mario.classList.remove(&#39;jump&#39;);
  7. }, 500);
  8. }
  9. let score = 0;
  10. let scoreSet = false; // Variable to check whether you already incremented the score
  11. function scoreCount() {
  12. if (!scoreSet) {
  13. score++;
  14. scoreSet = true;
  15. }
  16. document.querySelector(&#39;#score&#39;).innerHTML = `SCORE: ${score}`;
  17. }
  18. const loop = setInterval(() =&gt; {
  19. const pipePosition = pipe.offsetLeft;
  20. const marioPosition = +window.getComputedStyle(mario).bottom.replace(&#39;px&#39;, &#39;&#39;);
  21. if (pipePosition &lt; 0 &amp;&amp; marioPosition &gt;= 80) {
  22. scoreCount();
  23. }
  24. if (pipePosition &lt;= 120 &amp;&amp; pipePosition &gt; 0 &amp;&amp; marioPosition &lt; 80) {
  25. pipe.style.animation = &#39;none&#39;;
  26. pipe.style.left = `${pipePosition}px`;
  27. mario.style.animation = &#39;none&#39;;
  28. mario.style.bottom = `${marioPosition}px`;
  29. mario.src = &#39;./marioImages/game-over.png&#39;;
  30. mario.style.width = &#39;75px&#39;;
  31. mario.style.margin = &#39;50px&#39;;
  32. clearInterval(loop);
  33. }
  34. }, 10);
  35. document.addEventListener(&#39;keydown&#39;, jump);

And if you want to increment the score again sometime in the script, just use “scoreSet = false”.

huangapple
  • 本文由 发表于 2023年5月14日 05:26:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76244947.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定