文章/答案/技术大牛

发布

社区首页 >问答首页 >Java脚本游戏

问Java脚本游戏
EN

Stack Overflow用户

提问于 2020-12-15 11:31:49

回答 1查看 99关注 0票数 0

我正在寻找一些关于我的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>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2020-12-15 12:08:48

这里的技巧是在此模块的顶部作用域中有一个变量来跟踪当前动画的ID，以便如果用户在当前游戏结束前按下start按钮，则可以关闭动画/间隔。一旦满足结束条件，它也应该关闭，尽管我不是很确定为什么要使用window.getComputedStyle()来计算用于该条件的变量，但我猜这仍然是一项正在进行的工作。

编辑:不知何故，我没有注意到玩家和障碍物已经在游戏中了，所以我给它们添加了颜色，以便更容易调试，至少在我这一端是这样。这一次我让岩石失去，然后立即为它的动画重新获得一个类，但是重新添加需要是异步的，即使延迟是0ms。

index.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>

style.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;
    }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65299630

复制

相似问题

问Java脚本游戏
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Java脚本游戏EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Java脚本游戏
EN