Javascript 关于建立集中注意力游戏列出的几个问题

我做这件事已经有一段时间了，似乎无法解决它。我是一个学习编码的初学者，我已经在测试自己，以建立一个专注的游戏。我有以下问题

我只有11块瓷砖，而不是16块

我没有任何相配的颜色

我的颜色已经锁定在合适的位置，而它们只有在与它们的颜色搭配时才应该这样做

我期待着看到是否有更高级的人可以协助

var resetButton=document.getElementById（“重置按钮”）；
变量颜色=[“平方-1”-“平方-9”]；
对于（变量i=0；i<10；i++）{
颜色。推送（“方形-”+i）；
}
功能GameSquare（el，彩色）{
这个。el=el；
this.isOpen=false；
this.isLocked=false；
this.el.addEventListener（“单击”，this，false）；
这个.setColor（颜色）；
}
GameSquare.prototype.handleEvent=函数（e）{
开关（e型）{
案例“点击”：
如果（this.isOpen | | this.isLocked）{
返回；
}
this.isOpen=真；
this.el.classList.add（'flip'）；
支票游戏（本）；
}
}
GameSquare.prototype.reset=function（）{
这个.isOpen=false；
this.isLocked=false；
this.el.classList.remove（'flip'）；
}
GameSquare.prototype.lock=函数（）{
this.isLocked=true；
this.isOpen=真；
}
GameSquare.prototype.setColor=函数（颜色）{
this.el.children[0]。children[1]。classList.remove（this.color）；
这个颜色=颜色；
this.el.children[0].children[1].classList.add（颜色）；
}
var gameSquares=[]；
随机函数（n）{
返回Math.floor（Math.random（）*n）
}
函数getSomeColors（）{
var colorscopy=colors.slice（）；
var randomColors=[]；
对于（变量i=0；i<8；i++）{
var指数=随机（长度）；
随机颜色。推送（彩色透视。拼接（索引，1）[0]）；
}
返回randomColor.concat（randomColor.slice（））；
}
函数setupGame（）{
var数组=document.getElementsByClassName（“游戏广场”）；
var randomColor=GetSomeColor（）；
对于（var i=0；i

*{
填充：0；
保证金：0；
}
.游戏广场{
框大小：边框框；
边框：1px实心#000；
宽度：100px；
高度：100px；
位置：相对位置；
溢出：隐藏；
}
.游戏广场>分区{
宽度：100%；
身高：200%；
位置：绝对位置；
排名：0；
过渡时间：400ms；
}
.游戏广场>分区>分区{
身高：50%；
}
.游戏广场>分区>分区：第一个孩子{
背景颜色：灰色；
}
.flip>div{
前-100%；
}
.square-0{
背景色：浅绿色；
}
.square-1{
背景色：深蓝色；
}
.square-2{
背景颜色：蓝色；
}
.square-3{
背景色：蓝紫色；
}
.square-4{
背景颜色：棕色；
}
.square-5{
背景色：卡德蓝；
}
.square-6{
背景色：黄绿色；
}
.square-7{
背景颜色：巧克力色；
}
.square-8{
背景颜色：珊瑚；
}
.square-9{
背景色：青色；
}
#游戏{
宽度：400px；
高度：400px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
边框：1px纯红；
}
#游戏{
宽度：400px；
高度：400px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
#复位按钮{
位置：绝对位置；
顶部：90px；
}

专注游戏
重置

我用notes做了自己的实现；你可以比较看不同的方法