/* 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.name
this.levelexam = this.$route.params.levelexam
this.testId = this.$route.params.id
this.exchangCode = this.$route.params.exchangCode
this.gradId = this.$route.params.testId
console.log(this.$route, this.name, this.levelexam, this.testId, this.exchangCode)
this.totalSecond = 1800
this.questionNum = 20
// var totalSecond = 1800
var 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 * 60
var secStr = sec.toString()
if (secStr.length === 1) secStr = '0' + secStr
this.countDownDay = dayStr
this.countDownHour = hrStr
this.countDownMinute = minStr
this.countDownSecond = secStr
this.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 * 5
this.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.event
if (e) {
console.log(e)
// 在这里阻止默认的刷新，弹出弹框
e.returnValue = '重新加载将导致准考证号失效，是否重新加载'
// return '重新加载将导致准考证号失效，是否重新加载'
}
return '重新加载将导致准考证号失效，是否重新加载'
},
// 获取闯关题
getTest (id, exchangCode) {
getWalkingEnrollItemBank({
enrollGradeId: id,
exchangCode: exchangCode
}).then(res => {
// success
console.log(res)
if (res.success) {
this.$message({
message: '已刷新，准考证号失效将退出本次考试',
center: true,
type: 'warning'
})
setTimeout(() => {
this.$router.push('/gradingTest')
}, 3000)
}
this.enrollItemBanks = res.walkingEnrollItemBanks
console.log(this.enrollItemBanks)
this.total = res.walkingEnrollItemBanks.length
this.drewChess(this.enrollItemBanks)
}).catch(() => {
// console.log('取消')
})
},
// 提交闯关结果
updateEnrollFractionById (fraction) {
updateEnrollFractionById({
id: this.gradId,
fraction: fraction
}).then(res => {
// success
console.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 * 5
this.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)
// })
})
},
// 初始化canvas
initCanvas () {
let that = this
canvas = document.getElementById('canvas1')
ctx = canvas.getContext('2d')
canvas.width = 480
canvas.height = 530
ctx.lineWidth = 2
ctx.strokeStyle = '#000'
canvas.onclick = function (e) {
let sx = e.clientX - canvas.getBoundingClientRect().left
let sy = e.clientY - canvas.getBoundingClientRect().top
that.getChess(ctx, sx, sy)
}
that.initChess()
},
// 初始化棋盘
initChess () {
ctx.lineWidth = 2
ctx.strokeStyle = '#000'
let that = this
that.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 + 20
let screeny = y + 20
ctx.lineWidth = 3
ctx.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 + 20
let screeny = y + 20
ctx.lineWidth = 3
ctx.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].walkingEnrollItemBanks
this.answerChess = this.enrollItemBanks[this.testIndex].redAnswer
this.redanswerlength = this.enrollItemBanks[this.testIndex].redAnswer.length
this.blackChess = this.enrollItemBanks[this.testIndex].blackAnswer
console.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].imageUrl
img.id = this.Chess[i].ids
// let id = Chess[i].ids
let x = this.Chess[i].positionX
let 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 + 20
let screeny = oldy + 20
ctx.lineWidth = 4
ctx.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 = false
for (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].positionX
this.rY = this.Chess[i].positionY
}
if (this.Chess[i].piece === 5 && this.Chess[i].redBlack === 0) {
// 红方老将 拿到坐标
this.hX = this.Chess[i].positionX
this.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 = subX
this.Chess[i].positionY = subY
this.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 = 0
this.testIndex++
this.success++
this.isTrue = true
this.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].positionX
let oldY = this.Chess[i].positionY
let blackX = blackanswerchess[index].positionX
let blackY = blackanswerchess[index].positionY
console.log('走对了', blackX, blackY)
this.Chess[i].positionX = blackX
this.Chess[i].positionY = blackY
this.chessGoNumber = this.chessGoNumber + 1
setTimeout(() => {
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 = false
console.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 = true
this.chessGoNumber = 0
this.testIndex++
this.repaint(context)
this.drewChess(this.Chess)
descClick = []
}, 2000)
}
// break
}
}
}
}
},
// 点击棋子
getChess (context, x, y) {
x = x - 20
y = y - 20
console.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 + 20
subY = subY + 20
console.log(' subX', subX, 'subY', subY)
// 点击到棋子了
if (subX >= 0 && subY >= 0) {
let chess = this.Chess
this.clickNumber = this.clickNumber + 1
console.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 = 1
break
} 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 = 1
this.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 = true
this.banMa = true
this.clickNumber = 1
}
}
}
}
},
// 走子规则
canGo (x, y, descClick) {
this.canGoChess = true
let newX = x
let newY = y
let oldX = descClick[0]
let oldY = descClick[1]
let piece = descClick[4]
let minX = oldX > newX ? newX : oldX
let maxX = oldX > newX ? oldX : newX
let minY = oldY > newY ? newY : oldY
let 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 = false
this.existe = false
break
}
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)
break
case 2:// ma
// console.log('进入规则马', this.canGoChess, this.banMa)
this.canGoChess = false
this.banMa = true
for (let i in this.Chess) {
// console.log('进入规则', this.Chess)
let banX = this.Chess[i].positionX
let banY = this.Chess[i].positionY
console.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
}
break
case 3:// xiang
// this.canGoChess = false
// console.log('进入规则象', this.canGoChess, this.banMa)
this.canGoChess = false
this.banMa = true
for (let i in this.Chess) {
// console.log('进入规则', this.Chess)
let banX = this.Chess[i].positionX
let 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
}
break
case 4:// shi
this.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
}
break
case 5:// shuai
this.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
}
break
case 6: // pao
let num = 0
// console.log(this.canGoChess)
if (newX !== oldX && newY !== oldY) {
// console.log('不在一条直线上')
this.canGoChess = false
break
}
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
}
}
break
case 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实现模拟象棋走子
最新推荐文章于 2024-06-06 09:35:28 发布
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
