vue实现模拟象棋走子

/* eslint-disable indent */
<template><div class="container"<div class="item-rigts"><div class="canvas-bg" id="bgcanvas"><canvas id="canvas1" ref="myCanvas">不支持Canvas</canvas></div></div>
</template><script>
import {getWalkingEnrollItemBank, updateEnrollFractionById} from '../../api/index'
let canvas
let ctx
let subX
let subY
// 参数：x坐标，y坐标，哪边下子，判断是红棋还是黑棋，判断棋名字
// eslint-disable-next-line no-unused-vars
let descClick
// 记录棋子点击次数
// let clickNumber
export default {name: 'gochess',data () {return {totalSecond: 0,countDownDay: 0,countDownHour: 0,countDownMinute: 0,countDownSecond: 0,name: '',levelexam: '',testId: '',exchangCode: '',gradId: '',questionNum: 0,enrollItemBanks: [],Chess: [],answerChess: [],blackChess: [],total: 0,testIndex: 0, // 题目索引clickNumber: 0,canGoChess: true,banMa: true,banXiang: true,existe: true,faceState: false,rX: 0,rY: 0,hX: 0,hY: 0,chessGoNumber: 0,quesionNumber: 0,eatChess: false,isError: [],redanswerlength: 0,success: 0,isTrue: true}},created () {this.name = this.$route.params.namethis.levelexam = this.$route.params.levelexamthis.testId = this.$route.params.idthis.exchangCode = this.$route.params.exchangCodethis.gradId = this.$route.params.testIdconsole.log(this.$route, this.name, this.levelexam, this.testId, this.exchangCode)this.totalSecond = 1800this.questionNum = 20// var totalSecond = 1800var interval = setInterval(function () {// 秒数var second = this.totalSecond// 天数位var day = Math.floor(second / 3600 / 24)var dayStr = day.toString()if (dayStr.length === 1) dayStr = '0' + dayStr// 小时位var hr = Math.floor((second - day * 3600 * 24) / 3600)var hrStr = hr.toString()if (hrStr.length === 1) hrStr = '0' + hrStr// 分钟位var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60)var minStr = min.toString()if (minStr.length === 1) minStr = '0' + minStr// 秒位var sec = second - day * 3600 * 24 - hr * 3600 - min * 60var secStr = sec.toString()if (secStr.length === 1) secStr = '0' + secStrthis.countDownDay = dayStrthis.countDownHour = hrStrthis.countDownMinute = minStrthis.countDownSecond = secStrthis.totalSecond--console.log(this.totalSecond)if (this.totalSecond === 300) {this.$message('距离考试结束还剩5分钟')}if (this.totalSecond < 0) {clearInterval(interval)// 提交答案// 跳转页面console.log('时间到', this.success)// let totalNumber = this.success * 5this.updateEnrollFractionById(this.success)}}.bind(this), 1000)},mounted () {history.pushState(null, null, document.URL)window.addEventListener('popstate', function () {history.pushState(null, null, document.URL)})window.addEventListener('beforeunload', this.unload)// window.addEventListener('beforeunload', e => this.unload) // 注册一个匿名函数this.getTest(this.testId, this.exchangCode)this.initCanvas()// // 当调整窗口大小时重绘canvas// window.onresize = () => {//   this.initCanvas()//   this.drewChess(this.Chess)// }},// 2 销毁这个监听事件destroyed () {// 销毁这个监听事件，需要找到这个函数，如果使用的是匿名函数的话，无法查找这个函数，这个事件也就没有办法被移除 ，在其他页面仍然会执行这个监听事件window.removeEventListener('beforeunload', this.unload)},methods: {unload (e) {e = e || window.eventif (e) {console.log(e)// 在这里阻止默认的刷新，弹出弹框e.returnValue = '重新加载将导致准考证号失效，是否重新加载'// return '重新加载将导致准考证号失效，是否重新加载'}return '重新加载将导致准考证号失效，是否重新加载'},// 获取闯关题getTest (id, exchangCode) {getWalkingEnrollItemBank({enrollGradeId: id,exchangCode: exchangCode}).then(res => {// successconsole.log(res)if (res.success) {this.$message({message: '已刷新，准考证号失效将退出本次考试',center: true,type: 'warning'})setTimeout(() => {this.$router.push('/gradingTest')}, 3000)}this.enrollItemBanks = res.walkingEnrollItemBanksconsole.log(this.enrollItemBanks)this.total = res.walkingEnrollItemBanks.lengththis.drewChess(this.enrollItemBanks)}).catch(() => {// console.log('取消')})},// 提交闯关结果updateEnrollFractionById (fraction) {updateEnrollFractionById({id: this.gradId,fraction: fraction}).then(res => {// successconsole.log(res)this.$router.push({name: 'gradingResults',// name: 'mallList',query: {id: this.gradId,fractions: fraction,levelexam: this.levelexam}})}).catch((err) => {console.log(err)})},submit () {this.$confirm('确认交卷', {confirmButtonText: '确定',cancelButtonText: '取消',center: true}).then(() => {// console.log(this.selects)// console.log(sum)// let totalNumber = this.success * 5this.updateEnrollFractionById(this.success)}).catch(() => {// console.log('取消')// this.$confirm('将退出答题页面，本次考试将作废', {//   confirmButtonText: '确定',//   cancelButtonText: '取消',//   center: true// }).then(() => {// // console.log(this.selects)// // console.log(sum)//   this.$router.push('/gradingTest')// }).catch(() => {// // console.log('取消')//   // let totalNumber = this.success * 5//   this.updateEnrollFractionById(this.success)// })})},// 初始化canvasinitCanvas () {let that = thiscanvas = document.getElementById('canvas1')ctx = canvas.getContext('2d')canvas.width = 480canvas.height = 530ctx.lineWidth = 2ctx.strokeStyle = '#000'canvas.onclick = function (e) {let sx = e.clientX - canvas.getBoundingClientRect().leftlet sy = e.clientY - canvas.getBoundingClientRect().topthat.getChess(ctx, sx, sy)}that.initChess()},// 初始化棋盘initChess () {ctx.lineWidth = 2ctx.strokeStyle = '#000'let that = thisthat.row()that.cols()// 注意：现在的原点中心为（100,100），所以下面的所有坐标在原来的基础上加（x+100,y+100）；// 中心点一（1000,200）that.center(90, 140)// 中心点二（700,200）that.center(390, 140)// 中心点三（5,300）that.center(40, 190)// 中心点四（200,300）that.center(140, 190)// 中心点五（400,300）that.center(240, 190)// 中心点六（600,300）that.center(340, 190)// 中心点七（800,300）that.center(440, 190)// 中心点八（800,600）that.center(40, 340)// 中心点九（600,600）that.center(140, 340)// 中心点十（400,600）that.center(240, 340)// 中心点十一（200,600）that.center(340, 340)// 中心点十二（5,600）that.center(440, 340)// 中心点十三（700,700）that.center(90, 390)// 中心点十四（100,700）that.center(390, 390)// 必须当页面中的图片资源加载成功,再画棋子},// // 此方法用来画棋盘线LineDrawing (mx, my, lx, ly) {ctx.beginPath()ctx.moveTo(mx, my)ctx.lineTo(lx, ly)ctx.stroke()},// 棋盘行row () {for (var i = 40; i <= 490; i += 50) {ctx.beginPath()ctx.moveTo(40, i)ctx.lineTo(440, i)ctx.stroke()}},// 棋盘列cols () {for (var i = 40; i <= 490; i += 50) {ctx.beginPath()ctx.moveTo(i, 40)ctx.lineTo(i, 490)ctx.stroke()}// 清除指定的矩形区域ctx.clearRect(41, 241, 398, 48)ctx.font = '28px Georgia'ctx.fillText('楚', 95, 275)ctx.fillText('河', 145, 275)ctx.fillText('汉', 315, 275)ctx.fillText('界', 365, 275)// 斜线this.LineDrawing(190, 40, 290, 140)this.LineDrawing(190, 390, 290, 490)// 反斜线this.LineDrawing(290, 40, 190, 140)this.LineDrawing(290, 390, 190, 490)},// 坐标的中心点center (x, y) {ctx.lineWidth = 3// 中心点一（100,200）if (x === 40 && y === 190) {// 右上this.LineDrawing(x + 5, y - 15, x + 5, y - 5)this.LineDrawing(x + 5, y - 5, x + 15, y - 5)// 右下this.LineDrawing(x + 5, y + 15, x + 5, y + 5)this.LineDrawing(x + 5, y + 5, x + 15, y + 5)} else if (x === 440 && y === 190) {// 左上this.LineDrawing(x - 5, y - 15, x - 5, y - 5)this.LineDrawing(x - 5, y - 5, x - 15, y - 5)// 左下this.LineDrawing(x - 5, y + 15, x - 5, y + 5)this.LineDrawing(x - 5, y + 5, x - 15, y + 5)} else if (x === 40 && y === 340) {// 右上this.LineDrawing(x + 5, y - 15, x + 5, y - 5)this.LineDrawing(x + 5, y - 5, x + 15, y - 5)// 右下this.LineDrawing(x + 5, y + 15, x + 5, y + 5)this.LineDrawing(x + 5, y + 5, x + 15, y + 5)} else if (x === 440 && y === 340) {// 左上this.LineDrawing(x - 5, y - 15, x - 5, y - 5)this.LineDrawing(x - 5, y - 5, x - 15, y - 5)// 左下this.LineDrawing(x - 5, y + 15, x - 5, y + 5)this.LineDrawing(x - 5, y + 5, x - 15, y + 5)} else {// 左上this.LineDrawing(x - 5, y - 15, x - 5, y - 5)this.LineDrawing(x - 5, y - 5, x - 15, y - 5)// 右上this.LineDrawing(x + 5, y - 15, x + 5, y - 5)this.LineDrawing(x + 5, y - 5, x + 15, y - 5)// 左下this.LineDrawing(x - 5, y + 15, x - 5, y + 5)this.LineDrawing(x - 5, y + 5, x - 15, y + 5)// 右下this.LineDrawing(x + 5, y + 15, x + 5, y + 5)this.LineDrawing(x + 5, y + 5, x + 15, y + 5)}},// 点击到棋子后的显示框draw_check (context, x, y) {// // 重新画整个棋盘// // repaint(context);// // 开始画左上角let screenx = x + 20let screeny = y + 20ctx.lineWidth = 3ctx.strokeStyle = '#97092a'// console.log(x, y)context.beginPath()context.moveTo(screenx - 23, screeny - 16)context.lineTo(screenx - 23, screeny - 23)context.lineTo(screenx - 16, screeny - 23)// // 开始画右上角context.moveTo(screenx + 16, screeny - 23)context.lineTo(screenx + 23, screeny - 23)context.lineTo(screenx + 23, screeny - 16)// // 开始画左下角context.moveTo(screenx - 23, screeny + 16)context.lineTo(screenx - 23, screeny + 23)context.lineTo(screenx - 16, screeny + 23)// // 开始画右下角context.moveTo(screenx + 23, screeny + 16)context.lineTo(screenx + 23, screeny + 23)context.lineTo(screenx + 16, screeny + 23)context.stroke()},// 点击到棋子后的显示框draw_blcheck (context, x, y) {// // 重新画整个棋盘// // repaint(context);// // 开始画左上角let screenx = x + 20let screeny = y + 20ctx.lineWidth = 3ctx.strokeStyle = '#973c51'// console.log(x, y)context.beginPath()context.moveTo(screenx - 23, screeny - 16)context.lineTo(screenx - 23, screeny - 23)context.lineTo(screenx - 16, screeny - 23)// // 开始画右上角context.moveTo(screenx + 16, screeny - 23)context.lineTo(screenx + 23, screeny - 23)context.lineTo(screenx + 23, screeny - 16)// // 开始画左下角context.moveTo(screenx - 23, screeny + 16)context.lineTo(screenx - 23, screeny + 23)context.lineTo(screenx - 16, screeny + 23)// // 开始画右下角context.moveTo(screenx + 23, screeny + 16)context.lineTo(screenx + 23, screeny + 23)context.lineTo(screenx + 16, screeny + 23)context.stroke()},// 棋子展示drewChess (enrollItemBanks) {this.Chess = this.enrollItemBanks[this.testIndex].walkingEnrollItemBanksthis.answerChess = this.enrollItemBanks[this.testIndex].redAnswerthis.redanswerlength = this.enrollItemBanks[this.testIndex].redAnswer.lengththis.blackChess = this.enrollItemBanks[this.testIndex].blackAnswerconsole.log('棋子展示', this.Chess)console.log('红棋答案展示', this.answerChess)console.log('黑棋答案展示', this.blackChess)for (let i in this.Chess) {let img = new Image()img.src = this.Chess[i].imageUrlimg.id = this.Chess[i].ids// let id = Chess[i].idslet x = this.Chess[i].positionXlet y = this.Chess[i].positionY// let name = document.getElementById(id)// let img = this.$refs.conf// console.log(img[i])// let ids = img[i]img.onload = () => {ctx.drawImage(img, x, y, 40, 40)}}},// 清除框clearBox (context, descClick) {// console.log('qingchukuang')let oldx = descClick[0]let oldy = descClick[1]// let name = descClick[5]// console.log('qingchukuang', oldx, oldy)let screenx = oldx + 20let screeny = oldy + 20ctx.lineWidth = 4ctx.strokeStyle = '#f9c78b'context.beginPath()context.moveTo(screenx - 23, screeny - 16)context.lineTo(screenx - 23, screeny - 23)context.lineTo(screenx - 16, screeny - 23)// // 开始画右上角context.moveTo(screenx + 16, screeny - 23)context.lineTo(screenx + 23, screeny - 23)context.lineTo(screenx + 23, screeny - 16)// // 开始画左下角context.moveTo(screenx - 23, screeny + 16)context.lineTo(screenx - 23, screeny + 23)context.lineTo(screenx - 16, screeny + 23)// // 开始画右下角context.moveTo(screenx + 23, screeny + 16)context.lineTo(screenx + 23, screeny + 23)context.lineTo(screenx + 16, screeny + 23)context.stroke()// this.initChess()// console.log('qingchukuang', oldx, oldy)},// 清除要走的棋子clearChess (context, cx, cy) {context.clearRect(cx, cy, 40, 400)},// 重绘棋盘repaint (context) {// console.log('chonghui')context.clearRect(0, 0, 480, 530)this.initChess()},// 判断棋子是否存在isChessAlive (x, y) {this.existe = falsefor (let i in this.Chess) {if (this.Chess[i].positionX === x && this.Chess[i].positionY === y) {this.existe = true}}return this.existe},// 判断两方老帅是否面对面isFaceToFace () {for (let i in this.Chess) {if (this.Chess[i].piece === 5 && this.Chess[i].redBlack === 1) {// 红方老将 拿到坐标this.rX = this.Chess[i].positionXthis.rY = this.Chess[i].positionY}if (this.Chess[i].piece === 5 && this.Chess[i].redBlack === 0) {// 红方老将 拿到坐标this.hX = this.Chess[i].positionXthis.hY = this.Chess[i].positionY}// 老将在一条线上if (this.rX === this.hX) {for (let i in this.Chess) {// 老将之间没有面对面if (this.Chess[i].positionX === this.rX && this.Chess[i].positionY > this.rY && this.rX && this.Chess[i].positionY < this.hY) {this.faceState = false}if (this.Chess[i].positionX === this.rX && this.Chess[i].positionY < this.rY && this.rX && this.Chess[i].positionY > this.hY) {this.faceState = true}}}}return this.faceState},// 判断走子成功还是失败successOrFail (context, subX, subY) {let redanswerchess = this.answerChess[this.chessGoNumber]let blackanswerchess = this.blackChess[this.chessGoNumber]for (let i in this.Chess) {if (this.Chess[i].positionX === subX && this.Chess[i].positionY === subY) {this.Chess.splice(i, 1)}if (this.Chess[i].positionX === descClick[0] && this.Chess[i].positionY === descClick[1] && this.Chess[i].ids === descClick[5]) {// console.log('bcsj')this.Chess[i].positionX = subXthis.Chess[i].positionY = subYthis.repaint(context)this.drewChess(this.Chess)for (let index = 0; index < redanswerchess.length; index++) {console.log(redanswerchess[index].ids, descClick[5], redanswerchess[index].positionX, subX, redanswerchess[index].positionY, subY)if (redanswerchess[index].ids === descClick[5] && redanswerchess[index].positionX === subX && redanswerchess[index].positionY === subY) {console.log(this.chessGoNumber, 'this.chessGoNumber', this.redanswerlength, 'this.redanswerlength')if (this.chessGoNumber === this.redanswerlength - 1) {if (this.total - 1 === this.testIndex) {this.success++this.$message({message: '已完成答题',center: true,type: 'success'})setTimeout(() => {this.updateEnrollFractionById(this.success)}, 2000)} else {this.$message({message: '进入下一题',center: true,type: 'success'})setTimeout(() => {this.chessGoNumber = 0this.testIndex++this.success++this.isTrue = truethis.repaint(context)this.drewChess(this.Chess)descClick = []}, 2000)}// if (this.total - 1 === this.testIndex) {//   this.success++//   this.$message({//     message: '答题完毕，请提交',//     center: true,//     type: 'success'//   })// } else {//   setTimeout(() => {//     this.chessGoNumber = 0//     this.testIndex++//     this.success++//     this.repaint(context)//     this.drewChess(this.Chess)//     descClick = []//   }, 1500)// }}for (let i in this.Chess) {for (let index in blackanswerchess) {if (blackanswerchess[index].positionX === this.Chess[i].positionX && blackanswerchess[index].positionY === this.Chess[i].positionY) {console.log('黑棋走子的地方有旗子')this.Chess.splice(i, 1)}console.log(blackanswerchess[index].ids, this.Chess[i].ids)if (blackanswerchess[index].ids === this.Chess[i].ids) {console.log(this.Chess[i].ids)let oldX = this.Chess[i].positionXlet oldY = this.Chess[i].positionYlet blackX = blackanswerchess[index].positionXlet blackY = blackanswerchess[index].positionYconsole.log('走对了', blackX, blackY)this.Chess[i].positionX = blackXthis.Chess[i].positionY = blackYthis.chessGoNumber = this.chessGoNumber + 1setTimeout(() => {this.repaint(context)this.drewChess(this.Chess)this.draw_check(context, blackX, blackY)this.draw_blcheck(context, oldX, oldY)}, 800)}break}}break} else {console.log(index, redanswerchess.length - 1)if (index === redanswerchess.length - 1) {this.isTrue = falseconsole.log(this.isTrue)}}console.log(this.isTrue)if (!this.isTrue) {// console.log('zoucuo1')if (this.total - 1 === this.testIndex) {this.$message({message: '已完成答题',center: true,type: 'success'})setTimeout(() => {this.updateEnrollFractionById(this.success)}, 2000)} else {this.$message({message: '进入下一题',center: true,type: 'warning'})setTimeout(() => {this.isTrue = truethis.chessGoNumber = 0this.testIndex++this.repaint(context)this.drewChess(this.Chess)descClick = []}, 2000)}// break}}}}},// 点击棋子getChess (context, x, y) {x = x - 20y = y - 20console.log('x', x, 'y', y)// var sub_x = 0,sub_y = 0;// if (x<50||y<50||x>950||y>1010) {return false};// 这里就是一个四舍五入和向下取整，以便棋子能在棋盘上按格走// if (x%100>80||x%100<20) {sub_x = 100*Math.round(x/100)};// if (x%100>30&&x%100<70) {sub_x = x>100?(Math.floor(x/100)*100 ):50};// if (y%100>80||y%100<20) {sub_y = 100*Math.round(y/100)};// if (y%100>30&&y%100<70) {sub_y = y>100?(Math.floor(y/100)*100 ):50};if (x < 0 || y < 0 || x > 460 || y > 510) { return false }// console.log('x/100', x / 100, 'y/100', y / 100)// console.log('x/50', x / 50, 'y/50', y / 50)// console.log('x%100', x % 100, 'y/100', y % 100, 'x%100>80', x % 100 > 80, 'x%100<20', x % 100 < 20, '100*Math.round(x/100)', 50 * Math.round(x / 50))// console.log('y%100', x % 100, 'y/100', y % 100, 'y%100>80', y % 100 > 80, 'y%100<20', y % 100 < 20, '100*Math.round(y/100)', 50 * Math.round(y / 50))// console.log('x%100', x % 100, 'y/100', y % 100, 'x%100>30', x % 100 > 30, 'x%100<70', x % 100 < 70, 'x>100?(Math.floor(x/100)*100 ):50', x > 50 ? (Math.floor(x / 50) * 50) : 0)// console.log('x%100', x % 100, 'y/100', y % 100, 'y%100>30', y % 100 > 30, 'y%100<70', y % 100 < 70, 'y>100?(Math.floor(x/100)*100 ):50', y > 50 ? (Math.floor(y / 50) * 50) : 0)// console.log('x%50', x % 50, 'y/50', y % 50)// console.log('Math.abs((Math.floor(x / 50) * 50))', Math.abs((Math.floor(x / 50) * 50)))// console.log('Math.abs((Math.floor(x / 100) * 100))', Math.abs((Math.floor(x / 100) * 100)))// console.log('Math.abs((Math.floor(y / 50) * 50))', Math.abs((Math.floor(y / 50) * 50)))// console.log('Math.abs((Math.floor(y / 100) * 100))', Math.abs((Math.floor(y / 100) * 100)))// console.log('Math.abs((Math.round(x / 50) * 50))', Math.abs((Math.round(x / 50) * 50)))// console.log('Math.abs((Math.round(x / 100) * 100))', Math.abs((Math.round(x / 100) * 100)))// console.log('Math.abs((Math.round(y / 50) * 50))', Math.abs((Math.round(y / 50) * 50)))// console.log('Math.abs((Math.round(y / 100) * 100))', Math.abs((Math.round(y / 100) * 100)))console.log('x % 100 > 10 && x % 100 < 100', x % 100 > 10 && x % 100 < 100, x > 420 ? subX = 400 : subX = Math.abs((Math.floor(x / 50) * 50)))console.log('y % 100 > 10 || y % 100 < 100', y % 100 > 10 || y % 100 < 100, y > 470 ? subY = 450 : subY = Math.abs(50 * Math.floor(y / 50)))if (x % 100 > 10 || x % 100 < 100) { x > 420 ? subX = 400 : subX = Math.abs((Math.floor(x / 50) * 50)) }if (y % 100 > 10 || y % 100 < 100) { y > 470 ? subY = 450 : subY = Math.abs(50 * Math.floor(y / 50)) }subX = subX + 20subY = subY + 20console.log(' subX', subX, 'subY', subY)// 点击到棋子了if (subX >= 0 && subY >= 0) {let chess = this.Chessthis.clickNumber = this.clickNumber + 1console.log(descClick, 'descClick', this.clickNumber, 'clickNumber')// 判断点击次数1代表第一次点击，需要判断是否点击到棋子，并判断是否是红子并存储信息// 2代表要走的位置，需要判断2，点击的位置的情况1，没有棋子，2，有旗子，a，是红子，b是黑子。是黑子就要判断是否可以吃子，红子就不做任何表示if (this.clickNumber === 1) {for (let i in chess) {// 判断点击的哪个棋子if (chess[i].positionX === subX && chess[i].positionY === subY) {// 点击的棋子是红子if (chess[i].redBlack === 1) {// 画棋子点中的框if (this.chessGoNumber > 0) {this.repaint(context)this.drewChess(this.Chess)}this.draw_check(context, subX, subY)// 保存点击棋子的值descClick = [subX, subY, i, chess[i].redBlack, chess[i].piece, chess[i].ids]console.log(descClick, 'descClick')break} else {this.$message({message: '请点击红方',center: true,type: 'warning'})this.clickNumber = 0}}}}// 第二次点击涉及走子if (this.clickNumber === 2) {// 判断点击的棋子是否存在if (this.isChessAlive(subX, subY)) {// 棋子存在for (let i in this.Chess) {if (chess[i].positionX === subX && chess[i].positionY === subY) {// 点击的棋子是红子更换点击位置画框if (chess[i].redBlack === 1) {this.repaint(context)this.drewChess(this.Chess)// 保存点击的值descClick = [subX, subY, i, chess[i].redBlack, chess[i].piece, chess[i].ids]this.draw_check(context, subX, subY)console.log('第二次点击', descClick)this.clickNumber = 1break} else {// 判断是否可以吃子 点击的是黑子if (this.canGo(subX, subY, descClick)) {// 清除画框this.clearBox(context, descClick)this.successOrFail(context, subX, subY)this.clickNumber = 0// this.repaint(context)} else {console.log('走子规则不对')this.clickNumber = 1this.canGoChess = true}}break}}} else {// 棋子不存在可以走console.log('棋子不存在可以走')if (this.canGo(subX, subY, descClick)) {// 清除画框this.clearBox(context, descClick)this.successOrFail(context, subX, subY)this.clickNumber = 0} else {console.log('走子规则不对')this.banXiang = truethis.banMa = truethis.clickNumber = 1}}}}},// 走子规则canGo (x, y, descClick) {this.canGoChess = truelet newX = xlet newY = ylet oldX = descClick[0]let oldY = descClick[1]let piece = descClick[4]let minX = oldX > newX ? newX : oldXlet maxX = oldX > newX ? oldX : newXlet minY = oldY > newY ? newY : oldYlet maxY = oldY > newY ? oldY : newY// console.log('newX', newX, 'newY', newY, 'oldX', oldX, 'oldY', oldY, 'minX', minX, 'maxX', maxX, 'minY', minY, 'maxY', maxY, piece)// if (this.isFaceToFace()) {//   return false// }switch (piece) {case 1:// che 不在一条直线上不能走不能吃if (newX !== oldX && newY !== oldY) {// console.log('不在一条直线上')this.canGoChess = falsethis.existe = falsebreak}for (let i in this.Chess) {if (this.Chess[i].positionX === newX && this.Chess[i].positionY > minY && this.Chess[i].positionY < maxY) {this.canGoChess = false// console.log('在一条直线上,X上')}if (this.Chess[i].positionY === newY && this.Chess[i].positionX > minX && this.Chess[i].positionX < maxX) {this.canGoChess = false// console.log('在一条直线上,y上')}}// console.log(this.canGoChess)breakcase 2:// ma// console.log('进入规则马', this.canGoChess, this.banMa)this.canGoChess = falsethis.banMa = truefor (let i in this.Chess) {// console.log('进入规则', this.Chess)let banX = this.Chess[i].positionXlet banY = this.Chess[i].positionYconsole.log('进入规则马', 'banX', banX, 'banY', banY, 'newX', newX, 'newY', newY)if (oldY === banY && oldX + 50 === banX && newY + 50 === banY && newX - 50 === banX) {this.$message({message: '绊马腿1',center: true,type: 'warning'})this.banMa = false}if (oldY === banY && oldX - 50 === banX && newY - 50 === banY && newX + 50 === banX) {this.$message({message: '绊马腿2',center: true,type: 'warning'})this.banMa = false}if (oldY === banY && oldX - 50 === banX && newY + 50 === banY && newX + 50 === banX) {this.$message({message: '绊马腿3',center: true,type: 'warning'})this.banMa = false}if (oldY === banY && oldX + 50 === banX && newY - 50 === banY && newX - 50 === banX) {this.$message({message: '绊马腿4',center: true,type: 'warning'})this.banMa = false}if (oldX === banX && oldY - 50 === banX && newY + 50 === banY && newX + 50 === banX) {this.$message({message: '绊马腿5',center: true,type: 'warning'})this.banMa = false}if (oldX === banX && oldY + 50 === banX && newY - 50 === banY && newX + 50 === banX) {this.$message({message: '绊马腿6',center: true,type: 'warning'})this.banMa = false}if (oldX === banX && oldY + 50 === banX && newY - 50 === banY && newX - 50 === banX) {this.$message({message: '绊马腿7',center: true,type: 'warning'})this.banMa = false}if (oldX === banX && oldY - 50 === banX && newY + 50 === banY && newX - 50 === banX) {this.$message({message: '绊马腿8',center: true,type: 'warning'})this.banMa = false}}if (oldX + 50 === newX && oldY + 100 === newY && this.banMa) {this.canGoChess = true}if (oldX + 100 === newX && oldY + 50 === newY && this.banMa) {this.canGoChess = true}if (oldX - 100 === newX && oldY - 50 === newY && this.banMa) {this.canGoChess = true}if (oldX + 100 === newX && oldY - 50 === newY && this.banMa) {this.canGoChess = true}if (oldX - 100 === newX && oldY + 50 === newY && this.banMa) {this.canGoChess = true}if (oldX - 50 === newX && oldY - 100 === newY && this.banMa) {this.canGoChess = true}if (oldX - 50 === newX && oldY + 100 === newY && this.banMa) {this.canGoChess = true}if (oldX + 50 === newX && oldY - 100 === newY && this.banMa) {this.canGoChess = true}breakcase 3:// xiang// this.canGoChess = false// console.log('进入规则象', this.canGoChess, this.banMa)this.canGoChess = falsethis.banMa = truefor (let i in this.Chess) {// console.log('进入规则', this.Chess)let banX = this.Chess[i].positionXlet banY = this.Chess[i].positionY// console.log('进入规则xiang', 'banX', banX, 'banY', banY, 'newX', newX, 'newY', newY)if (newY < 270) {this.banXiang = false}if (newX + 50 === banX && newY + 50 === banY && oldX - 50 === banX && oldY - 50 === banY) {this.$message({message: '绊象腿1',center: true,type: 'warning'})this.banXiang = false}if (newX + 50 === banX && newY - 50 === banY && oldX - 50 === banX && oldY + 50 === banY) {this.$message({message: '绊象腿2',center: true,type: 'warning'})this.banXiang = false}if (newX - 50 === banX && newY + 50 === banY && oldX + 50 === banX && oldY - 50 === banY) {this.$message({message: '绊象腿3',center: true,type: 'warning'})this.banXiang = false}if (newX - 50 === banX && newY - 50 === banY && oldX + 50 === banX && oldY + 50 === banY) {this.$message({message: '绊象腿4',center: true,type: 'warning'})this.banXiang = false}}if (oldX + 100 === newX && oldY + 100 === newY && this.banXiang) {this.canGoChess = true}if (oldX + 100 === newX && oldY - 100 === newY && this.banXiang) {this.canGoChess = true}if (oldX - 100 === newX && oldY + 100 === newY && this.banXiang) {this.canGoChess = true}if (oldX - 100 === newX && oldY - 100 === newY && this.banXiang) {this.canGoChess = true}breakcase 4:// shithis.canGoChess = false// console.log('shi', oldX, oldY, newX, newY)if (newX < 170 || newX > 270) { break }if (oldX + 50 === newX && oldY + 50 === newY) {this.canGoChess = true}if (oldX - 50 === newX && oldY + 50 === newY) {this.canGoChess = true}if (oldX - 50 === newX && oldY - 50 === newY) {this.canGoChess = true}if (oldX + 50 === newX && oldY - 50 === newY) {this.canGoChess = true}breakcase 5:// shuaithis.canGoChess = false// console.log('shi', oldX, oldY)if (newX < 170 || newX > 270) { break }if (newY < 370 || newY > 470) { break }if (oldX === newX && oldY - 50 === newY) {this.canGoChess = true}if (oldX - 50 === newX && oldY === newY) {this.canGoChess = true}if (oldX + 50 === newX && oldY === newY) {this.canGoChess = true}if (oldX === newX && oldY + 50 === newY && oldY !== 470) {this.canGoChess = true}breakcase 6: // paolet num = 0// console.log(this.canGoChess)if (newX !== oldX && newY !== oldY) {// console.log('不在一条直线上')this.canGoChess = falsebreak}if (this.existe) { // youqizi可以吃子// console.log('youqizi可以吃子')if (newX === oldX || newY === oldY) {for (let i in this.Chess) {// console.log(this.Chess, this.existe)if (this.Chess[i].positionX === oldX && this.Chess[i].positionY > minY && this.Chess[i].positionY < maxY) {num = num + 1// console.log(num)}if (this.Chess[i].positionY === oldY && this.Chess[i].positionX > minX && this.Chess[i].positionX < maxX) {num = num + 1// console.log(num)}}if (num !== 1) {this.canGoChess = false}// console.log(this.canGoChess)break}for (let i in this.Chess) {if (this.Chess[i].positionX === oldX && this.Chess[i].positionY > minY && this.Chess[i].positionY < maxY) {this.canGoChess = false// console.log('zou1')}if (this.Chess[i].positionY === oldY && this.Chess[i].positionX > minX && this.Chess[i].positionX < maxX) {this.canGoChess = false// console.log('zou2')}}}if (!this.existe) {console.log('点击的位置没有棋子')if (newX === oldX || newY === oldY) {console.log('x走')for (let i in this.Chess) {// console.log(this.Chess, this.existe)if (this.Chess[i].positionX === oldX && this.Chess[i].positionY > minY && this.Chess[i].positionY < maxY) {num = num + 1// console.log(num)}if (this.Chess[i].positionY === oldY && this.Chess[i].positionX > minX && this.Chess[i].positionX < maxX) {num = num + 1// console.log(num)}}if (num !== 0) {this.canGoChess = false}// console.log(this.canGoChess)break}}breakcase 7:this.canGoChess = false// console.log('bing')if (oldX === newX && oldY - 50 === newY) {this.canGoChess = true}if (newY <= 220) {if (oldX === newX && oldY - 50 === newY) {this.canGoChess = true}if (oldY === newY && oldX + 50 === newX) {this.canGoChess = true}if (oldY === newY && oldX - 50 === newX) {this.canGoChess = true}}}return this.canGoChess}}
}
</script><style scoped lang="scss">@import "../../assets/scss/base.scss";@import "../../assets/scss/mixin.scss";@import "../../assets/scss/config.scss";.container{box-sizing: border-box;@media only screen and (min-width: 540px) and (max-width: 1180px){width: 1180px;}.dotest{box-sizing: border-box;height: 40px;width: 100%;border-bottom: 1px solid #cecece;@include flex();margin-top: 30px;.left{font-size: 20px;font-family: Microsoft YaHei;font-weight: 400;color: #EF0404;}.right{font-size: 20px;font-family: Microsoft YaHei;font-weight: 400;color: #000000;.time{font-size: 20px;font-family: Microsoft YaHei;font-weight: 400;color: #EF0404;}}}.dotest_content{box-sizing: border-box;margin-top: 40px;margin-bottom: 90px;@include flexed();.item_left{width: 225px;margin-right: 24px;.info{width: 225px;border: 1px solid #cecece;padding: 20px 30px;box-sizing: border-box;margin-bottom: 20px;.item_title{width: 100%;text-align: center;font-size: 18px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;}.item_info{width: 100%;text-align: left;font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;margin: 10px 0;.question{color: #000;font-size: 30px;}.success{color: #EF0404;font-size: 30px;}}}.select {width: 225px;border: 1px solid #cecece;padding: 10px 30px 20px;box-sizing: border-box;@include flexed();.item_choose{cursor: not-allowed;width: 20px;height: 20px;border: 1px solid #cecece;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;text-align: center;line-height: 20px;margin-top: 10px;margin-right: 13px;&:nth-child(5n){margin-right: 0;}}.item_chooses{background-color: #008DE9;border: 1px solid #008DE9;color: #ffffff;}.agin_item_choose {background-color: #999;border: 1px solid #999;color: #000;}}.submit{width: 100px;height: 40px;background-color: #008DE9;color: #ffffff;text-align: center;line-height: 40px;font-size: 20px;margin: auto;margin-top: 50px;cursor: pointer;}}.item-rigts{width: 931px;border: 1px solid #cecece;padding-top: 20px;padding-bottom: 20px;// padding-left: 59px;box-sizing: border-box;margin: auto;.canvas-bg{width: 480px;background-color: #f8be7c;padding: 20px;margin: auto;}}}}
</style>
vue实现模拟象棋走子相关推荐

h5使用canvas模拟制作的中国象棋实现残局走子
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta http-e ...
vue组件化通信之子向父传值
vue组件化通信之子向父传值 vue组件化通信之兄弟组件传值 vue中子向父传递消息一般使用$emit,方法比较简单,直接看代码父组件 <template><div>< ...
vue本地模拟数据之mockjs安装 - cmd篇
一.引言: 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 官网描述mockjs是: 前后端分离不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 数据类型丰富通 ...
vue的props父向子传值
vue的props父向子传值实现效果父AppHome.JS 传递 hobbies,emplist 上半部分接收hobbies 下半部分接收empList并向其下一层子文件传递数据emp 二级子文件 ...
vue父组件中调用子组件中的方法及vue父组件调用孙子组件的方法
一:通过ref直接调用子组件的方法: 子组件child.vue: <template><div>我是子组件</div> </template> < ...
vue传值给子页面html,vue.js如何父传子？
vue.js如何父传子?下面本篇文章给大家介绍一下vue.js中父传子的传值方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 引用官网的一句话:父子组件的关系可以总结为 prop ...
基于flask+vue的模拟股票交易系统
开发工具(eclipse/idea/vscode等):pycharm+hbuilder 数据库(sqlite/mysql/sqlserver等):sqlite 功能模块(请用文字描述,至少200字): ...
vue父页面实时给子页面传值
实操笔记: 设置set this.DataList = []const varName='formObj' this[varName].PkIds && delete this[var ...
vue项目模拟后台数据
这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立我这里为了演示这个过程所以自己编写了 ...
vue实现模拟象棋走子

vue实现模拟象棋走子相关推荐

最新文章

热门文章
