前两天用canvas画了个“井字游戏”棋盘，基于这个制作了井字游戏功能，游戏功能较为简单，纯属练习。
演示地址：https://www.xueyidian.cn/demo/%E4%BA%95%E5%AD%97%E6%B8%B8%E6%88%8F.html
源码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>井字游戏</title>
<style>
body{padding: 0;margin: 0;}
#well{float: left; cursor: pointer;}
.tip{margin: 80px 0 0 40px;float: left; width: 490px;}
.tip p{line-height: 30px;}
.red{color: #cd192e;}
.blue{color: #1943cd;}
.fz30{font-size: 30px; vertical-align: top;}
.state{display: block; clear: both; margin: 20px 0 0 120px;}
</style>
</head>
<body>
<canvas id="well" width="400" height="400" onClick="startWell()"></canvas>
<div class="tip">
<h1>井字游戏</h1>
<p><span class="red">红方</span>和<span class="blue">蓝方</span>轮流下棋子（<span class="red">红方</span>先下），点击方格下棋，一方连成一排获胜，刷新可重新开始。</p>
<p><span class="red">红：<span class="fz30">×</span></span></p>
<p><span class="blue">蓝：<span class="fz30">○</span></span></p>
</div>
<div class="state">当前状态：<span id="st">轮到<span id="state" class="red">红方</span>下棋</span></div>
<script>
var well = document.getElementById("well");
var wlc = well.getContext("2d");
var bw = 3; //线的宽度
var m = 80; //棋盘的外边距
var w = 300; //棋盘宽度
var h = w; //棋盘高度，与宽度保持一致
var p = w * 0.07; //网格的内边距
var r = w / 3 / 2 - p; //圆棋子的半径
var state = true; //true为红方先行，falsh则为蓝方
var s = document.getElementById("state");
var st = document.getElementById("st");
var red = new Array(); //记录红方下棋
var blue = new Array();//记录蓝方下棋
var result = 0; //游戏结果 0为在游戏中，1为红方赢，2为蓝方赢，3位平局
var win = new Array( //胜利条件
new Array(0,1,2),
new Array(3,4,5),
new Array(6,7,8),
new Array(0,3,6),
new Array(1,4,7),
new Array(2,5,8),
new Array(0,4,8),
new Array(2,4,6)
);
function chessboard(wlc){
//画外部线框
wlc.lineWidth = bw;
wlc.strokeRect(m, m, w, h);
//开始画网格
wlc.beginPath();
//画第一列线
wlc.moveTo(m + w * 1 / 3, m);
wlc.lineTo(m + w * 1 / 3, m + h);
//画第二列线
wlc.moveTo(m + w * 2 / 3, m);
wlc.lineTo(m + w * 2 / 3, m + h);
//画第一行线
wlc.moveTo(m, m + h * 1 / 3);
wlc.lineTo(m + w, m + h * 1 / 3);
//画第二行线
wlc.moveTo(m, m + h * 2 / 3);
wlc.lineTo(m + w, m + h * 2 / 3);
wlc.stroke();
}
function xPiece(wlc, path){
var shang = parseInt(path / 3); //判断Y轴位置 1
var yu = path % 3; //判断X轴位置 0
var m1xS = m + w / 3 * yu + p; //第一条斜线的开始点X轴
var m1yS = m + h / 3 * shang + p; //第一条斜线的开始点Y轴
var m1xE = m + w / 3 * yu + p + r * 2; //第一条斜线的结束点X轴
var m1yE = m + h / 3 * shang + p + r * 2; //第一条斜线的结束点Y轴
var m2xS = m + w / 3 * yu + p + r * 2; //第二条斜线的开始点X轴
var m2yS = m + h / 3 * shang + p; //第二条斜线的开始点Y轴
var m2xE = m + w / 3 * yu + p; //第二条斜线的结束点X轴
var m2yE = m + h / 3 * shang + p + r * 2; //第二条斜线的结束点Y轴
//开始画叉
wlc.beginPath();
wlc.strokeStyle = "#cd192e";
wlc.moveTo(m1xS, m1yS);
wlc.lineTo(m1xE, m1yE);
wlc.moveTo(m2xS, m2yS);
wlc.lineTo(m2xE, m2yE);
wlc.stroke();
}
function roundPiece(wlc, path){
var shang = parseInt(path / 3); //判断Y轴位置 1
var yu = path % 3; //判断X轴位置 0
var x = m + w / 3 * yu + w / 6; //计算X轴
var y = m + h / 3 * shang + h / 6; //计算Y轴
wlc.beginPath();
wlc.strokeStyle = "#1943cd";
wlc.arc(x, y, r, 0, 2 * Math.PI);
wlc.stroke();
}
chessboard(wlc); //画棋盘
function drawWell(){
// xPiece(wlc,1); //画叉棋子
// xPiece(wlc,6); //画叉棋子
// xPiece(wlc,4); //画叉棋子
// xPiece(wlc,8); //画叉棋子
//
// roundPiece(wlc, 0); //画圆棋子
// roundPiece(wlc, 2); //画圆棋子
// roundPiece(wlc, 3); //画圆棋子
// roundPiece(wlc, 5); //画圆棋子
// roundPiece(wlc, 7); //画圆棋子
}
function startWell(){
//标准的获取鼠标点击相对于canvas画布的坐标公式
var box = well.getBoundingClientRect();
var x = (event.clientX + (-box.left)) * well.width / box.width - m;
var y = (event.clientY + (-box.top)) * well.height / box.height - m;
var xIndex = parseInt(x / (w / 3));
var yIndex = parseInt(y / (h / 3));
var index = xIndex + yIndex * 3;
if(x < w && y < w && result == 0){
if(red.indexOf(index) == -1 && blue.indexOf(index) == -1){
if(state){
xPiece(wlc, index);
red.push(index);
red.sort();
s.innerHTML = "蓝方";
s.className = "blue";
state = false;
}else{
roundPiece(wlc, index);
blue.push(index);
blue.sort();
s.innerHTML = "红方";
s.className = "red";
state = true;
}
for(var i = 0,len = win.length; i < len; i++){
if(red.toString().indexOf(win[i].toString()) != -1){
alert('红方赢');
st.innerHTML = "红方赢";
result = 1;
break;
}else if(blue.toString().indexOf(win[i].toString()) != -1){
alert('蓝方赢');
st.innerHTML = "蓝方赢";
result = 2;
break;
}else if(red.length + blue.length == 9){
alert('平局');
st.innerHTML = "平局";
result = 3;
break;
}
}
}
}
//console.log(red.length);
//console.log(blue);
}
</script>
</body>
</html>
楼主可以做出类似https://www.shiyouhome.com这个网站的游戏吗？可以的话，咱们可以合作。