<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>
用canvas做一个五子棋表格和下棋
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...