时间戳

首页 > 解决方案 > Java脚本游戏

javascript - Java脚本游戏

问题描述

我正在为我的 java 脚本游戏寻求一些帮助，因为我现在才刚刚开始接触它，

我的问题是我的动画在自动支付上无限循环并在每次满足重新启动的条件时重新加载页面，我想要实现的是有一个开始按钮，可以启动游戏和动画并在点击时得分，如果条件为遇到重启我必须再次按下开始按钮才能再次播放

我会很感激我能得到的所有帮助

 const skate = document.getElementById("skate");
    const rock = document.getElementById("rock");
    const score = document.getElementById("score");

    function jump() {
    skate.classList.add("jump-animation");
    setTimeout(() =>
    skate.classList.remove("jump-animation"), 500);
    }

    document.addEventListener('keypress', (event) => {
    if (!skate.classList.contains('jump-animation')) {
    jump();
    }
    })

    setInterval(() => {
    const skateTop = parseInt(window.getComputedStyle(skate)
    .getPropertyValue('top'));
     const rockLeft = parseInt(window.getComputedStyle(rock)
    .getPropertyValue('left'));
     score.innerText++;

     if (rockLeft < 0) {
     rock.style.display = 'none';
     } else {
     rock.style.display = ''
     }

     if (rockLeft < 50 && rockLeft > 0 && skateTop > 150) {
    
    location.reload();
    
    }
    }, 50);
    #score { text-align: center; }

    #game {
    width: 600px;
    height: 300px;
    border: 2px solid black;
    margin: auto;
    background-image: url("./background.gif");
    background-size: cover;
    }

    #skate {
     height: 75px;
     width: 75px;
     top: 220px;
     position: relative;
     background-image: url("./skateboard.png");
     background-size: cover;
     }

     #rock {
     width: 50px;
     height: 50px;
     position: relative;
     top: 175px;
     left: 550px;
     background-image: url("./rock.png");
     background-size: cover;
     animation: rock 1.33s infinite;
     }

     @keyframes rock {
     0%{left: 550px;}
     100%{left: -50px;}
     }

     .jump-animation {
     animation: jump 0.5s;
     }

    @keyframes jump {
    0%{top: 225px;}
    50%{top: 75px;}
    75%{top: 75px;}
    100%{top: 225px;}
    }
<div id="game">
    <div id="skate"></div>
    <div id="rock"></div>
    </div>
    <h1 id="score">0</h1>

标签： javascripthtmlcss

解决方案

这里的技巧是在该模块的顶部范围内有一个变量来跟踪当前动画的 ID，以便如果用户在当前游戏结束之前按下开始按钮，则可以关闭动画/间隔。一旦满足最终游戏条件，它也应该关闭，虽然我不太确定为什么 window.getComputedStyle() 被用于计算用于该条件的变量，但我想它仍在进行中。

编辑：不知何故，我没有注意到玩家和障碍物已经在游戏中，所以我为它们添加了颜色以便于调试，至少在我这边是这样。这次我做到了，石头会丢失然后立即重新获得一个动画类，但是即使延迟为0ms，重新添加也需要异步。

索引.html

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="game">
        <div id="skate"></div>
        <div id="rock"></div>
    </div>
    <h1 id="score">0</h1>
    </div>
    <div>
        <button id="new-game">New Game </button>
    </div>
</body>

<script>
    const skate = document.getElementById("skate");
    const rock = document.getElementById("rock");
    const score = document.getElementById("score");
    const newGameButton = document.getElementById("new-game");

    function jump() {
        skate.classList.add("jump-animation");
        setTimeout(() => skate.classList.remove("jump-animation"), 500);
    }

    document.addEventListener('keypress', (event) => {
        if (!skate.classList.contains('jump-animation')) {
            jump();
        }
    });


    let animationId;
    newGameButton.addEventListener('click', () => {
        resetScore();
        resetRockAnimation();
        playScoreAnimation();


        function resetScore() {
            clearInterval(animationId);
            score.innerText = 0;
        }
        function resetRockAnimation() {
            rock.classList = [];
            setTimeout(() => rock.classList.add('rock-animation'), 0);
        }
        function playScoreAnimation() {
            animationId = setInterval(() => {
                const skateTop = parseInt(window.getComputedStyle(skate).getPropertyValue('top'));
                const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'));
                score.innerText++;

                if (rockLeft < 0) {
                    rock.style.display = 'none';
                }
                else {
                    rock.style.display = '';
                }

                if (rockLeft < 50 && rockLeft > 0 && skateTop > 150) {
                    clearInterval(animationId);
                }
            }, 50);
        }
    });
</script>

样式.css

#score {
    text-align: center;
}

#game {
    width: 600px;
    height: 300px;
    border: 2px solid black;
    margin: auto;
    background-image: url("./background.gif");
    background-size: cover;
}

#skate {
    height: 75px;
    width: 75px;
    top: 225px;
    position: relative;
    background-image: url("./skateboard.png");
    background-size: cover;

    background-color: slategrey;
}

#rock {
    width: 50px;
    height: 50px;
    position: relative;
    top: 175px;
    left: 550px;
    background-image: url("./rock.png");
    background-size: cover;

    background-color: lightcoral ;
}

.rock-animation {
    animation: rock 1.33s infinite;
}

@keyframes rock {
    0% {
        left: 550px;
    }

    100% {
        left: -50px;
    }
}

.jump-animation {
    animation: jump 0.5s;
}

@keyframes jump {
    0% {
        top: 225px;
    }

    50% {
        top: 75px;
    }

    75% {
        top: 75px;
    }

    100% {
        top: 225px;
    }
}

推荐阅读