用原生JS写一个象棋小游戏
前言
最近没什么需求，借着上班摸鱼的时间，写点代码玩玩。过年的时候总是和爷爷下象棋，这次用原生JS写了一个象棋小游戏，但是技术有限，只能自己一个人左右手互博来下棋。象棋规则基本上都实现了，下面就来给大家分享一下。
我正在参与码上掘金编程挑战赛，请为我点赞吧！ jcode
一、绘制棋盘和棋子
游戏的元素是棋盘和棋子，图片都是在网上搜，然后用截图工具截下来，就可以直接使用了。棋子通过遍历数组来渲染，因为棋子的种类很多，所以给数组里的元素添加了一些属性，num值对应的是棋子的类型，type值对应棋子的阵营。公共的属性和方法写在棋子父类里，每一种的棋子都继承这个父类的属性。
**css:**
table {
position: relative;
width: 627px;
height: 600px;
margin: 0 auto;
padding: 6px;
border: 5px solid black;
background: url(./棋盘.png);
}
td {
width: 60px;
height: 64px;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
.bgc1 {
background: url(./车.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc2 {
background: url(./马.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc3 {
background: url(./象.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc4 {
background: url(./士.png);
background-size: 94%;
background-position: 2px -1px;
}
.bgc5 {
background: url(./将.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc6 {
background: url(./炮.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc7 {
background: url(./卒.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc8{
background: url(./车2.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc9{
background: url(./马2.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc10{
background: url(./相2.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc11{
background: url(./仕2.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc12{
background: url(./帅2.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc13{
background: url(./炮2.png);
background-size: 94%;
background-position: 1px 0px;
}
.bgc14{
background: url(./兵2.png);
background-size: 94%;
background-position: 1px 0px;
}
.message1,.message2{
position: absolute;
left: 45%;
top: 40%;
width: 100px;
height: 100px;
background-color: rgba(138, 136, 136, 0.493);
line-height: 100px;
font-size: 60px;
color: red;
}
.message1{
display: none;
}
.message2{
display: none;
width: 200px;
}
.message3{
position: absolute;
left: 20%;
top: 40%;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 60px;
color: red;
}
/* 棋子选中的样式 */
.checked {
transform: translateY(-15px);
transition: all .2s;
}
/* 棋子可移动坐标显示的样式 */
.showWays{
position: relative;
}
.showWays::after{
content:'';
position: absolute;
top: 25px;
left: 25px;
background-color: rgb(19, 23, 235);
width: 10px;
height: 10px;
}
**html:**
<table></table>
<div class="message1">
吃！
</div>
<div class="message2">
将军！
</div>
<div class="message3">
红先
</div>
**js:**
let list = [ // 棋盘的初始化布局，num代表棋子种类，type代表阵营
[{num:1,type:1},{num:2,type:1},{num:3,type:1},{num:4,type:1},{num:5,type:1},{num:4,type:1},{num:3,type:1},{num:2,type:1},{num:1,type:1}],
[{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0}],
[{num:0},{num:6,type:1},{num:0},{num:0},{num:0},{num:0},{num:0},{num:6,type:1},{num:0}],
[{num:7,type:1},{num:0},{num:7,type:1},{num:0},{num:7,type:1},{num:0},{num:7,type:1},{num:0},{num:7,type:1}],
[{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0}],
[{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0}],
[{num:7,type:2},{num:0},{num:7,type:2},{num:0},{num:7,type:2},{num:0},{num:7,type:2},{num:0},{num:7,type:2}],
[{num:0},{num:6,type:2},{num:0},{num:0},{num:0},{num:0},{num:0},{num:6,type:2},{num:0}],
[{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0},{num:0}],
[{num:1,type:2},{num:2,type:2},{num:3,type:2},{num:4,type:2},{num:5,type:2},{num:4,type:2},{num:3,type:2},{num:2,type:2},{num:1,type:2}],
]
let menu = { // 棋子的枚举属性
0:(index,index2,item2,tr)=>{ // 无棋子
return new Qi(index,index2,item2,tr,0)
},
1:(index,index2,item2,tr,type)=>{ // 车
return new Ju(index,index2,item2,tr,1,type)
},
2:(index,index2,item2,tr,type)=>{ // 马
return new Ma(index,index2,item2,tr,2,type)
},
3:(index,index2,item2,tr,type)=>{ // 象
return new Xiang(index,index2,item2,tr,3,type)
},
4:(index,index2,item2,tr,type)=>{ // 士
return new Shi(index,index2,item2,tr,4,type)
},
5:(index,index2,item2,tr,type)=>{ // 将
return new Jiang(index,index2,item2,tr,5,type)
},
6:(index,index2,item2,tr,type)=>{ // 炮
return new Pao(index,index2,item2,tr,6,type)
},
7:(index,index2,item2,tr,type)=>{ // 卒
return new Zu(index,index2,item2,tr,7,type)
},
}
let typeList = { // 下棋顺序枚举
1:'黑棋',
2:'红棋'
}
class Qi { // 棋子公共类
constructor(index,index2,item2,tr,name,type){
this.num = name // 棋子枚举属性
this.type = type // 棋子阵营标识
this.tr = tr
this.td = document.createElement('td')
this.y = index
this.x = index2
this.td.dataset.y = index // 给每一个td元素设置坐标
this.td.dataset.x = index2 // 给每一个td元素设置坐标
item2 && type == 2 ? this.td.classList.add(`bgc${item2+7}`) : this.td.classList.add(`bgc${item2}`)
this.waysArr = [] // 棋子可移动坐标的存放数组
tr.appendChild(this.td)
}
}
class Ju extends Qi { // 车
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
}
class Ma extends Qi { // 马
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
}
class Xiang extends Qi { // 象
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
}
class Shi extends Qi { // 士
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
}
class Jiang extends Qi { // 将
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
}
class Pao extends Qi { // 炮
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
}
class Zu extends Qi { // 卒
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
}
//封装渲染函数
const render = () => {
document.querySelector('table').innerHTML = ''
list.forEach((item, index) => {
let tr = document.createElement('tr')
item.forEach((item2, index2) => {
let num = list[index][index2].num
list[index][index2] = menu[num](index,index2,item2.num,tr,item2.type) // 枚举生成对应的棋子对象
})
document.querySelector('table').appendChild(tr)
})
}
render()
二、点击棋子后的逻辑处理
生成棋子的时候，给每一个td元素添加了坐标。所以触发点击事件的时候，通过这个坐标，就能获取到点击的元素对应的棋子对象了。第一次点击的时候，就调用棋子对象里面对应的方法。如果两次点击的地方一样，就将棋子放下来；两次点击的坐标不一样，就要调用棋子的移动方法。选中和放下通过添加和删除css，来更换状态。
let flag = 0 // 0:未选中棋子；1:选中棋子
let sequence = false // true:黑棋走；false:红棋走
let ele,x,y
function clear() { // 清空数据
flag = 0
x = null
y = null
}
document.querySelector('table').addEventListener('click',e=>{
if(x == e.target.dataset.x && y == e.target.dataset.y){ // 两次点击的地方一样
clear() // 清空数据
ele.down() // 放下棋子
return
}
x = e.target.dataset.x || x
y = e.target.dataset.y || y
if(list[y][x].num && !flag){ // 选中要移动的棋子
ele = list[y][x]
console.log(ele,'选择的棋子');
flag = 1
ele.checked() // 选中触发的方法
}else if(flag){ // 移动棋子
ele.move(x,y)
clear() // 清空数据
}else{
console.log('此处没有棋子');
clear() // 清空数据
}
})
选中和放下棋子的方法写在公共类里，先贴图，因为里面还有其他的代码，最后再一起附上
三、选中棋子之后，计算出棋子可以移动的坐标
选中棋子之后，要计算出棋子可以移动的坐标，并且通过小点的样式展示在棋盘上。因为每一个棋子的移动规则都不同，比如马走日字，象走田字并且不能过河，所以要在每一个子类里面单独去计算坐标。
先计算出所有的坐标，比如车和炮，就计算棋子所在的x轴和y轴的所有坐标。坐标计算出来后，再把坐标上有同阵营棋子的点、以及不能走的点筛除，只留下空点的坐标或者可以被这个棋子吃掉的坐标。
计算坐标使用getLine()方法，每一个子类都需要根据象棋的规则单独计算
筛选坐标使用filterLine()方法，因为车、炮、将这3个棋的筛选计算与其他的棋子不同，所以这3个的计算方法在子类里重写，其他的棋子使用公共类里的通用方法
公共类的代码还是先贴图
下面是子类棋子的全部代码：
class Ju extends Qi { // 车
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
getLine(x,y,num){ // 获取车棋子可以移动到的所有坐标,num值控制是否显示路径
console.log(x,y,'选择棋子的坐标');
let lineArr = list.map((item,index)=>{ // 未筛选的所有可移动的坐标
return index === +y? item : item[x]
})
let resultArr = this.filterLine(lineArr,x,y,num) // 将路径上有棋子的坐标筛选出来
this.showWays(resultArr,num) // 棋盘上展示可移动的路径
return resultArr
}
filterLine(arr,x,y,num){ // 筛选移动路径上的棋子
// 以选中棋子为中心，将x轴和y轴的点分为4份，每一份都要遍历找出满足条件的坐标，最后再合并
let yArr1 = arr.slice(0,y)
let yArr2 = arr.slice(y+1,arr.length)
let xArr1 = arr[y].slice(0,x)
let xArr2 = arr[y].slice(x+1,arr[y].length)
console.log({yArr1,yArr2,xArr1,xArr2});
// loopMethod：自定义的遍历方法
return [...this.loopMethod(xArr1,-1,this.num),...this.loopMethod(xArr2,1,this.num),...this.loopMethod(yArr1,-1,this.num),...this.loopMethod(yArr2,1,this.num),
]
}
}
class Ma extends Qi { // 马
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
getLine(x,y,num){ // 获取马可以移动到的所有坐标
console.log(x,y,'选择棋子的坐标');
let lineArr = [] // 未筛选的所有可移动的坐标
if(!list[y][x-1]?.num){ // 马为日字形，如果马脚有棋则不能走
lineArr.push([list[y-1]?.[x-2],list[y+1]?.[x-2]])
}
if(!list[y][x+1]?.num){
lineArr.push([list[y+1]?.[x+2],list[y-1]?.[x+2]])
}
if(!list[y-1]?.[x].num){
lineArr.push([list[y-2]?.[x+1],list[y-2]?.[x-1]])
}
if(!list[y+1]?.[x].num){
lineArr.push([list[y+2]?.[x+1],list[y+2]?.[x-1]])
}
let resultArr = this.filterLine(lineArr,x,y,num) // 将路径上有棋子的坐标筛选出来
this.showWays(resultArr,1,num) // 棋盘上展示可移动的路径
return resultArr
}
}
class Xiang extends Qi { // 象
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
getLine(x,y,num){ // 获取象可以移动到的所有坐标,象心不能有棋子，并且不能过河
console.log(x,y,'选择棋子的坐标');
let lineArr = [] // 未筛选的所有可移动的坐标
if(list[y-1]?.[x-1]?.num === 0 && y!==5){
lineArr.push(list[y-2][x-2])
}
if(list[y+1]?.[x+1]?.num === 0 && y!==4){
lineArr.push(list[y+2][x+2])
}
if(list[y-1]?.[x+1]?.num === 0 && y!==5){
lineArr.push(list[y-2][x+2])
}
if(list[y+1]?.[x-1]?.num === 0 && y!==4){
lineArr.push(list[y+2][x-2])
}
let resultArr = this.filterLine(lineArr,x,y,num) // 将路径上有棋子的坐标筛选出来
this.showWays(resultArr,1,num) // 棋盘上展示可移动的路径
return resultArr
}
}
class Shi extends Qi { // 士
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
getLine(x,y,num){ // 获取士可以移动到的所有坐标
console.log(x,y,'选择棋子的坐标');
let lineArr = [] // 未筛选的所有可移动的坐标
if(x==3 || x==5){ // 士只能在九宫格范围内斜着走
this.type == 1 ? lineArr.push(list[1][4]) : lineArr.push(list[8][4])
}else{
this.type == 1 ? lineArr.push([list[0][3]],[list[0][5]],[list[2][3]],[list[2][5]])
: lineArr.push([list[7][3]],[list[7][5]],[list[9][3]],[list[9][5]])
}
let resultArr = this.filterLine(lineArr,x,y,num) // 将路径上有棋子的坐标筛选出来
this.showWays(resultArr,1,num)
return resultArr
}
}
class Jiang extends Qi { // 将
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
getLine(x,y,num){ // 获取将可以移动到的所有坐标
console.log(x,y,'选择棋子的坐标');
let lineArr = [] // 未筛选的所有可移动的坐标
lineArr.push([list[y][x+1]],[list[y][x-1]],[list[y-1]?.[x]],[list[y+1]?.[x]])
let resultArr = this.filterLine(lineArr,x,y,num) // 将路径上有棋子的坐标筛选出来
this.showWays(resultArr,1,num)
return resultArr
}
filterLine(arr,x,y,num){ // 筛选移动路径上的棋子
// 获取敌方帅的坐标
let resultArr = arr.filter(item=>{ // 将有棋子的坐标筛选出来，剩下的就是可以走的地方
if(this.type == 1){
return item[0]?.x>2&&item[0]?.x<6&&item[0]?.y>=0&&item[0]?.y<3&&item[0]?.type!=1
}else{
return item[0]?.x>2&&item[0]?.x<6&&item[0]?.y>=7&&item[0]?.y<10&&item[0]?.type!=2
}
})
let shuai = list.flat().find(item=>item.num === 5 && item.type !== this.type) // 敌方帅的坐标
let jiang = resultArr.flat().find(item=>item.x === shuai.x)
if(jiang){ // 判断将和帅可以走的坐标里面,有没有和对方将为同一列的
let res = list.flat().find(item=>{
if(shuai.y>jiang.y){
return item.x === jiang.x && item.y>jiang.y && item.y<shuai.y && item.num
}else{
return item.x === jiang.x && item.y<jiang.y && item.y>shuai.y && item.num
}
})
if(!res){ // 如果两个帅在同一列,并且中间没有棋子,就不可以走,把这个坐标删除
let resArr = resultArr.flat().filter(item=>!(item.x==jiang.x&&item.y==jiang.y))
return resArr
}
}
return resultArr.flat()
}
}
class Pao extends Qi { // 炮
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
getLine(x,y,num){ // 获取炮棋子可以移动到的所有坐标
console.log(x,y,'选择棋子的坐标');
let lineArr = list.map((item,index)=>{ // 未筛选的所有可移动的坐标
return index === +y? item : item[x]
})
let resultArr = this.filterLine(lineArr,x,y,num) // 将路径上有棋子的坐标筛选出来
this.showWays(resultArr,1,num)
return resultArr
}
filterLine(arr,x,y,num){ // 筛选移动路径上的棋子
let yArr1 = arr.slice(0,y)
let yArr2 = arr.slice(y+1,arr.length)
let xArr1 = arr[y].slice(0,x)
let xArr2 = arr[y].slice(x+1,arr[y].length)
console.log({yArr1,yArr2,xArr1,xArr2});
return [...this.loopMethod(xArr1,-1,this.num),...this.loopMethod(xArr2,1,this.num),...this.loopMethod(yArr1,-1,this.num),...this.loopMethod(yArr2,1,this.num),
]
}
}
class Zu extends Qi { // 卒
constructor(index,index2,item2,tr,name,type){
super(index,index2,item2,tr,name,type)
}
getLine(x,y,num){ // 获取卒可以移动到的所有坐标
console.log(x,y,'选择棋子的坐标');
let lineArr = [] // 未筛选的所有可移动的坐标
if(this.type == 1 && y<5 || this.type == 2 && y>4){ // 过河前的移动路径
this.type == 1?lineArr.push(list[y+1]?.[x]) : lineArr.push(list[y-1]?.[x])
}else{ // 过河后的移动路径
if(this.type == 1){
lineArr.push([list[y+1]?.[x],list[y][x+1],list[y][x-1]])
}else{
lineArr.push([list[y-1]?.[x],list[y][x+1],list[y][x-1]])
}
}
let resultArr = this.filterLine(lineArr,x,y,num) // 将路径上有棋子的坐标筛选出来
this.showWays(resultArr,1,num)
return resultArr
}
}
四、计算出可移动坐标后，在棋盘上展示出来
将坐标上每一个棋子对象里对应的td元素，添加一个样式即可。放下棋子的时候，就将样式隐藏。
五、棋子的移动
棋子的移动就是把两个坐标里的棋子对象交换位置，只要能拿到坐标，实现这个就比较简单了。但是要判断一下第二次点击的坐标，是不是在棋子的可移动范围内，毕竟象棋移动是有规则的，不能想去哪就去哪。
六、吃子和将军的提示，以及胜负的判断
html里已经画好了几个提示的div盒子，吃子和将军的时候显示不同的盒子即可。如果一方的将被吃掉了，那么就提示游戏结束，根据type值来判断是哪一方获胜。
最后附上棋子公共类的代码
class Qi { // 棋子公共类
constructor(index,index2,item2,tr,name,type){
this.num = name // 棋子枚举属性
this.type = type // 棋子阵营标识
this.tr = tr
this.td = document.createElement('td')
this.y = index
this.x = index2
this.td.dataset.y = index // 给每一个td元素设置坐标
this.td.dataset.x = index2 // 给每一个td元素设置坐标
item2 && type == 2 ? this.td.classList.add(`bgc${item2+7}`) : this.td.classList.add(`bgc${item2}`)
this.waysArr = [] // 棋子可移动坐标的存放数组
tr.appendChild(this.td)
}
checked(){ // 选中棋子
console.log(list,'棋盘的对象数组');
if(sequence){ // 处理下棋顺序
if(list[this.y][this.x].type == 1){ // 黑棋下
let result = this.getLine(this.x,this.y,1) // 获取这个棋子的所有可移动路线
this.td.classList.add('checked')
}else{
clear()
}
}else{
if(list[this.y][this.x].type == 2){ // 红棋下
let result = this.getLine(this.x,this.y,1) // 获取这个棋子的所有可移动路线
this.td.classList.add('checked')
}else{
clear()
}
}
}
down(){ // 放下棋子
this.td.classList.remove('checked')
this.showWays(this.waysArr,0) // 隐藏移动的坐标
}
filterLine(arr,x,y,num){ // 筛选移动路径上的棋子，通用方法
let resultArr = arr.flat().filter(item=>item?.num === 0 || item?.type&&item.type !== this.type)
return resultArr
}
loopMethod(arr,order,name=1){ // 自定义遍历方法,order控制遍历的顺序
let resultArr = []
if(!arr.length) return resultArr
if(order < 0){ // 反方向遍历数组
for(let i = arr.length-1;i>=0;i--){
if(arr[i].num){
if(name == 1){ // 车的吃子方法
if(arr[i].type != this.type) resultArr.push(arr[i])
break
}else{ // 炮的吃子方法
for(let j = i-1;j>=0;j--){
if(arr[j].type != this.type && arr[j].num){
resultArr.push(arr[j])
break
}
}
break
}
}
resultArr.push(arr[i])
}
}else{
for(let i = 0;i<arr.length;i++){
if(arr[i].num){
if(name == 1){ // 车的吃子方法
if(arr[i].type != this.type) resultArr.push(arr[i])
break
}else{ // 炮的吃子方法
for(let j = i+1;j<arr.length;j++){;
if(arr[j].type != this.type && arr[j].num){
resultArr.push(arr[j])
break
}
}
break
}
}
resultArr.push(arr[i])
}
}
return resultArr
}
showWays(arr,flag){ // 显示棋子可移动到的坐标
this.waysArr = arr
// 选中状态下显示可移动坐标,未选择不显示
this.waysArr.forEach(item=>{
flag? item.td.classList.add('showWays') : item.td.classList.remove('showWays')
})
}
move(x,y){ // 棋子移动
let allowMove = this.waysArr.find(item=>{ // 判断将要移动的坐标是否在可移动范围内
return item.x == x && item.y == y
})
if(!allowMove){ // 不在可移动范围，就将棋子放下
return this.down()
}
let nextChess= list[y][x] // 移动到的坐标
let nextType = nextChess.type // 如果坐标上有其他棋子，获取它的阵营
let y1 = this.td.dataset.y
let x1 = this.td.dataset.x
list[y1][x1] = menu[0]([y1],[x1],0,this.tr)
list[y][x] = menu[this.num]([y],[x],this.num,this.tr,this.type)
this.td.dataset.y = y
this.td.dataset.x = x
sequence = !sequence // 交换下棋顺序
let arr = this.getLine(+x,+y,0) // 计算棋子下一步可移动的坐标,判断是否显示将军
if(arr.find(item=>item.num == 5 && item.type !== this.type)){ // 如果棋子下一步的路径包涵将，就显示将军
this.showMessage(2) // 1：吃 ； 2：将军
}else if(nextType && nextType !== this.type){
this.showMessage(1) // 1：吃 ； 2：将军
}
render()
if(nextChess.num === 5){ // 将军被吃掉,游戏结束
alert(`游戏结束,${typeList[this.type]}胜!`)
}
}
showMessage(num){ // 吃子和将军的时候给出提示
if(num == 2){ // 将军提示
console.log('显示将军');
document.querySelector('.message2').style.display = 'block'
setTimeout(()=>{
document.querySelector('.message2').style.display = 'none'
},1000)
}else{ // 吃子提示
console.log('显示吃');
document.querySelector('.message1').style.display = 'block'
setTimeout(()=>{
document.querySelector('.message1').style.display = 'none'
},1000)
}
}
}
总结
到这里这个象棋小游戏就写完了，象棋的规则和逻辑基本上都能实现了。就是判断将军的逻辑处理的不是很好，有些情况下的将军，显示不出来。如果走了某一步棋之后，导致自己的帅会被对方吃掉，按理来说这一步棋是不可以走的，这个逻辑的处理并没有写。这个象棋只能在一个电脑上面自己跟自己玩，主要是想写写代码，怕脑子上班摸鱼生锈了，有些的不好的地方欢迎指正，不喜勿喷。