Technology used in development
For the front end I choose VUE-CLI 3.0 + TS + PUG + stylus
Chess must be two people to play, two people will exist in a timely update, so will join websocket
As for the back-end, I choose the mysql database used by egg.js to save the position record of each chess game, which is convenient for two people to play online
Train of thought
The first step is to analyze the checkerboard size
Let’s start with a sketch that I made in vscode and we can see that chess is a 9 by 11 rectangle
Const RedChessArray = [];for (let i = 0; i < 10; i++) {
const xArr = [];
for (let i = 0; i < 9; i++) {
xArr.push({chessName: ' ', playerPower: ' ', act: false})} redchessarray.push (xArr)} // Then we insert in the middle of the array redchessarray.splice (5, 0, [{chessName:'Chu River and Han Dynasty', playerPower:' ', act: false }]);
Copy the codeOk, so we’re done and now we should have a 9 by 11 board
const RedChessArrays = RedChessArray; Const RedChessJson = [{player:} const RedChessJson = [{player:}'cat',
playerPower: 'red',
chess: [{chessName: 'handsome', x: 0, y: 0},
{chessName: 'handsome', x: 0, y: 4},
{chessName: 'and', x: 0, y: 3},
{chessName: 'and', x: 0, y: 5},
{chessName: 'phase', x: 0, y: 2},
{chessName: 'phase', x: 0, y: 6},
{chessName: 'the horse', x: 0, y: 1},
{chessName: 'the horse', x: 0, y: 7},
{chessName: 'car', x: 0, y: 0},
{chessName: 'car', x: 0, y: 8},
{chessName: 'gun', x: 2, y: 1},
{chessName: 'gun', x: 2, y: 7},
{chessName: 'the soldiers', x: 3, y: 0},
{chessName: 'the soldiers', x: 3, y: 2},
{chessName: 'the soldiers', x: 3, y: 4},
{chessName: 'the soldiers', x: 3, y: 6},
{chessName: 'the soldiers', x: 3, y: 8}
]
},{
player: 'dog',
playerPower: 'blue',
chess: [{chessName: 'to', x: 10, y: 4},
{chessName: 'and', x: 10, y: 3},
{chessName: 'and', x: 10, y: 5},
{chessName: 'like', x: 10, y: 2},
{chessName: 'like', x: 10, y: 6},
{chessName: 'the horse', x: 10, y: 1},
{chessName: 'the horse', x: 10, y: 7},
{chessName: 'car', x: 10, y: 0},
{chessName: 'car', x: 10, y: 8},
{chessName: 'gun', x: 8, y: 1},
{chessName: 'gun', x: 8, y: 7},
{chessName: 'he', x: 7, y: 0},
{chessName: 'he', x: 7, y: 2},
{chessName: 'he', x: 7, y: 4},
{chessName: 'he', x: 7, y: 6},
{chessName: 'he', x: 7, y: 8}, RedChessJson. Map (item => {item.chess.map(chessItem => {const obj = RedChessArrays[chessItem]'x']][chessItem['y']]
obj.chessName = chessItem.chessName
obj.playerPower = item.playerPower
})
})
console.log('RedChessArrays=', RedChessArrays); RedChessArray this.RedChessArray = RedChessArray;Copy the code
Here the board completes the rules for starting each piece
Step 2 The rules for each piece in chess
| Pieces (chessName) | Mobile rules | Attack rules |
|---|---|---|
| The gun | The drop point of the gun must be on the y or X axis of the lift point and there must be no pieces between the lift point and the drop point | There must be a piece between the starting point and the drop point and the drop point must be an enemy piece |
| The soldiers | Each drop point minus the starting point is only equal to 1; The X-axis of the falling point within the river boundary must be the same as that of the lifting point; The y axis must be less than the starting point of lift; | Drop points must be enemy pieces |
| will | Lu tomorrow | Drop points must be enemy pieces |
| “ | Lu tomorrow | Drop points must be enemy pieces |
| like | Lu tomorrow | Drop points must be enemy pieces |
| The horse | Lu tomorrow | Drop points must be enemy pieces |
| car | Lu tomorrow | Drop points must be enemy pieces |
One fuck today and the rest tomorrow
/** * clickChess(item = {act:false, chessName: ' ', playerPower: ' '}, x = 0, y = 0) {
item.act = true;
if(! this.currentObj.chessName) { this.currentObj = {... item}; this.currentX = x; this.currentY = y; console.log(this.currentX, this.currentY); }else{// Already pressed to judge second click coordinates console.log('The second time'Const isTrue = this.istesting (x, y); const isTrue = this.istesting (x, y);if(isTrue) {
item.act = true;
item.chessName = this.currentObj.chessName;
item.playerPower = this.currentObj.playerPower;
this.RedChessArray[this.currentX][this.currentY] = {chessName: ' ', playerPower: ' ', act: false}
// clear currentObj
this.currentObj = {act: false, chessName: "", playerPower: ""}}else {
console.log('Specification no no'}}} /** * Check if the rule is correct *return true/false
*/
isTesting(x = 0, y = 0) {
let isTrue = true;
if (x === this.currentX && y === this.currentY) {
console.log('I didn't move the chess pieces.');
return false;
}
switch (this.currentObj.chessName) {
case 'gun':
console.log('x=', x, this.currentX);
console.log('y=', y, this.currentY);
if(x ! == this.currentX && y ! == this.currentY) { isTrue =false;
} else {
if (x === this.currentX) {
for (const item of this.RedChessArray) {
// console.log('item', item);
let [bigY, smallY] = [0, 0];
this.currentY > y ? (bigY = this.currentY) && (smallY = y) : (bigY = y) && (smallY = this.currentY)
console.log(smallY, bigY);
for (let i = smallY; i < bigY; i++) {
console.log('item[i]', item[i], i);
// console.log(item[i].chessName);
if(item[i].chessName ! =' ') {
console.log('There are pieces on the move, no rules.');
isTrue = false;
}
}
}
}
}
}
break;
default:
break;
}
return isTrue;
}
Copy the codeCode word is not easy, move a small hand point praise ~~~
After the final development, I will put the front-end and back-end code on GitHub. Welcome everyone star
May Day holiday I first lu code, May Day after the update of a wave of big!
