用原生JS寫一個象棋小遊戲

語言: CN / TW / HK

1675826596398.gif

前言

最近沒什麼需求,藉着上班摸魚的時間,寫點代碼玩玩。過年的時候總是和爺爺下象棋,這次用原生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()

8.png

二、點擊棋子後的邏輯處理

生成棋子的時候,給每一個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() // 清空數據 } }) 選中和放下棋子的方法寫在公共類裏,先貼圖,因為裏面還有其他的代碼,最後再一起附上

1.png

三、選中棋子之後,計算出棋子可以移動的座標

選中棋子之後,要計算出棋子可以移動的座標,並且通過小點的樣式展示在棋盤上。因為每一個棋子的移動規則都不同,比如馬走日字,象走田字並且不能過河,所以要在每一個子類裏面單獨去計算座標。

先計算出所有的座標,比如車和炮,就計算棋子所在的x軸和y軸的所有座標。座標計算出來後,再把座標上有同陣營棋子的點、以及不能走的點篩除,只留下空點的座標或者可以被這個棋子吃掉的座標。

計算座標使用getLine()方法,每一個子類都需要根據象棋的規則單獨計算

篩選座標使用filterLine()方法,因為車、炮、將這3個棋的篩選計算與其他的棋子不同,所以這3個的計算方法在子類裏重寫,其他的棋子使用公共類裏的通用方法

公共類的代碼還是先貼圖

2.png

下面是子類棋子的全部代碼:

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元素,添加一個樣式即可。放下棋子的時候,就將樣式隱藏。

3.png

4.png

9.png

五、棋子的移動

棋子的移動就是把兩個座標裏的棋子對象交換位置,只要能拿到座標,實現這個就比較簡單了。但是要判斷一下第二次點擊的座標,是不是在棋子的可移動範圍內,畢竟象棋移動是有規則的,不能想去哪就去哪。

5.png

六、吃子和將軍的提示,以及勝負的判斷

html裏已經畫好了幾個提示的div盒子,吃子和將軍的時候顯示不同的盒子即可。如果一方的將被吃掉了,那麼就提示遊戲結束,根據type值來判斷是哪一方獲勝。

6.png

1675826692729.gif 最後附上棋子公共類的代碼

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

總結

到這裏這個象棋小遊戲就寫完了,象棋的規則和邏輯基本上都能實現了。就是判斷將軍的邏輯處理的不是很好,有些情況下的將軍,顯示不出來。如果走了某一步棋之後,導致自己的帥會被對方吃掉,按理來説這一步棋是不可以走的,這個邏輯的處理並沒有寫。這個象棋只能在一個電腦上面自己跟自己玩,主要是想寫寫代碼,怕腦子上班摸魚生鏽了,有些的不好的地方歡迎指正,不喜勿噴。

7.png

兵2.png