JS/JQ 打地鼠游戏

Question

大家好，我正在尝试制作一款 JS/JQ 游戏：打地鼠。

我制作了一个'world'，其中有 6 个 div 可以改变颜色（以显示痣的位置），我还有三个按钮可以选择简单、正常或困难.

我坚持两件事： 1 : button.click 不会对任何事情做出反应（即使是 p 上最简单的 css 变化也不行） 2：divs 没有改变颜色（这可能是问题 1 的后续行动）

这是我的代码：

ID为"car"、文本为"blablacar"的p是为了显示'simple'点击命令改变颜色。

谁能看出我的代码有什么问题（可能很多，但只是按钮部分）？感谢您阅读我的 post

enter code here



<body>

    <script type="text/javascript" src="../jquery-3.1.1.js">
    "use strict";

        var currentScore = 0;
        var niveau = 0;
        var currentLives = 3;
        var inAction = false;

        var moleworld = "#moleWorld";
        var field = ".field";

        var beginEasyClick = document.getElementById("beginEasyClick");
        var beginnNormalClick = document.getElementById("beginNormalClick");
        var beginHardClick = document.getElementById("beginHardClick");

        var displayScore = document.getElementById("_displayScore");
        var $field = $(moleworld).find(field);


        var getrandomInt(function(min , max)
                         {return Math.floor(Math.random() * (max - min - 1 )) + min}

        function randomField() {
$($field[getrandomInt(0 , 8)]);





            function showmole()
            {
                $(beginEasyClick).click(function{

                $("#car").css("color" , "blue");
            })};

    </script>
<p id="car">blablacar</p>
<div id="StartMenu"></div>
 <button id="beginEasyClick"> Easy </button>
    <button id="beginNormalClick"> Normal </button>
    <button id="beginHardClick"> Hard </button>
<div id="generalInformation">
<p id="_displayScore"> </p> </div>

<div id="moleWorld">

  <div class="field"> </div> 
     <div class="field"> </div> 
     <div class="field"> </div> 
     <div class="field"> </div> 
     <div class="field"> </div> 
     <div class="field"> </div> 
    <div class="field"> </div> 
    <div class="field"> </div> 
    </div>

</body>

Answer 1

除了一些括号错误（即使是无参数函数也需要有空 () 括号），按钮的 click() 事件处理程序是在 showmole() 函数中定义的，不会在任何地方调用。您必须将此部分移动到脚本的 $().ready() 部分，以便在加载文档后立即添加处理程序。

$().ready(function() {
  $(beginEasyClick).click(function () {
    $("#car").css("color", "blue");
  });
});

如评论中所述，您将来还应该 post 将您的代码放在 jsfiddle so that others can more easily help you. Here's the fiddle 上，以便您的代码具有一个有效的 "easy" 按钮。

JS/JQ 打地鼠游戏

JS/JQ Whack-A-Mole Game

html

javascript

css

jquery

2d-games