javascript - 如何让我的 JavaScript 内存游戏选择不超过 2 个方 block

标签 javascript html css

我正在研究这个内存游戏，我正在尝试解决一个问题，如果用户强调游戏并快速点击多个方 block ，第一个点击的方 block 将保持打开状态并且永远不会再次关闭，即使您发现它的比赛。

除非其他人有更好的主意，否则我正在寻找一种方法来在 2 个方 block 处于运动状态时禁用点击事件。所以你必须等待两者关闭或匹配，直到你可以点击另一个方 block 。

我也想只使用 javascript，不使用 jQuery。

let resetButton = document.getElementById("reset-button");


let colors = [];
for (let i = 0; i < 10; i++) {
  colors.push('square-' + i);
}

function GameSquare(el, color) {
  this.el = el;
  this.isOpen = false;
  this.isLocked = false;
  this.el.addEventListener("click", this, false);
  this.setColor(color); // Setting the flag.
}


GameSquare.prototype.handleEvent = function(e) {
  switch (e.type) {
    case "click":
      if (this.isOpen || this.isLocked) {
        return;
      }
      this.isOpen = true;
      this.el.classList.add('flip');
      checkGame(this); // checking the game
  }
}

GameSquare.prototype.reset = function() {
  this.isOpen = false;
  this.isLocked = false;
  this.el.classList.remove('flip');
}


GameSquare.prototype.lock = function() {
  this.isLocked = true;
  this.isOpen = true;
}


GameSquare.prototype.setColor = function(color) {
  this.el.children[0].children[1].classList.remove(this.color);
  this.color = color;
  this.el.children[0].children[1].classList.add(color);
}


let gameSquares = [];


function setupGame() {
  let array = document.getElementsByClassName("game-square");
  let randomColors = getSomeColors();
  for (let i = 0; i < array.length; i++) {
    let index = random(randomColors.length);
    let color = randomColors.splice(index, 1)[0];
    gameSquares.push(new GameSquare(array[i], color));
  }
}

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



function getSomeColors() {
  let colorscopy = colors.slice();

  let randomColors = [];

  for (let i = 0; i < 8; i++) {
    let index = random(colorscopy.splice.length);
    randomColors.push(colorscopy.splice(index, 1)[0]);
  }
  return randomColors.concat(randomColors.slice());
}

let firstSquare = null;


function checkGame(gameSquare) {
  if (firstSquare === null) {
    firstSquare = gameSquare;
    return
  }

  if (firstSquare.color === gameSquare.color) {
    firstSquare.lock();
    gameSquare.lock();
  } else {
    let a = firstSquare;
    let b = gameSquare;
    setTimeout(function() {
      a.reset();
      b.reset();
      firstSquare = null;
    }, 400);
  }
  firstSquare = null;
}


function randomizeColors() {
  let randomColors = getSomeColors();
  gameSquares.forEach(function(gameSquare) {
    let color = randomColors.splice(random(randomColors.length), 1)[0];
    gameSquare.setColor(color);
  });
}

function clearGame() {
  gameSquares.forEach(function(gameSquare) {
    gameSquare.reset();
  });
  setTimeout(function() {
    randomizeColors();
  }, 500);
}

setupGame();
.game-square {
  box-sizing: border-box;
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.game-square>div {
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0;
}

.game-square>div>div {
  height: 50%;
}

.game-square>div>div:first-child {
  background-color: gray;
}

.flip>div {
  top: -100%;
}

.square-0 {
  background-color: aqua;
}

.square-1 {
  background-color: bisque;
}

.square-2 {
  background-color: blue;
}

.square-3 {
  background-color: blueviolet;
}

.square-4 {
  background-color: brown;
}

.square-5 {
  background-color: cadetblue;
}

.square-6 {
  background-color: chartreuse;
}

.square-7 {
  background-color: chocolate;
}

.square-8 {
  background-color: coral;
}

.square-9 {
  background-color: cornflowerblue;
}

#game {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid red;
}
<div class="container">
  <div id="game">
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <button onclick="clearGame();">Reset Game</button>
</div>

最佳答案

您可以添加一个全局指示器，指示当前有多少个处于打开状态。即:让 areOpen = 0

每次转动卡片时将它增加 1，并更新点击事件中的条件检查以也检查它:if (this.isOpen || this.isLocked || areOpen == 2) {

然后在每次完成一个回合后将其重置为 0。现在用户点击的速度应该无关紧要。

最有可能有更多更好的方法，但这似乎行得通并且可以从这里改进。

let areOpen = 0;
let resetButton = document.getElementById("reset-button");

let colors = [];
for (let i = 0; i < 10; i++) {
  colors.push('square-' + i);
}

function GameSquare(el, color) {
  this.el = el;
  this.isOpen = false;
  this.isLocked = false;
  this.el.addEventListener("click", this, false);
  this.setColor(color); // Setting the flag.
}


GameSquare.prototype.handleEvent = function(e) {
  switch (e.type) {
    case "click":
      if (this.isOpen || this.isLocked || areOpen == 2) {
        return;
      }
      areOpen += 1;
      this.isOpen = true;
      this.el.classList.add('flip');
      checkGame(this); // checking the game
  }
}

GameSquare.prototype.reset = function() {
  this.isOpen = false;
  this.isLocked = false;
  this.el.classList.remove('flip');
}


GameSquare.prototype.lock = function() {
  this.isLocked = true;
  this.isOpen = true;
}


GameSquare.prototype.setColor = function(color) {
  this.el.children[0].children[1].classList.remove(this.color);
  this.color = color;
  this.el.children[0].children[1].classList.add(color);
}


let gameSquares = [];


function setupGame() {
  let array = document.getElementsByClassName("game-square");
  let randomColors = getSomeColors();
  for (let i = 0; i < array.length; i++) {
    let index = random(randomColors.length);
    let color = randomColors.splice(index, 1)[0];
    gameSquares.push(new GameSquare(array[i], color));
  }
}

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



function getSomeColors() {
  let colorscopy = colors.slice();

  let randomColors = [];

  for (let i = 0; i < 8; i++) {
    let index = random(colorscopy.splice.length);
    randomColors.push(colorscopy.splice(index, 1)[0]);
  }
  return randomColors.concat(randomColors.slice());
}

let firstSquare = null;


function checkGame(gameSquare) {
  if (firstSquare === null) {
    firstSquare = gameSquare;
    return
  }

  if (firstSquare.color === gameSquare.color) {
    firstSquare.lock();
    gameSquare.lock();
    areOpen = 0;
    firstSquare = null;
  } else {
    let a = firstSquare;
    let b = gameSquare;
    setTimeout(function() {
      a.reset();
      b.reset();
      areOpen = 0;
      firstSquare = null;
    }, 400);
  }
}


function randomizeColors() {
  let randomColors = getSomeColors();
  gameSquares.forEach(function(gameSquare) {
    let color = randomColors.splice(random(randomColors.length), 1)[0];
    gameSquare.setColor(color);
  });
}

function clearGame() {
  gameSquares.forEach(function(gameSquare) {
    gameSquare.reset();
  });
  setTimeout(function() {
    randomizeColors();
  }, 500);
  areOpen = 0;
}

setupGame();
.game-square {
  box-sizing: border-box;
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.game-square>div {
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0;
}

.game-square>div>div {
  height: 50%;
}

.game-square>div>div:first-child {
  background-color: gray;
}

.flip>div {
  top: -100%;
}

.square-0 {
  background-color: aqua;
}

.square-1 {
  background-color: bisque;
}

.square-2 {
  background-color: blue;
}

.square-3 {
  background-color: blueviolet;
}

.square-4 {
  background-color: brown;
}

.square-5 {
  background-color: cadetblue;
}

.square-6 {
  background-color: chartreuse;
}

.square-7 {
  background-color: chocolate;
}

.square-8 {
  background-color: coral;
}

.square-9 {
  background-color: cornflowerblue;
}

#game {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid red;
}
<div class="container">
  <div id="game">
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="game-square">
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <button onclick="clearGame();">Reset Game</button>
</div>

There is an existing logical bug with your reset game When you select a single square and then press reset game the game seems to now ignore that square and 3 will be visually selected when that square is used again.

I couldn't work it out yet but definitely is a bug in the original code as well

编辑:找到 Bug，删除 checkGame 末尾的 firstSquare === null; 并在找到匹配项时将其添加到第一个 if 条件。

关于javascript - 如何让我的 JavaScript 内存游戏选择不超过 2 个方 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47756253/

上一篇：javascript - 使用 javascript 创建嵌套的 div

下一篇：html - 如何在 HTML 中编写化学式？

相关文章：

php - 将 Html 单击重定向到其他页面的特定区域

javascript - fancytree 拖放节点恢复到原来的位置

javascript - 如何检查获取响应以调用另一个获取响应？

javascript - 来自 url 的文件名(不包括查询字符串)

html - 中长期 HTML5 CSS3 的最佳浏览器？

html - CSS 多个 div 样式

javascript - 使用 Python 自动登录带有 JavaScript 表单的网站

html - Bootstrap，根据内容调整大小

jquery - 出现错误 : "$(...).carousel is not a function" although I've included JQuery, Bootstrap.min.css 和 Bootstrap.min.js

html - 如何在没有重叠阴影的情况下进行导航

©2024 IT工具网  联系我们