英文:
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:
-
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. -
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:
let pipeCrossed = false; // Add this variable to track if the pipe has been crossed
const loop = setInterval(() => {
const pipePosition = pipe.offsetLeft;
const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', '');
if (pipePosition <= 0 && marioPosition >= 80 && !pipeCrossed) {
scoreCount();
pipeCrossed = true; // Mark the pipe as crossed
}
if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
// Rest of your code
}
}, 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 -->
const mario = document.querySelector('.mario');
const pipe = document.querySelector('.pipe');
const jump = () => {
mario.classList.add('jump');
setTimeout(() => {
mario.classList.remove('jump');
}, 500);
}
let score = 0;
function scoreCount() {
score++;
document.querySelector('#score').innerHTML = `SCORE: ${score}`;
}
const loop = setInterval(() => {
const pipePosition = pipe.offsetLeft;
const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', '');
if (pipePosition < 0 && marioPosition >= 80) {
scoreCount();
}
if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
pipe.style.animation = 'none';
pipe.style.left = `${pipePosition}px`;
mario.style.animation = 'none';
mario.style.bottom = `${marioPosition}px`;
mario.src = './marioImages/game-over.png';
mario.style.width = '75px';
mario.style.margin = '50px';
clearInterval(loop);
}
}, 10)
document.addEventListener('keydown', jump);
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#score {
font-family: 'Super Mario 256';
margin: 10px;
z-index: 3;
}
.game-board {
width: 100%;
height: 500px;
border-bottom: 15px solid rgb(35, 160, 35);
margin: 0 auto;
position: relative;
overflow: hidden;
background: linear-gradient(#87CEEB, #E0F6FF);
}
.pipe {
position: absolute;
bottom: 0;
width: 80px;
animation: pipe-animation 1.5s infinite linear;
}
.mario {
position: absolute;
width: 150px;
bottom: 0;
z-index: 2;
}
.jump {
animation: jump 500ms ease-out;
}
.clouds {
position: absolute;
width: 500px;
animation: clouds-animation 4s infinite linear;
z-index: 1;
}
@keyframes pipe-animation {
from {
right: -80px;
}
to {
right: 100%;
}
}
@keyframes jump {
0% {
bottom: 0;
}
40% {
bottom: 180px;
}
50% {
bottom: 180px;
}
60% {
bottom: 180px;
}
100% {
bottom: 0;
}
}
@keyframes clouds-animation {
from {
right: -500px;
}
to {
right: 100%;
}
}
@font-face {
font-family: 'Super Mario 256';
src: url(/marioFont/SuperMario256.ttf);
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="marioCSS/mario.css">
<script src="marioJS/mario.js" defer></script>
<title>Mario Jump</title>
</head>
<body>
<div class="game-board">
<h2 id="score">SCORE: 0</h2>
<img src="marioImages/clouds.png" class="clouds">
<img src="marioImages/mario.gif" class="mario">
<img src="marioImages/pipe.png" class="pipe">
</div>
</body>
</html>
<!-- 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
使用此示例的最终代码:
const mario = document.querySelector('.mario');
const pipe = document.querySelector('.pipe');
const jump = () => {
mario.classList.add('jump');
setTimeout(() => {
mario.classList.remove('jump');
}, 500);
}
let score = 0;
let scoreSet = false; // 用于检查是否已经增加了分数的变量
function scoreCount() {
if (!scoreSet) {
score++;
scoreSet = true;
}
document.querySelector('#score').innerHTML = `分数: ${score}`;
}
const loop = setInterval(() => {
const pipePosition = pipe.offsetLeft;
const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', '');
if (pipePosition < 0 && marioPosition >= 80) {
scoreCount();
}
if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
pipe.style.animation = 'none';
pipe.style.left = `${pipePosition}px`;
mario.style.animation = 'none';
mario.style.bottom = `${marioPosition}px`;
mario.src = './marioImages/game-over.png';
mario.style.width = '75px';
mario.style.margin = '50px';
clearInterval(loop);
}
}, 10);
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:
const mario = document.querySelector('.mario');
const pipe = document.querySelector('.pipe');
const jump = () => {
mario.classList.add('jump');
setTimeout(() => {
mario.classList.remove('jump');
}, 500);
}
let score = 0;
let scoreSet = false; // Variable to check whether you already incremented the score
function scoreCount() {
if (!scoreSet) {
score++;
scoreSet = true;
}
document.querySelector('#score').innerHTML = `SCORE: ${score}`;
}
const loop = setInterval(() => {
const pipePosition = pipe.offsetLeft;
const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', '');
if (pipePosition < 0 && marioPosition >= 80) {
scoreCount();
}
if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
pipe.style.animation = 'none';
pipe.style.left = `${pipePosition}px`;
mario.style.animation = 'none';
mario.style.bottom = `${marioPosition}px`;
mario.src = './marioImages/game-over.png';
mario.style.width = '75px';
mario.style.margin = '50px';
clearInterval(loop);
}
}, 10);
document.addEventListener('keydown', jump);
And if you want to increment the score again sometime in the script, just use “scoreSet = false”.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论