如何让我的JavaScript内存游戏不要超过2个方格

时间：2017-12-11 15:34:43

标签： javascript html css

我正在研究这款记忆游戏，我试图解决一个问题，如果用户强调游戏并快速点击多个方格，首先点击的方块将保持打开状态并且永远不会再次关闭，即使你找到它的匹配。

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

我也想只使用javascript，没有jQuery。

＆＃13;
＆＃13; 
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();
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

您可以添加全局指示器当前打开的数量。即：let areOpen = 0

每次转动一张卡时将其增加1并更新点击事件中的条件检查以进行检查：if (this.isOpen || this.isLocked || areOpen == 2) {

每次完成转弯时将其重置为0。现在用户点击的速度并不重要。

有很多更好的方法，但这似乎有效，可以从那时开始改进。

＆＃13;
＆＃13; 
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();
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

  

您的reset game存在逻辑错误   选择一个方格，然后按reset game游戏似乎   现在忽略该正方形，并在视觉上选择3   广场再次使用。

     

我无法解决这个问题，但绝对是原版中的一个错误   代码也是

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

相关问题
最新问题