五子棋
最下面是详细代码加注释
首先需要一个画布 我们需要一个一个棋盘
<canvas id="canvas"></canvas>
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let redP = document.getElementsByClassName('redP')[0]
let blackP = document.getElementsByClassName('blackP')[0]
let resultP = document.getElementsByClassName('resultP')[0]
//画布宽高
canvas.height = canvas.width = '450'
//棋盘方格大小
let flag = 50
let getXLineArr = []
let getYLineArr = []
//偶数红色 基数 黑色
let blackOrRedChessman = 0
let hasChessmanArrList = []
//坐标点数组
let lineXAndlineYArr = []
let lineXAndlineYArrRed = []
let lineXAndlineYArrBlack = []
for (let i = 0; i <= canvas.width; i += flag) {
for (let j = 0; j <= canvas.width; j += flag) {
lineXAndlineYArr.push([i, j])
}
}
//画布距离浏览器上册的距离
let MarginTopNum = 200;
//画布距离浏览器左册的距离
MarginLeftNum = 300;
写一个棋盘横线竖线的构造函数，方便划线，并在原型上定义方法，分别画横线、竖线
function init() {
function Line(color, x, y) {
this.color = color;
this.x = x
this.y = y
}
Line.prototype.getXLine = function () {
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, this.y);
ctx.lineTo(this.x, this.y);
ctx.strokeStyle = this.color;
ctx.closePath();
ctx.fill();
ctx.stroke();
}
Line.prototype.getYLine = function () {
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(this.x, 0);
ctx.strokeStyle = this.color;
ctx.lineTo(this.x, this.y);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
let num = 0
//颜色数组 随机颜色的横竖线条
let colorsList = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]
for (let i = 0; i <= canvas.width; i += flag) {
let colorx = colorsList[Math.floor(Math.random() * 10)]
let colory = colorsList[Math.floor(Math.random() * 10)]
getXLineArr.push(new Line(colorx, canvas.width, num))
getYLineArr.push(new Line(colory, num, canvas.width))
num += flag
}
getXLineArr.map(item => {
item.getXLine()
})
getYLineArr.map(item => {
item.getYLine()
})
}
这个时候已经可以生成一个棋盘
棋子构造函数和原型上的生成棋子的方法，唯一区分就是颜色
//x 横坐标
//y 纵坐标
//color 棋子颜色坐标
//x 横坐标
//棋子构造函数
function Chessman(x, y, color) {
this.x = x
this.y = y
this.color = color
}
Chessman.prototype.update = function () {
ctx.save();
ctx.beginPath()
ctx.fillStyle = this.color// 背景颜色为红色
ctx.arc(this.x, this.y, 20, 0, Math.PI * 2, false)
ctx.fill()
ctx.closePath()
}
下面是鼠标点击生成棋子
首先是判断生成棋子的颜色 该是哪个
//偶数红色 基数 黑色
let blackOrRedChessman = 0
我们可以用blackOrRedChessman 这个变量做判断
是不是2的倍数左判断
canvas.addEventListener('click', function (e) {
//当前点击的坐标
let arr = [e.clientX - MarginLeftNum, e.clientY - MarginTopNum]
let newArrLong = Math.sqrt((0 - arr[0]) * (0 - arr[0]) + (0 - arr[1]) * (0 - arr[1]))
let newARR = []
lineXAndlineYArr.map((item, index) => {
let newArrLongA = Math.sqrt((item[0] - arr[0]) * (item[0] - arr[0]) + (item[1] - arr[1]) * (item[1] - arr[1]))
if (newArrLongA <= newArrLong) {
newARR = item; newArrLong = newArrLongA
}
})
let hasYesOrNo = JSON.stringify(hasChessmanArrList).includes(JSON.stringify(newARR))
if (!hasYesOrNo) {
hasChessmanArrList.push(newARR)
}
else {
alert('已经有棋子')
return
}
let color = blackOrRedChessman % 2 == 0 ? 'red' : 'black'
new Chessman(newARR[0], newARR[1], color).update()
blackOrRedChessman % 2 == 0 ? lineXAndlineYArrRed.push(newARR) : lineXAndlineYArrBlack.push(newARR)
//红色棋子已经大于5
let newlineXAndlineYArr
blackOrRedChessman % 2 == 0 ? newlineXAndlineYArr = JSON.parse(JSON.stringify(lineXAndlineYArrRed)) : newlineXAndlineYArr = JSON.parse(JSON.stringify(lineXAndlineYArrBlack))
blackOrRedChessman++
redP.innerHTML = '红旗已下' + lineXAndlineYArrRed.length
blackP.innerHTML = '黑旗已下' + lineXAndlineYArrBlack.length
if (newlineXAndlineYArr.length >= 5) {
//横向
xFangXiang()
//纵向
yFangXiang()
//向右向右倾斜
rightRightFangXiang()
// //向左倾斜
// leftFangXiang()
function xFangXiang() {
//横向
let obj = {
}
let xArr = []
let newlineXAndlineYArrx = JSON.parse(JSON.stringify(newlineXAndlineYArr))
newlineXAndlineYArrx.filter(item => {
if (Object.prototype.hasOwnProperty.call(obj, item[1])) {
obj[item[1]] += 1
} else {
obj[item[1]] = 1
}
})
for (let key in obj) {
if (obj[key] >= 5) {
//y 有五个相等
for (let j = 0; j < newlineXAndlineYArrx.length; j++) {
if (newlineXAndlineYArrx[j][1] == key)
xArr.push(newlineXAndlineYArrx[j][0])
}
let xArrX = xArr.sort((a, b) => a - b)
let num = obj[key] - 5 + 1
let numm = 0
for (let j = 0; j < num; j++) {
if (numm == num) return
for (let i = numm; i < xArrX.length; i++) {
if (xArrX[i] + flag == xArrX[i + 1] && xArrX[i + 1] + flag == xArrX[i + 2] && xArrX[i + 2] + flag == xArrX[i + 3] && xArrX[i + 3] + 50 == xArrX[i + 4]) {
youWinFun()
}
}
numm++
}
}
}
}
}
function yFangXiang() {
//纵向
let obj = {
}
let xArr = []
let newlineXAndlineYArry = JSON.parse(JSON.stringify(newlineXAndlineYArr))
newlineXAndlineYArry.filter(item => {
if (Object.prototype.hasOwnProperty.call(obj, item[0])) {
obj[item[0]] += 1
} else {
obj[item[0]] = 1
}
})
for (let key in obj) {
if (obj[key] >= 5) {
//y 有五个相等
for (let j = 0; j < newlineXAndlineYArry.length; j++) {
if (newlineXAndlineYArry[j][0] == key)
xArr.push(newlineXAndlineYArry[j][1])
}
let xArrX = xArr.sort((a, b) => a - b)
let num = obj[key] - 5 + 1
let numm = 0
for (let j = 0; j < num; j++) {
if (numm == num) return
for (let i = numm; i < xArrX.length; i++) {
if (xArrX[i] + flag == xArrX[i + 1] && xArrX[i + 1] + flag == xArrX[i + 2] && xArrX[i + 2] + flag == xArrX[i + 3] && xArrX[i + 3] + flag == xArrX[i + 4]) {
youWinFun()
}
}
numm++
}
}
}
}
// //向右倾斜
function rightRightFangXiang() {
// x 从小到大
let newlineXAndlineYArrR = JSON.parse(JSON.stringify(newlineXAndlineYArr))
newARR[0], newARR[1]
//右下
//当它是第0棵棋子的时候 其他四颗
// 0 [[ newARR[0]+flag, newARR[1]+50],[ newARR[0]+100, newARR[1]+100],[ newARR[0]+150, newARR[1]+150],[ newARR[0]+200, newARR[1]+200]]
//1 [[ newARR[0]-50, newARR[1]-50],[ newARR[0]+50, newARR[1]+50],[ newARR[0]+100, newARR[1]+100],[ newARR[0]+150, newARR[1]+150]]
//2 [[ newARR[0]-50, newARR[1]-50],[ newARR[0]-100, newARR[1]-100],[ newARR[0]+50, newARR[1]+50],[ newARR[0]+100, newARR[1]+100]]
//3 [[ newARR[0]-50, newARR[1]-50],[ newARR[0]-100, newARR[1]-100],[ newARR[0]-150, newARR[1]-150],[ newARR[0]+50, newARR[1]+50]]
//4 [[ newARR[0]-50, newARR[1]-50],[ newARR[0]-100, newARR[1]-100],[ newARR[0]-150, newARR[1]-150],[ newARR[0]+200, newARR[1]+200]]
//左下
//当它是第0棵棋子的时候 其他四颗
// 0 [[ newARR[0]-50, newARR[1]+50],[ newARR[0]-100, newARR[1]+100],[ newARR[0]-150, newARR[1]+150],[ newARR[0]-200, newARR[1]+200]]
//1 [[ newARR[0]+50, newARR[1]-50],[ newARR[0]-50, newARR[1]+50],[ newARR[0]-100, newARR[1]+100],[ newARR[0]-150, newARR[1]+150]]
//2 [[ newARR[0]+50, newARR[1]-50],[ newARR[0]+100, newARR[1]-100],[ newARR[0]-50, newARR[1]+50],[ newARR[0]-100, newARR[1]+100]]
//3 [[ newARR[0]+50, newARR[1]-50],[ newARR[0]+100, newARR[1]-100],[ newARR[0]+150, newARR[1]-150],[ newARR[0]-50, newARR[1]+50]]
//4 [[ newARR[0]+50, newARR[1]-50],[ newARR[0]+100, newARR[1]-100],[ newARR[0]+150, newARR[1]-150],[ newARR[0]+200, newARR[1]-200]]
let newRightArrList = []
for (let i = 0; i < 5; i++) {
newRightArrList = []
if (i == 0) {
if (true) {
newRightArrList = [[newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2], [newARR[0] - flag * 3, newARR[1] + flag * 3], [newARR[0] - flag * 4, newARR[1] + flag * 4]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2], [newARR[0] + flag * 3, newARR[1] + flag * 3], [newARR[0] + flag * 4, newARR[1] + flag * 4]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
if (i == 1) {
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2], [newARR[0] - flag * 3, newARR[1] + flag * 3]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
if (true) {
newRightArrList = [[newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2], [newARR[0] + flag * 3, newARR[1] + flag * 3]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
if (i == 2) {
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
if (true) {
newRightArrList = [[newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
if (i == 3) {
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] + flag * 3, newARR[1] - flag * 3], [newARR[0] - flag, newARR[1] + flag]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
if (true) {
newRightArrList = [[newARR[0] - flag * 3, newARR[1] - flag * 3], [newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
if (i == 4) {
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] + flag * 3, newARR[1] - flag * 3], [newARR[0] + flag * 4, newARR[1] - flag * 4]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
if (true) {
newRightArrList = [[newARR[0] - flag * 4, newARR[1] - flag * 4], [newARR[0] - flag, newARR[1] - flag], [newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag * 3, newARR[1] - flag * 3]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
}
}
})
游戏结束函数
//您赢了
function youWinFun() {
resultP.innerHTML = blackOrRedChessman % 2 == 0 ? '黑棋子方胜利' : '红棋子方胜利'
redP.innerHTML = '红旗已下0'
blackP.innerHTML = '黑旗已下0'
var r = window.confirm(resultP.innerHTML + "，是否重新开始!");
if (r == true) {
againInit()
return
}
}
全部代码 加详细注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
margin-top: 200px;
margin-left: 300px;
background-color: #ccc;
display: inline-block;
}
.resultBox {
position: absolute;
text-align: center;
top: 200px;
left: 760px;
width: 200px;
height: 450px;
background-color: #ccc;
color: 38px;
line-height: 60px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<canvas id="canvas"></canvas>
<div class="resultBox">
<p class="redP">红旗已下0</p>
<p class="blackP">黑旗已下0</p>
<p class="resultP"></p>
</div>
</div>
<script>
//生成画布
let canvas = document.getElementById('canvas')
//红方p
let redP = document.getElementsByClassName('redP')[0]
//黑方p
let blackP = document.getElementsByClassName('blackP')[0]
//结果p
let resultP = document.getElementsByClassName('resultP')[0]
//画笔
let ctx = canvas.getContext('2d')
//canvas宽高
canvas.height = canvas.width = '450'
//棋子方格大小
let flag = 50
//横线对象数组
let getXLineArr = []
//竖线对象数组
let getYLineArr = []
//偶数红色 基数 黑色
let blackOrRedChessman = 0
//所有棋子数组
let hasChessmanArrList = []
//坐标点数组
//所有坐标数组
let lineXAndlineYArr = []
//红旗坐标数组
let lineXAndlineYArrRed = []
//黑棋坐标数组
let lineXAndlineYArrBlack = []
//初始化函数
init()
for (let i = 0; i <= canvas.width; i += flag) {
for (let j = 0; j <= canvas.width; j += flag) {
lineXAndlineYArr.push([i, j])
}
}
//画布距离浏览器上册的距离
let MarginTopNum = 200;
//画布距离浏览器左册的距离
let MarginLeftNum = 300;
//棋子构造函数
//x 横坐标
//y 纵坐标
//color 棋子颜色坐标
//x 横坐标
function Chessman(x, y, color) {
this.x = x
this.y = y
this.color = color
}
Chessman.prototype.update = function () {
ctx.save();
ctx.beginPath()
ctx.fillStyle = this.color// 背景颜色为红色
ctx.arc(this.x, this.y, 20, 0, Math.PI * 2, false)
ctx.fill()
ctx.closePath()
}
canvas.addEventListener('click', function (e) {
//当前点击的坐标
let arr = [e.clientX - MarginLeftNum, e.clientY - MarginTopNum]
//当前点击坐标到 棋盘 0，0 的距离
let newArrLong = Math.sqrt((0 - arr[0]) * (0 - arr[0]) + (0 - arr[1]) * (0 - arr[1]))
let newARR = []
//循环判断当前点击坐标到哪个棋盘坐标的距离最短，棋子放置到该坐标点
lineXAndlineYArr.map((item, index) => {
let newArrLongA = Math.sqrt((item[0] - arr[0]) * (item[0] - arr[0]) + (item[1] - arr[1]) * (item[1] - arr[1]))
if (newArrLongA <= newArrLong) {
newARR = item; newArrLong = newArrLongA
}
})
//判断该点是否已经有棋子
let hasYesOrNo = JSON.stringify(hasChessmanArrList).includes(JSON.stringify(newARR))
if (!hasYesOrNo) {
//没有的话加入棋子数组
hasChessmanArrList.push(newARR)
}
else {
alert('已经有棋子')
return
}
// 判断这次点击棋子颜色
let color = blackOrRedChessman % 2 == 0 ? 'red' : 'black'
//生成棋子 放置棋盘中
new Chessman(newARR[0], newARR[1], color).update()
//相应颜色的棋子放入对应颜色棋子数组
blackOrRedChessman % 2 == 0 ? lineXAndlineYArrRed.push(newARR) : lineXAndlineYArrBlack.push(newARR)
//判断棋子数量是否已经大于5
let newlineXAndlineYArr
blackOrRedChessman % 2 == 0 ? newlineXAndlineYArr = JSON.parse(JSON.stringify(lineXAndlineYArrRed)) : newlineXAndlineYArr = JSON.parse(JSON.stringify(lineXAndlineYArrBlack))
//改变下一次棋子颜色使用
blackOrRedChessman++
//改变页面上的信息
redP.innerHTML = '红旗已下' + lineXAndlineYArrRed.length
blackP.innerHTML = '黑旗已下' + lineXAndlineYArrBlack.length
//判断棋子数量是否已经大于5 没到5 决对赢不了的 ~
if (newlineXAndlineYArr.length >= 5) {
//判断横向
xFangXiang()
//判断纵向
yFangXiang()
//向右向右倾斜
rightRightFangXiang()
function xFangXiang() {
//横向
let obj = {
}
let xArr = []
//深拷贝一份数组
let newlineXAndlineYArrx = JSON.parse(JSON.stringify(newlineXAndlineYArr))
// 判断属性 是否有大于等于5个的 默认数量为1 有++ 无 1
newlineXAndlineYArrx.filter(item => {
if (Object.prototype.hasOwnProperty.call(obj, item[1])) {
obj[item[1]] += 1
} else {
obj[item[1]] = 1
}
})
for (let key in obj) {
//数量大于5时
if (obj[key] >= 5) {
//y 有五个相等
for (let j = 0; j < newlineXAndlineYArrx.length; j++) {
//再次将 y相等的 坐标点 推向数组
if (newlineXAndlineYArrx[j][1] == key)
xArr.push(newlineXAndlineYArrx[j][0])
}
let xArrX = xArr.sort((a, b) => a - b)
let num = obj[key] - 5 + 1
let numm = 0
for (let j = 0; j < num; j++) {
if (numm == num) return
for (let i = numm; i < xArrX.length; i++) {
//数组坐标点满足关系 游戏结束
if (xArrX[i] + flag == xArrX[i + 1] && xArrX[i + 1] + flag == xArrX[i + 2] && xArrX[i + 2] + flag == xArrX[i + 3] && xArrX[i + 3] + 50 == xArrX[i + 4]) {
youWinFun()
}
}
numm++
}
}
}
}
}
function yFangXiang() {
//纵向
let obj = {
}
let xArr = []
let newlineXAndlineYArry = JSON.parse(JSON.stringify(newlineXAndlineYArr))
newlineXAndlineYArry.filter(item => {
if (Object.prototype.hasOwnProperty.call(obj, item[0])) {
obj[item[0]] += 1
} else {
obj[item[0]] = 1
}
})
for (let key in obj) {
if (obj[key] >= 5) {
//y 有五个相等
for (let j = 0; j < newlineXAndlineYArry.length; j++) {
if (newlineXAndlineYArry[j][0] == key)
xArr.push(newlineXAndlineYArry[j][1])
}
let xArrX = xArr.sort((a, b) => a - b)
let num = obj[key] - 5 + 1
let numm = 0
for (let j = 0; j < num; j++) {
if (numm == num) return
for (let i = numm; i < xArrX.length; i++) {
if (xArrX[i] + flag == xArrX[i + 1] && xArrX[i + 1] + flag == xArrX[i + 2] && xArrX[i + 2] + flag == xArrX[i + 3] && xArrX[i + 3] + flag == xArrX[i + 4]) {
youWinFun()
}
}
numm++
}
}
}
}
// //向右倾斜
function rightRightFangXiang() {
// 深拷贝一份数据
let newlineXAndlineYArrR = JSON.parse(JSON.stringify(newlineXAndlineYArr))
let newRightArrList = []
for (let i = 0; i < 5; i++) {
newRightArrList = []
//当它是第0棵棋子的时候 其他四颗棋子坐标满足的关系 下面一次类推
if (i == 0) {
//右下方向
if (true) {
newRightArrList = [[newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2], [newARR[0] - flag * 3, newARR[1] + flag * 3], [newARR[0] - flag * 4, newARR[1] + flag * 4]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
//左下方向
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2], [newARR[0] + flag * 3, newARR[1] + flag * 3], [newARR[0] + flag * 4, newARR[1] + flag * 4]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
if (i == 1) {
//右下方向
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2], [newARR[0] - flag * 3, newARR[1] + flag * 3]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
//左下方向
if (true) {
newRightArrList = [[newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2], [newARR[0] + flag * 3, newARR[1] + flag * 3]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
if (i == 2) {
//右下方向
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
//左下方向
if (true) {
newRightArrList = [[newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
if (i == 3) {
//右下方向
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] + flag * 3, newARR[1] - flag * 3], [newARR[0] - flag, newARR[1] + flag]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
//左下方向
if (true) {
newRightArrList = [[newARR[0] - flag * 3, newARR[1] - flag * 3], [newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
if (i == 4) {
//右下方向
if (true) {
newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] + flag * 3, newARR[1] - flag * 3], [newARR[0] + flag * 4, newARR[1] - flag * 4]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
//左下方向
if (true) {
newRightArrList = [[newARR[0] - flag * 4, newARR[1] - flag * 4], [newARR[0] - flag, newARR[1] - flag], [newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag * 3, newARR[1] - flag * 3]]
rightOrRight(newRightArrList, newlineXAndlineYArrR)
}
}
}
}
})
function rightOrRight(newRightArrList, newlineXAndlineYArrR) {
newRightArrList = newRightArrList.map(item => JSON.stringify(item))
newlineXAndlineYArrR = newlineXAndlineYArrR.map(item => JSON.stringify(item))
let filterLIst = []
newlineXAndlineYArrR.map(item => {
newRightArrList.map(itemN => {
if (itemN == item) {
filterLIst.push(item)
}
})
})
if (filterLIst.length == 4) youWinFun()
}
//您赢了
function youWinFun() {
resultP.innerHTML = blackOrRedChessman % 2 == 0 ? '黑棋子方胜利' : '红棋子方胜利'
redP.innerHTML = '红旗已下0'
blackP.innerHTML = '黑旗已下0'
var r = window.confirm(resultP.innerHTML + "，是否重新开始!");
if (r == true) {
againInit()
return
}
}
function againInit() {
getXLineArr = []
getYLineArr = []
//偶数红色 基数 黑色
blackOrRedChessman = 0
hasChessmanArrList = []
//坐标点数组
// lineXAndlineYArr = []
lineXAndlineYArrRed = []
lineXAndlineYArrBlack = []
ctx.clearRect(0, 0, canvas.width, canvas.height)
init()
}
//网格构造函数
//color线条颜色
//线条间隔
function init() {
//线条构造函数
//线条颜色 x y
function Line(color, x, y) {
this.color = color;
this.x = x
this.y = y
}
//画横线
Line.prototype.getXLine = function () {
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, this.y);
ctx.lineTo(this.x, this.y);
ctx.strokeStyle = this.color;
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//画竖线
Line.prototype.getYLine = function () {
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(this.x, 0);
ctx.strokeStyle = this.color;
ctx.lineTo(this.x, this.y);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//线条相隔大小 后面 num += flag
let num = 0
//线条随机颜色数组
let colorsList = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]
//循环画线
for (let i = 0; i <= canvas.width; i += flag) {
let colorx = colorsList[Math.floor(Math.random() * 10)]
let colory = colorsList[Math.floor(Math.random() * 10)]
getXLineArr.push(new Line(colorx, canvas.width, num))
getYLineArr.push(new Line(colory, num, canvas.width))
num += flag
}
//画横线
getXLineArr.map(item => {
item.getXLine()
})
//画竖线
getYLineArr.map(item => {
item.getYLine()
})
}
</script>
</body>
</html>
