用canvas做一个五子棋表格和下棋
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
text-align: center;
}
canvas{
background: gainsboro;
}
</style>
</head>
<body>
<!--
1 fillRect(x,y,width,height) 第一个参数起点的x轴坐标，第二个参数起点的y轴坐标，矩形的宽度，矩形的高度（填充矩形）
2 strokeRect()参数和上面相同 （无填充矩形）
3 addColorStop(pos,color)--给渐变添加位置和颜色，pos 0-1，如果是中间位置，只能是0.5，不能是50%
4 createLinearGradient--创建的是线性渐变，超出渐变范围的部分，如果再0的旁边，就是0定义的颜色，如果接近1，就是1定义的颜色
5 createRadialGradient(小圆的x轴坐标，小圆的y轴坐标，小圆的半径，大圆的x轴坐标，大院的额y轴坐标，大圆的半径)，渐变范围是小圆和大圆中间的部分
-->
<canvas id="canvas" width="450" height="450">您的浏览器版本太低，不支持canvas标签，请尽快升级浏览器版本</canvas>
<script type="text/javascript">
//渐变颜色
var txt=canvas.getContext('2d');
var arr=[];
//利用二维数组存储值
for(var i=0;i<15;i++){
// arr=[ [],[],[] ....]
// arrr=[ [0,0,0,0,0,0...] ] arr[0][5] 坐标是（0，5）
arr[i]=[];
for(var j=0;j<15;j++){
arr[i][j]=0;
}
}
for(var i=0;i<15;i++){
//画横线
txt.strokeStyle="gray";
txt.moveTo(15,15+30*i);
txt.lineTo(435,15+30*i);
txt.stroke();
//画纵线
txt.moveTo(15+30*i,15);
txt.lineTo(15+30*i,435);
txt.stroke();
}
function circleBlack(x,y){
txt.beginPath();
var grd=txt.createRadialGradient(x,y,0,x,y,12);
grd.addColorStop(0,'gray');
grd.addColorStop(1,'black');
txt.fillStyle=grd;
txt.arc(x,y,12,0,2*Math.PI);
txt.fill();
}
function circleRed(x,y){
//重新绘制
txt.beginPath();
var grd=txt.createRadialGradient(x,y,0,x,y,12);
grd.addColorStop(0,'white');
grd.addColorStop(1,'gray');
txt.fillStyle=grd;
txt.arc(x,y,12,0,2*Math.PI);
txt.fill();
}
// 1 点击哪出现一个圆
// 2点击奇数次我出现的是黑子，点偶数次出现的是白子
// 3假设225个点存储的值是0，0代表的是没有棋子，如果这有棋的画，就alert（’‘），如果没有棋子的画，就让他下棋
var num=0;
canvas.onclick=function(env){
num++;
var event=window.event||env;
var x=Math.floor(event.offsetX/30)*30+15;
var y=Math.floor(event.offsetY/30)*30+15;
var x1=Math.floor(event.offsetX/30);
var y1=Math.floor(event.offsetY/30)
if(arr[x1][y1]==0){
//这没有棋子
if(num%2==0){
circleRed(x,y)
}else{
circleBlack(x,y)
}
arr[x1][y1]=1;
}else{
//就有棋子
num--;
alert("您这已经有棋子了，请从其他地方下");
}
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.01.23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读