用jQuery打鼹鼠游戏

时间：2016-06-05 13:58:03

标签： javascript jquery html

我正在为一项学校作业开展一场捣蛋游戏，我无法让它发挥作用。

可以在jsfiddle（https://jsfiddle.net/Lc30u5h7/5/）上找到完整的代码，以缩短此问题。

每当我加载代码时，我的“鼹鼠”（黑色方块div）就会消失。通过将我的部分代码转换为注释，我将错误归结为代码的这一部分：

function showMole(tile) {
        if (gameRunning) {
            $(this).css({"background-color": "green"});
            $(tile).data('mole', true);
            randomInt(400, 1200) {hideMole(this)};
        };
};
function hideMole(tile) {
        $(tile).css({"background-color": "black"});
        $(tile).data('mole', false);
        randomInt(4000,48000) {showMole(this)};
};

更具体地说，错误位于函数randomInt（）中，该函数使用以下代码：

function randomInt(min, max){
    return Math.ceil(Math.random() * (max - min) ) + min;
};

这些函数应该代表痣的不同状态。在一个随机间隔之后，一个痣将从hideMole（）切换到showMole（），它将变为绿色并在点击时奖励一个点（由另一段代码处理）。

我感谢任何帮助。

2 个答案:

答案 0 :(得分：0)

我试图让您开始使用一些示例代码。此代码使用了几次来帮助管理游戏。

＆＃13;
＆＃13; 
var game = function() {
  var gameBoard_Selector = "#gameBoard";
  var tile_Selector = ".tile";
  var mole_ClassName = "mole";

  var $gameBoard = $(gameBoard_Selector);
  var $gameTiles = $gameBoard.find(tile_Selector);

  var gameTime = 20 * 1000;
  var turnTime = 1000;

  var moleInterval;
  var moleLifeMin = 1000;
  var moleLifeMax = 3 * 1000;

  var gameScore = 0;

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

  // ------------------------
  // Add a click handler to the board
  // This could be added and removed at start and end as an alternative.
  // or added to each individual tile if you liked that strategy.
  // ------------------------
  $gameBoard.on("click", ".tile", function() {
    var $this = $(this);
    
    // -------------------------
    // if this is not a mole do nothing...
    // -------------------------
    if (!$this.hasClass(mole_ClassName)) { return; }
    // -------------------------

    // -------------------------
    // "hide" this mole and increment the score
    // -------------------------
    $this.removeClass(mole_ClassName);
    gameScore += 1;
    // -------------------------
  });
  // ------------------------

  var startGame = function() {
    gameScore = 0;

    // -------------------------
    // Every turnTime, spawn a new mole.
    // Record moleInterval so we can cancel it when the game ends.
    // -------------------------
    moleInterval = setInterval(spawnMole, turnTime);
    // -------------------------

    // -------------------------
    // The game ends in gameTime
    // -------------------------
    setTimeout(endGame, gameTime);
    // -------------------------
  }

  var endGame = function() {
    // -------------------------
    // Stop spawning new moles
    // -------------------------
    clearInterval(moleInterval);
    // -------------------------

    // -------------------------
    // "hide" any existing moles.
    // -------------------------
    $gameTiles.removeClass(mole_ClassName);
    // -------------------------

    alert("Game Over! Score: " + gameScore);
  }

  var spawnMole = function(timeToLive) {
    // -------------------------
    // Select a random tile to set as a mole.
    // You might adjust to only spawn moles where there are none already.
    // -------------------------
    var $targetTile = $($gameTiles[getRandomIntInclusive(0, $gameTiles.length - 1)]);
    // -------------------------

    // -------------------------
    // Moles shall live for a random amount of time
    // -------------------------
    var timeToLive = getRandomIntInclusive(moleLifeMin , moleLifeMax);
    // -------------------------

    // -------------------------
    // "show" the mole
    // -------------------------
    $targetTile.addClass(mole_ClassName);
    // -------------------------

    // -------------------------
    // after timeToLive, automatically "hide" the mole
    // -------------------------
    setTimeout(function() { $targetTile.removeClass(mole_ClassName); }, timeToLive);
    // -------------------------
  }

  return {
    startGame
  };

}();

game.startGame();
＆＃13; 
#gameBoard {
  margin: auto;
  margin-top: 75px;
  width: 250px;
  height: 250px;
}

#gameBoard .tile {
  background-color: black;
  height: 20%;
  width: 20%;
  margin: 2px;
  display: inline-block;
}

#gameBoard .tile.mole {
  background-color: green;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gameBoard">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我创建了自己的游戏版本来帮助你。

<强>击穿

首先创建变量以存储用户的分数，级别以及他们有多少人的生命。还要为游戏是否正在进行中创建一个布尔变量。这可以防止意外重新点击开始游戏按钮。

我们会将分数增加很多，所以最好为此创建一个可重复使用的功能。在我的示例中，这是displayScore()函数。在我的游戏中，当您获得积分时，您将升级，因此需要更新视图以重新选择。这就是levelUp()功能派上用场的地方。

在游戏板中有16个单元，以4×4矩阵排列。我们可以使用document.querySelectorAll(".cell")查询所有单元格的集合。为了让游戏变得有趣，最好不要知道弹出哪个单元格。这就是为什么一个单元格会在randomCell()函数中随机点亮。

在整个游戏过程中，脚本需要多次检查玩家是否输了。因此，我创建了一个可重复使用的gameOver()函数来计算玩家的生命。如果玩家没有剩余生命，则间隔将被清除，播放状态将被重置为不播放，变量将被重置。

在这里试试。

var score = 0;
var level = 1;
var lives = 5;
var playing = false;

var start = document.getElementById("start");
var scoreDisplay = document.getElementById("score-display");
var cells = document.querySelectorAll(".cell");

function displayScore() {
    levelUp();
    scoreDisplay.innerHTML = "Score: " + score + "<span id='level-display'> Level: " + level + "</span><span id='lifes-display'> Lives: " + lives + "</span>";
}

function levelUp() {
    level = Math.max(Math.floor(score / 10), 1);
}

function randomCell() {
    return Math.floor(Math.random() * 16);
}

function gameOver() {
    if (lives === 0) {
        clearInterval(getCells);
        score = 0;
        level = 1;
        lives = 5;
        playing = false;
    }
}

function highlightCell() {
    var target = randomCell();
    var prevScore = score;
    cells[target].style.background = "green";
    setTimeout(function() {
    	cells[target].style.background = "red";
        if (score === prevScore) {
            lives--;
            displayScore();
            gameOver();
        }
    }, 1000)
}

start.addEventListener("click", function() {
    if (!playing) {
        playing = true;
        displayScore();
        getCells = setInterval(function() {
            highlightCell();
        }, 1500);
    }
});

for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener("click", function() {
        if (playing) {
            var cell = this;
            if (this.style.background === "green") {
                score++;
            }
            else {
                lives--;
                gameOver();
        	}
            displayScore();
        }
    })
}
#game-board {
  height: 330px;
  width: 330px;
  margin: 0 auto;
  border: 1px solid black;
}

.cell {
  display: inline-block;
  width: 21%;
  margin: 4px;
  height: 21%;
  border: 1px solid black;
  background: red;
}

#game-info {
  height: 40px;
  width: 330px;
  margin: 0 auto;
  background: lightblue;
}

#level-display, #lifes-display {
  margin-left: 30px;
}

#start { 
  margin: 10px 37%;
}
<div id="game-info">
  <p id="score-display"></p>
</div>
  
<div id="game-board">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

<button id="start">Start Game</button>

相关问题
最新问题