Javascript 反向动画在游戏中无法正常工作_Javascript_Jquery_Html_Css_Jquery Animate

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

javascript jquery html css

Javascript 反向动画在游戏中无法正常工作,javascript,jquery,html,css,jquery-animate,Javascript,Jquery,Html,Css,Jquery Animate,我正在尝试制作一个简单的Javascript游戏，其中包含一个正方形扩展，而玩家必须点击一个使其变小。目标是使正方形消失，而不是让正方形吞没整个屏幕但我遇到了三个问题： -当我碰到A时，正方形停止扩张并开始变小，但它从不停止。它应该只工作一秒钟左右，然后再次扩展。 -“暂停”按钮“回车”并不总是按其应有的方式工作。我感觉它在等待动画停止，但我不希望它像这样工作。 -正方形不会从中心展开 HTML： <!DOCTYPE HTML> <html> <head&

我正在尝试制作一个简单的Javascript游戏，其中包含一个正方形扩展，而玩家必须点击一个使其变小。目标是使正方形消失，而不是让正方形吞没整个屏幕

但我遇到了三个问题： -当我碰到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>

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

你能把它放在提琴里吗？我试着把图像放在提琴里，但不起作用。你不能上传图像。你需要从网站或某种主机上抓取它们！我想你可以做投递箱之类的！图像现在可以工作了，但其他的都不行。我以前从未用过小提琴。我也不需要上传jquery文件，对吗？

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