文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >关于建立集中游戏的几个问题

问关于建立集中游戏的几个问题
EN

Stack Overflow用户
提问于 2020-07-14 23:53:11
回答 2查看 64关注 0票数 2

我做这个已经有一段时间了，似乎没办法解决。我是一个初学者，学习代码，我已经把自己的测试，以建立一个集中的游戏。我有以下问题

  1. 我只有11块瓷砖，而不是16块。
  2. ，我没有任何匹配的颜色，
  3. ，当他们只应该和他们的一对配色时，他们才会这样做。

我期待着能有一个更先进的人来帮助我。

​

代码语言：javascript
复制
var resetButton = document.getElementById("reset-button");

var colors= ["square-1" - "square-9"];
for (var 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(colors);
}

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); 
    }
}
  
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);
}

var gameSquares = [];

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

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

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

var firstSquare = null;

function checkGame (GameSquare) {
    if(firstSquare === null) {
        firstSquare = GameSquare;
        return
    }
    if (firstSquare.color === GameSquare.color) {
        firstSquare.lock();
        GameSquare.lock();
    } else {
        var a = firstSquare;
        var b = GameSquare;
        setTimeout(function() {
            a.reset();
            b.reset();
        }, 400);
    }
    firstSquare = null;
} 

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

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

setupGame()
代码语言：javascript
复制
* {
  padding: 0;
  margin: 0;
}

.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;
    transition: 400ms;
}

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

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

.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: teal;
}

  #game {
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid red;
  }
  
  #game {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }

  #reset-button{
    position: absolute;
    top: 90px;
  }
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Concentration Game</title>

<link href= "./styles.css" rel="stylesheet" type= "text/css">

</head>
<body>

        <div class="container">
            <div id="game">
                <div class= "game-square">
                  <div>
                    <div></div>
                    <div class= "square-0"></div>
                </div>
            </div>
                <div class= "game-square"> 
                  <div>
                    <div></div>
                    <div class= "square-1"></div>
                </div>
            </div>
                <div class= "game-square">
                  <div>
                    <div></div>
                    <div class= "square-2"></div>
                </div>
            </div>
                <div class= "game-square">
                  <div>
                    <div></div>
                    <div class= "square-3"></div>
                </div>
            </div>
                <div class= "game-square">
                  <div>
                    <div></div>
                    <div class= "square-4"></div>
                </div>
            </div>
            <div class= "game-square">
                <div>
                  <div></div>
                  <div class= "square-5"></div>
              </div>
          </div>
              <div class= "game-square">
                <div>
                  <div></div>
                  <div class= "square-6"></div>
              </div>
          </div>
              <div class= "game-square">
                <div>
                  <div></div>
                  <div class= "square-7"></div>
              </div>
          </div>
              <div class= "game-square">
                <div>
                  <div></div>
                  <div class= "square-8"></div>
              </div>
          </div>
              <div class= "game-square">
                <div>
                  <div></div>
                  <div class= "square-9"></div>
              </div>
          </div>
          <div class= "game-square">
            <div>
              <div></div>
              <div class= "square-0"><div>
          </div>
      </div>
          <div class= "game-square">
            <div>
              <div></div>
              <div class= "square-1"></div>
          </div>
      </div>
          <div class= "game-square">
            <div>
              <div></div>
              <div class= "square-2"></div>
          </div>
      </div>
          <div class= "game-square">
            <div>
              <div></div>
              <div class= "square-3"></div>
          </div>
      </div>
          <div class= "game-square">
            <div>
              <div></div>
              <div class= "square-4"></div>
          </div>
      </div>    
      </div>
      <button id="reset-button">Reset</button>
     </div>

<script src= "./script.js"></script>  
</body>
</html>

​

javascript
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-15 08:17:25

你们很亲密。我猜你正在读的材料只关注10种颜色。这些是与此有关的问题：

  • 通过查看您的CSS，您的.square-X类只会上升到9，在JS中它应该上升到15 (0索引基础)
  • ，您的颜色初始化for循环条件是i < 10。它应该是i < 16，因为您的目标是16种颜色。
  • 也是这条特定的行var colors = ["square-1" - "square-9"];令人困惑。这应该是简单地初始化一个数组，但是您要给它分配某种字符串值

。

通过修复这些项目，内存游戏将如预期的那样工作。见下面的演示：

​

代码语言：javascript
复制
var resetButton = document.getElementById("reset-button");

var colors = [];
for (var i = 0; i < 16; 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);
}

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);
  }
}

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);
}

var gameSquares = [];

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

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

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

var firstSquare = null;

function checkGame(GameSquare) {
  if (firstSquare === null) {
    firstSquare = GameSquare;
    return
  }
  if (firstSquare.color === GameSquare.color) {
    firstSquare.lock();
    GameSquare.lock();
  } else {
    var a = firstSquare;
    var b = GameSquare;
    setTimeout(function() {
      a.reset();
      b.reset();
    }, 400);
  }
  firstSquare = null;
}

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

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

setupGame()
代码语言：javascript
复制
* {
  padding: 0;
  margin: 0;
}

.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;
  transition: 400ms;
}

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

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

.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: teal;
}

.square-10 {
  background-color: hotpink;
}

.square-11 {
  background-color: khaki;
}

.square-12 {
  background-color: lime;
}

.square-13 {
  background-color: turquoise;
}

.square-14 {
  background-color: plum;
}

.square-15 {
  background-color: red;
}

#game {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid red;
}

#game {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#reset-button {
  position: absolute;
  top: 90px;
}
代码语言：javascript
复制
<body>

  <div class="container">
    <div id="game">
      <div class="game-square">
        <div>
          <div></div>
          <div class=""></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
      <div class="game-square">
        <div>
          <div></div>
          <div class="square"></div>
        </div>
      </div>
    </div>
  </div>

  <button id="reset-button">Reset</button>

</body>

​

票数 0
EN

Stack Overflow用户

发布于 2020-07-15 02:20:07

我用注释实现了自己的实现；您可以比较一下不同的方法/技术：

​

代码语言：javascript
复制
//pick 8 colors
const colors = ["red","blue","green","yellow","orange","purple","brown","pink"];
//double the colors
const double = colors.concat(colors);
//randomize the colors
const matches = []; 
for(let i = 0; i < 16; i ++) {
  const random = Math.floor(Math.random() * double.length);
  matches.push(double.splice(random,1)[0]);
}

//create variable that houses id of comparing square
let compareTo;

//create global click disable
let disable = false; 

//on click function
function reveal(e) {
  //prevent spam click during comparison
  if(disable) return; 
  //shorten e.target.id to id
  const id = e.target.id; 
  //reveal clicked square
  e.target.classList.toggle("hidden");
  //remove its onclick
  e.target.onclick = null; 
  //if no squares being compared, store id 
  if(!compareTo){
    compareTo = id; 
  } else {
    //otherwise if square colors match
    if(matches[compareTo] === matches[id]){
      //reset id reference (keeping both reveal);
      compareTo = null; 
      //win condition
      if(!document.getElementsByClassName("hidden").length) setTimeout(()=>alert("YOU WIN!"),0);
    } else {
      //otherwise prevent spam click during reveal
      disable = true;
      //and hide both squares, must be in a timeout to be visible
      setTimeout(()=> {            
         e.target.classList.toggle("hidden");
         document.getElementById(compareTo).classList.toggle("hidden");
         //add onclick back
         e.target.onclick = ()=> reveal(event); 
         document.getElementById(compareTo).onclick = ()=> reveal(event); 
         //enable clicking
         disable = false;
         //and erase id reference;
         compareTo = null; 
      },750);      
    }
  }
}

//reference container for iteration
const container = document.getElementById("container"); 

//iterate squares rather than hard code into html
for(let i = 0; i < 16; i ++){
  const square = document.createElement("div");
  square.onclick = ()=> reveal(event); 
  square.classList.add("square");
  //add class that hides color
  square.classList.add("hidden");
  //ids match indexes of color matches
  square.setAttribute("id",i);
  //assign corresponding color
  square.style.backgroundColor = matches[i];
  container.append(square);
}
代码语言：javascript
复制
#container {
width: 400px;
height: 400px;
display: flex;
flex-wrap: wrap; 
background: blue;
border: 1px solid black;
}

.square {
  width: 25%;
  height: 25%;
  border: 1px solid black;
  box-sizing: border-box; 
}

.hidden {
   background-color: dimgray !important; 
}
代码语言：javascript
复制
<div id="container">

</div>

​

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

https://stackoverflow.com/questions/62905615

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档