<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五子棋P1</title>
</head>
<body onload="WebSocketTest()" style="display: flex;justify-content: center;">
<canvas id="myCanvas" width="560" height="560" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>var ws;
function send(x,y,su){
ws.send(`{"target":"2","content":"${x},${y},${su}"}`);
}
function WebSocketTest()
{
if ("WebSocket" in window)
{
// alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
ws = new WebSocket("ws://106.55.52.188:5000/api/values/result?id=1");
// ws.send(`{"target":"2","content":"10"}`);
ws.onopen = function()
{
// ws.send(`{"target":"2","content":"1"}`);
alert("连接成功");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
var data = JSON.parse(evt.data);
var ss = data.content;
var res =ss.split(",");
momo(res[0],res[1]);
if(res[2]==1){
alert("你输了")}
// console.log(received_msg);
// alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
// alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
// alert("您的浏览器不支持 WebSocket!");
}
}
//
var old =new Array();
var qilist = new Array(); //先声明一维
for(var k=0;k<15;k++){ //一维长度为i,i为变量，可以根据实际情况改变
qilist[k]=new Array(); //声明二维，每一个一维数组里面的一个元素都是一个数组；
for(var j=0;j<15;j++){ //一维数组里面每个元素数组可以包含的数量p，p也是一个变量；
qilist[k][j]=0; //这里将变量初始化，我这边统一初始化为空，后面在用所需的值覆盖里面的值
}
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";
ctx.strokeStyle="#000000";
for(var i=0;i<560;i+=40){
ctx.moveTo(i,0);
ctx.lineTo(i,560);
ctx.stroke();
}
for(var i=0;i<560;i+=40){
ctx.moveTo(0,i);
ctx.lineTo(560,i);
ctx.stroke();
}
canvas.addEventListener("mousedown", function(e) {
if(!isok){
console.log("等待对手落子");
return;
}
ctx.fillStyle="#FF0000";
var cRect = canvas.getBoundingClientRect();
var canvasX = Math.round(e.clientX - cRect.left);
var canvasY = Math.round(e.clientY - cRect.top);
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
ctx.beginPath();
canvasX = Math.round(canvasX/40)*40;
canvasY = Math.round(canvasY/40)*40;
if(qilist[canvasY/40][canvasX/40]!=0){
console.log("此处有子");
return;
}else{
var su = victory(canvasY/40,canvasX/40);
send(canvasX/40,canvasY/40,su)
}
qilist[canvasY/40][canvasX/40] = 1;
ctx.arc(canvasX,canvasY,20,0,2*Math.PI);
ctx.fill();
ctx.fillStyle="#0000ff";ctx.beginPath();ctx.arc(old[0],old[1],5,0,2*Math.PI);
ctx.fill();
ctx.fillStyle="#ffffff";
ctx.beginPath();
ctx.arc(canvasX,canvasY,5,0,2*Math.PI);
ctx.fill();
old[0] = canvasX;
old[1] = canvasY;
isok = false;
});
var isok = true;
function momo(x,y){
ctx.fillStyle="#0000ff";
ctx.beginPath();
ctx.arc(x*40,y*40,20,0,2*Math.PI);
qilist[y][x] = 2;
ctx.fill();
ctx.fillStyle="#FF0000";ctx.beginPath();ctx.arc(old[0],old[1],5,0,2*Math.PI);
ctx.fill();
ctx.fillStyle="#ffffff";ctx.beginPath();ctx.arc(x*40,y*40,5,0,2*Math.PI);
ctx.fill();
old[0] = x*40;
old[1] = y*40;
isok = true;
}
function victory(Y,X){
var lines = 0;
for(var i = X+1;i<X+5&&i<15;i++){
console.log(qilist[Y][i]);
if(qilist[Y][i]==1){
lines++;
if(lines==4){
break;
}
}else{
break;
}
}
for(var j = X-1;j>X-5&&j>=0;j--){
if(qilist[Y][j]==1){
lines++;
if(lines==4){
break;
}
}else{
break;
}
}
if(lines==4){
alert("你赢了");
return 1;
}
//
lines = 0;
for(var i = Y+1;i<Y+5&&i<15;i++){
console.log(qilist[i][X]);
if(qilist[i][X]==1){
lines++;
if(lines==4){
break;
}
}else{
break;
}
}
for(var j = Y-1;j>Y-5&&j>=0;j--){
if(qilist[j][X]==1){
lines++;
if(lines==4){
break;
}
}else{
break;
}
}
if(lines==4){
alert("你赢了");
return 1;
}
//
lines = 0;
for(var i = 1;i<5;i++){
if(Y+i>=15||X+i>=15){
break;
}
if(qilist[Y+i][X+i]==1){
lines++;
if(lines==4){
break;
}
}else{
break;
}
}
for(var j = 1;j<5;j++){
if(Y-j<0||X-j<0){
break;
}
if(qilist[Y-j][X-j]==1){
lines++;
if(lines==4){
break;
}
}else{
break;
}
}
if(lines==4){
alert("你赢了");
return 1;
}
//
lines = 0;
for(var i = 1;i<5;i++){
if(Y+i>=15||X-i<0){
break;
}
if(qilist[Y+i][X-i]==1){
lines++;
if(lines==4){
break;
}
}else{
break;
}
}
for(var j = 1;j<5;j++){
if(Y-j<0||X+j>=15){
break;
}
if(qilist[Y-j][X+j]==1){
lines++;
if(lines==4){
break;
}
}else{
break;
}
}
if(lines==4){
alert("你赢了");
return 1;
}
}
</script>
</body>
</html>
2025-09-23
