个人中心
gpt4 book ai didi

javascript - 在 JQuery (Javascript) 中构建内存游戏迷你游戏

转载 作者：行者123 更新时间：2023-11-28 03:38:02 26 4
gpt4 key购买 nike

我正在为我的主要元素制作一组迷你游戏，一直在按照互联网上的教程为其中一个制作内存游戏。

代码在我生成新板的地方运行，但其余代码似乎不起作用。我在我的scipting中做错了什么吗？谁能告诉我哪里出错了？

这是我的内存小游戏代码。

$(document).ready(function() {

  //speech
  var progress = 0;
  var txt;
  $('#complete, #speech').hide();

  function eventHandler() {
    switch (progress) {
      case 0:
        txt = "Complete";
        break;
      case 1:
        txt = "Move on the the next game";
        $('#speech').click(function() {
          window.location.href = "minigame4.html"; //next minigame
        });
        break;
    }
    progress++;
    $('#speech').html(txt);
  }

  $('#speech').click(eventHandler);

  // Memory Game //

  var memory_array = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H', 'I', 'I', 'J', 'J', 'K', 'K', 'L', 'L'];
  var memory_values = [];
  var memory_tile_ids = [];
  var tiles_flipped = 0;

  //shuffle method
  Array.prototype.memory_tile_shuffle = function() {
    var i = this.length,
      j, temp;
    while (--i > 0) {
      j = Math.floor(Math.random() * (i + 1));
      temp = this[j];
      this[j] = this[i];
      this[i] = temp;
    }
  }

  //generate new board
  function newBoard() {
    tiles_flipped = 0;
    var output = '';
    memory_array.memory_tile_shuffle();
    for (var i = 0; i < memory_array.length; i++) {
      output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')" class="tiles"></div>';
    }
    $('#memory_board').html(output);
  }

  newBoard();

  //
  // all code works up to here

  function memoryFlipTile(tile, val) {
    // When tile is clicked, change colour to white along with its letter
    if (tile.html == "" && memory_values.length < 2) {
      tile.style.background = '#FFF';
      tile.html = val;
      // If no tiles are flipped
      if (memory_values.length == 0) {
        memory_values.push(val);
        memory_tile_ids.push(tile.id);
        // If one tile is already flipped
      } else if (memory_values.length == 1) {
        memory_values.push(val);
        memory_tile_ids.push(tile.id);
        // See if both tiles are a match
        if (memory_values[0] == memory_values[1]) {
          tiles_flipped += 2;
          // Clear both arrays
          memory_values = [];
          memory_tile_ids = [];
          // Check to see if the whole board is cleared
          // then display complete
          if (tiles_flipped == memory_array.length) {
            $("#complete").show(0, function() {
              eventHandler()
              $('#speech').show();
            });
          }
        } else {
          function flip2Back() {
            // Flip the 2 tiles back over
            var tile_1 = document.getElementById(memory_tile_ids[0]);
            var tile_2 = document.getElementById(memory_tile_ids[1]);
            tile_1.style.background - image = 'url(images/puzzle5/blank.png) no-repeat';
            tile_1.html = "";
            tile_2.style.background - image = 'url(images/puzzle5/blank.png) no-repeat';
            tile_2.html = "";
            // Clear both arrays
            memory_values = [];
            memory_tile_ids = [];
          }
          setTimeout(flip2Back, 700);
        }
      }
    }
  }
});
div#memory_board {
  padding: 24px;
  margin: 0px auto;
  width: 456px;
  height: 300px;
}

div#memory_board div {
  float: left;
  margin: 10px;
  padding: 28px;
  font-size: 50px;
  cursor: pointer;
  text-align: center;
  background-image: url(images/puzzle5/blank.png);
}

#complete {
  position: absolute;
  width: 105px;
  height: 25px;
  top: 240px;
  left: 289px;
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 10px;
  border-style: solid;
  border-width: 5px;
  border-color: white;
  z-index: 5;
}

#speech {
  position: absolute;
  width: 655px;
  height: 100px;	
  top: 330px;
  left: 15px;
  background-color: black;
  color: white;
  font-size: 25px;
  padding: 10px;
  border-style: solid;
  border-width: 5px;
  border-color: white;
  z-index: 99;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>MAS340</title>
  <link href="styles.css" rel="stylesheet" />
  <script src="jquery-3.1.1.min.js"></script>
  <script>
    //javascript goes here
  </script>
</head>

<body>
  <div id="stage">
    <div id="memory_board"></div>
  </div>
</body>

</html>

最佳答案

除了一些用户提到的更改之外，您的脚本还需要进行其他更改。既然您已经在使用 jQuery，为什么不充分利用它呢？

还使用 jQuery 附加了事件，如下所示，因为我怀疑它能够在将元素放入 dom 时看到脚本中定义的函数。 (虽然还不确定原因)

我已经在下面的 fiddle 中更改了您的代码。请检查它是否适合你(只是更正了语法并用 jquery 替换了一些 javascript 代码)

$(文档).on('点击','.tiles',function(){
memoryFlipTile($(this),$(this).data("memchar"))
})

Check Fiddle

代码仍有优化空间。

关于javascript - 在 JQuery (Javascript) 中构建内存游戏迷你游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44361917/

26 4 0
文章推荐： javascript - 如何发布我在 Rails 中看到的一些问题的 jsfiddle 示例？
文章推荐： css - 如何使用 CSS 禁用高光？
文章推荐： javascript - jQuery 用户界面 : Increase the padding on resizeable()
文章推荐： javascript - 如何在 MVC 4 中包含基于 JavaScript 的插件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com