Question

我试图制作一个简单的Javascript游戏，其中包括一个正方形扩展，而玩家必须击中＆＃34; A＆＃34;使它变小。目标是让广场消失，不要让广场吞没整个画面。

但我遇到了三个问题： - 当我击中A时，方块停止扩展并开始变小，但它永远不会停止。它应该只工作一秒钟，然后再次扩展。 - 暂停按钮（输入）并不总是按照应有的方式工作。我觉得它等待动画停止，但我不希望它像这样工作。 - 广场不会从中心扩展。

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="styles/game.css"></link>
        <script language="javascript" type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="scripts/game.js"></script>
    </head>
    <body>
        <section class="game">
            <div id="game" style="position:absolute;"><img id="player" class="square"></img></div>
        </section>
    </body>
</html>

Javascript：

//set update interval
setInterval(update, 10);
var isPlaying = false;

$(document).ready(function() {

});



function playerInput() {
    $(document).keydown(function(event) {
        if ( event.which == 65 ) {
            if (isPlaying == true) {
                $("#player").animate({height: '-=10', width: '-=10'}, 1);
            }
        } else if (event.which == 13) {
            isPlaying = !isPlaying;
        }
    });
}


function update() {
    playerInput();
    if (isPlaying == true) {
        $("#player").animate({height: '+=10', width: '+=10'}, 1);
    }
}

CSS：

body, html {
    height: 1000px;
    width: 1000px;
    margin: auto;
    background-color: black;
}

.game {
    height: 800px;
    width: 800px;
    margin: auto;
    margin-top: 10px;
    background-color: black;

}

.square {
    background-image: url("../images/square.png");
    margin: 375px;
    height: 30px;
    width: 30px;
}

向后动画在游戏中无法正常工作

0 个答案: