原生js+canvas写一个五子棋

HTML

    <div id="pox"><canvas style="border:5px solid rgb(43, 42, 42)" width="600" height="600">您的浏览器不支持canvas绘图技术,请更换浏览器</canvas><div id="box"><div id="text"></div><div id="coordinate"></div></div></div>

CSS

    canvas {background-color: rgb(221, 220, 219);float: left;}#box {float: left;}#text{width: 200px;height: 50px;line-height: 50px;text-align: center;background-color: #333;font-size: 15px;color: aliceblue;}

JS

        let myCanvas = document.getElementsByTagName("canvas")[0];let ctx = myCanvas.getContext("2d");for (var i = 0; i <= 12; i++) {ctx.moveTo(0, i * 50)ctx.lineTo(600, i * 50)ctx.lineWidth = 2;ctx.stroke()ctx.beginPath();ctx.moveTo(i * 50, 0)ctx.lineTo(i * 50, 600)ctx.lineWidth = 2;ctx.stroke()ctx.beginPath();}let boo = true;let booArray = [];for (let j = 0; j <= 12; j++) {for (let i = 0; i <= 12; i++) {//存入所有初始坐标booArray.push({x: i * 50,y: j * 50,color: ''})}}let text = document.getElementById("text");if (boo) {text.innerText = "当前执子为黑色,请黑方落子"}else{text.innerText = "当前执子为白色,请白方落子"}// let coordinate = document.getElementById("coordinate");// coordinate.innerText = "上次落点坐标为( 0 , 0 )"myCanvas.onclick = function (e) {let tempx = Math.round(e.offsetX / 50) * 50let tempy = Math.round(e.offsetY / 50) * 50//判断当前点位有没有棋子//#region let booRutern = false;booArray.forEach(item => {if (item.x === tempx && item.y === tempy && item.color != "") {console.log("当前位置有棋子");booRutern = true;}})//#endregionif (booRutern) return// 修改提示文字if (boo) {text.innerText = "当前执子为白色,请白方落子"}else{text.innerText = "当前执子为黑色,请黑方落子"}//更改下次落子颜色boo = !boo;ctx.arc(tempx, tempy, 15, 0, Math.PI / 180 * 360)//记录本次落子颜色let color;if (boo) {ctx.fillStyle = "white"color = "white"ctx.stroke()} else {ctx.fillStyle = "black"color = "black"}//修改落子位置数组对应的颜色booArray.forEach(item => {if (item.x === tempx && item.y === tempy) {item.color = color;}})//横线赢let r = 0;//纵向赢let wh = 0;//一三象限赢let ot = 0;//二四象限赢let tf = 0;//横向判断//#region //横向判断右侧a: for (let u = 0; u < 5; u++) {//tempx+index*50for (let index = 0; index < booArray.length; index++) {if (booArray[index].x == tempx + u * 50 && booArray[index].y == tempy) {if (boo) {//当前是白色console.log(booArray[index], "白色色色,当前是白");if (booArray[index].color == 'white') {// wr++r++;} else {break a;}} else {//当前是黑色console.log(booArray[index], "黑黑黑黑,当前是黑");if (booArray[index].color == 'black') {r++} else {break a;}}}}}//横向判断左侧b: for (let u = 0; u < 5; u++) {//tempx+index*50for (let index = 0; index < booArray.length; index++) {if (booArray[index].x == tempx - 50 - u * 50 && booArray[index].y == tempy) {if (boo) {//当前是白色console.log(booArray[index], "白色色色,当前是白");if (booArray[index].color == 'white') {// wr++r++;} else {break b;}} else {//当前是黑色console.log(booArray[index], "黑黑黑黑,当前是黑");if (booArray[index].color == 'black') {r++} else {break b;}}}}}//#endregion//纵向判断//#region //纵向判断上方c: for (let u = 0; u < 5; u++) {//tempx+index*50for (let index = 0; index < booArray.length; index++) {if (booArray[index].x == tempx && booArray[index].y - 50 - u * 50 == tempy) {if (boo) {//当前是白色console.log(booArray[index], "白色色色,当前是白");if (booArray[index].color == 'white') {// wr++wh++;} else {break c;}} else {//当前是黑色console.log(booArray[index], "黑黑黑黑,当前是黑");if (booArray[index].color == 'black') {wh++} else {break c;}}}}}//纵向判断下方d: for (let u = 0; u < 5; u++) {//tempx+index*50for (let index = 0; index < booArray.length; index++) {if (booArray[index].x == tempx && booArray[index].y + u * 50 == tempy) {if (boo) {//当前是白色console.log(booArray[index], "白色色色,当前是白");if (booArray[index].color == 'white') {// wr++wh++;} else {break d;}} else {//当前是黑色console.log(booArray[index], "黑黑黑黑,当前是黑");if (booArray[index].color == 'black') {wh++} else {break d;}}}}}//#endregion// 一三象限判断//#region //一象限判断e: for (let u = 0; u < 5; u++) {//tempx+index*50for (let index = 0; index < booArray.length; index++) {if (booArray[index].x + 50 + u * 50 == tempx && booArray[index].y - 50 - u * 50 == tempy) {if (boo) {//当前是白色console.log(booArray[index], "白色色色,当前是白");if (booArray[index].color == 'white') {// wr++ot++;} else {break e;}} else {//当前是黑色console.log(booArray[index], "黑黑黑黑,当前是黑");if (booArray[index].color == 'black') {ot++} else {break e;}}}}}//三象限f: for (let u = 0; u < 5; u++) {//tempx+index*50for (let index = 0; index < booArray.length; index++) {if (booArray[index].x - u * 50 == tempx && booArray[index].y + u * 50 == tempy) {if (boo) {//当前是白色console.log(booArray[index], "白色色色,当前是白");if (booArray[index].color == 'white') {// wr++ot++;} else {break f;}} else {//当前是黑色console.log(booArray[index], "黑黑黑黑,当前是黑");if (booArray[index].color == 'black') {ot++} else {break f;}}}}}//#endregion//二四象限判断//#region //二象限判断g: for (let u = 0; u < 5; u++) {//tempx+index*50for (let index = 0; index < booArray.length; index++) {if (booArray[index].x - 50 - u * 50 == tempx && booArray[index].y - 50 - u * 50 == tempy) {if (boo) {//当前是白色console.log(booArray[index], "白色色色,当前是白");if (booArray[index].color == 'white') {// wr++tf++;} else {break g;}} else {//当前是黑色console.log(booArray[index], "黑黑黑黑,当前是黑");if (booArray[index].color == 'black') {tf++} else {break g;}}}}}//四象限判断h: for (let u = 0; u < 5; u++) {//tempx+index*50for (let index = 0; index < booArray.length; index++) {if (booArray[index].x + u * 50 == tempx && booArray[index].y + u * 50 == tempy) {if (boo) {//当前是白色console.log(booArray[index], "白色色色,当前是白");if (booArray[index].color == 'white') {// wr++tf++;} else {break h;}} else {//当前是黑色console.log(booArray[index], "黑黑黑黑,当前是黑");if (booArray[index].color == 'black') {tf++} else {break h;}}}}}//#endregionconsole.log("当前:", boo ? "白色" : "黑色", " 横向:", r, " 纵向:", wh, " 一三象限: ", ot, "二四象限: ", tf);ctx.fill()ctx.beginPath()//这里用延时器的目的是为了异步弹窗//因为弹窗的速度比canvas绘制速度快, 有时候会出现还没绘制棋子就弹窗胜利了//看到的人如果有更好的思路可以评论提供setTimeout(() => {//横向if (r >= 5) {if (boo) {alert("白横线胜利");} else {alert("黑横线胜利");}}//纵向if (wh >= 5) {if (boo) {alert("白纵向胜利");} else {alert("黑纵向胜利");}}//一三象限if (ot >= 5) {if (boo) {alert("白一三象限胜利");} else {alert("黑一三象限胜利");}}//二四象限if (tf >= 5) {if (boo) {alert("白二四象限胜利");} else {alert("黑二四象限胜利");}}}, 10)}