文章/答案/技术大牛

发布

社区首页 >问答首页 >如何让我的JavaScript memory游戏选择不超过2个方块

问如何让我的JavaScript memory游戏选择不超过2个方块
EN

Stack Overflow用户

提问于 2017-12-11 23:34:43

回答 1查看 197关注 0票数 3

我正在做这个记忆游戏，我试图解决一个问题，如果用户对游戏施加压力并快速点击多个方块，第一个点击的方块将保持打开状态，永远不会再次关闭，即使您找到了匹配的方块。

除非其他人有更好的想法，我正在寻找一种方法，以禁用点击事件时，2个方块在运动。因此，您必须等待两个方块关闭或匹配，直到您可以单击另一个方块。

我也想只使用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>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2017-12-11 23:43:46

您可以添加当前打开的数量的全局指示器。即：let 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>

当你选择一个单一的方块，然后按下reset game时，你的reset game有一个现有的逻辑错误，游戏现在似乎忽略了这个方块，当再次使用这个方块时，视觉上会选择3。

我还不能解决这个问题，但肯定也是原始代码中的一个bug

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47756253

复制

相似问题

问如何让我的JavaScript memory游戏选择不超过2个方块
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让我的JavaScript memory游戏选择不超过2个方块EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让我的JavaScript memory游戏选择不超过2个方块
EN