JS实现人机大战之五子棋（UI篇）_技术笔记

慕侠5154442 2017-10-22

象棋游戏

0赞 · 0采集
qq_歲月抹去塵封的記憶_0 2017-08-22

绘制水印

截图
0赞 · 0采集
qq_F_71 2017-06-08

五子棋大战

0赞 · 0采集
moocer9527 2017-05-20

画棋子

截图
0赞 · 0采集
moocer9527 2017-05-20

棋盘js

截图
0赞 · 0采集
carol67351 2017-05-03

棋盘水印

截图
0赞 · 0采集
carol67351 2017-05-03

css box-shadow

截图
0赞 · 0采集
carol67351 2017-05-03

index.html

截图
0赞 · 0采集
慕粉1719051094 2017-04-12

<canvas>标签需要在标签内设置宽高，不然绘制出的图形可能会变形

0赞 · 0采集
贝克汉姆的23号 2017-04-10

gradient在尺寸内渐变

截图
0赞 · 1采集
贝克汉姆的23号 2017-04-10

beginpath开始一段路径

截图
0赞 · 0采集
贝克汉姆的23号 2017-04-10

enterframe是进入帧的意思

0赞 · 0采集
Peggy7 2017-03-22

电脑会默认先绘制线条，后绘制图片。

0赞 · 0采集
qq_相摸盲人_0 2017-03-05

下棋绑定

截图
0赞 · 1采集
qq_相摸盲人_0 2017-03-05

画棋子

截图
0赞 · 0采集
qq_相摸盲人_0 2017-03-05

间距15，共15条线，每格30像素

截图
0赞 · 0采集
qq_相摸盲人_0 2017-03-05

阴影效果

截图
0赞 · 0采集
豆腐脑不放糖 2017-03-03

为了将点用的图片延迟之后显示出来使用，调用图片返回的函数image.onload=function()

0赞 · 0采集
慕粉1057417189 2017-02-27

五子棋（UI）

0赞 · 0采集
Delivw 2016-12-14

绘制水印

截图
0赞 · 1采集
叶来香 2016-12-08

看

截图
0赞 · 0采集
卡奇 2016-11-04

画棋子函数

截图
0赞 · 0采集
空白小弟 2016-10-19

棋盘画法通过<canvas>画网格，画一条横线：js代码： #id.lineTo(0,200);#id.moveTo(200,200);#id.stroke(); 两点确定一条线段。网格通过for循环实现。线的颜色：#id.strokeStyle="#bfbfbf"; 棋子是通过canvas画圆实现： #id.beginPath(); #id.arc(0,0,13,0,2*Math.PI); #id.closePath();

1赞 · 1采集
无所畏惧小小小 2016-10-10

笔记字数有限制，只好分段保存（UI篇第一段） var chessBoard=[]; var me=true; for(var i=0;i<15;i++){ chessBoard[i]=[]; for(var j=0;j<15;j++){ chessBoard[i][j]=0; } } var chess=document.getElementById('chess'); var context=chess.getContext('2d'); context.strokeStyle="#BFBFBF"; //加水印 var logo=new Image(); logo.src='img/lg.jpg'; logo.onload=function (){ context.drawImage(logo,0,0,450,450); drawchessBoard(); // oneStep(0,0,true) // oneStep(1,1,false) }

1赞 · 1采集
无所畏惧小小小 2016-10-10

（UI篇第二段） //画棋盘 var drawchessBoard=function(){ for(var i=0;i<15;i++){ context.moveTo(15+i*30,15); context.lineTo(15+i*30,435); context.stroke(); context.moveTo(15,15+i*30); context.lineTo(435,15+i*30); context.stroke(); } } var oneStep=function(i,j,me){ context.beginPath(); context.arc(15+i*30,15+j*30,13,0,2*Math.PI); context.closePath(); var gradient=context.createRadialGradient(15+i*30,15+j*30,15,15+i*30,15+j*30,0); if(me){ gradient.addColorStop(0,'#0A0A0A'); gradient.addColorStop(1,'#636766'); }else{ gradient.addColorStop(0,'#D1D1D1'); gradient.addColorStop(1,'#F9F9F9'); } context.fillStyle=gradient; context.fill();//填充图形 } chess.onclick = function(e){ //通过鼠标点击坐标确定落子坐标 var x=e.offsetX; var y=e.offsetY; i=Math.floor(x/30); j=Math.floor(y/30); //判断落子的位置是否已经落子 if(chessBoard[i][j]==0){ oneStep(i,j,me); //记录落下子的颜色 if(me){ chessBoard[i][j]=1; }else{ chessBoard[i][j]=2; } //轮流下棋落下一种颜色棋子后换一种颜色 me=!me; } }

1赞 · 1采集
九万里风0 2016-10-05

var oneStep = function(i, j, me) { context.beginPath(); context.arc(15 + i*30, 15 + j*30, 13, 0, 2 * Math.PI); context.closePath(); var gradient = context.createRadialGradient(15 + i*30 + 2, 15 + j*30 - 2, 13, 15 + i*30 + 2, 15 + j*30 - 2, 0); if(me) { gradient.addColorStop(0,"#0a0a0a"); gradient.addColorStop(1,"#636766"); } else { gradient.addColorStop(0,"#d1d1d1"); gradient.addColorStop(1,"#f9f9f9"); } context.fillStyle = gradient; context.fill(); }

0赞 · 0采集
慕粉1471596266 2016-09-10

可以

0赞 · 0采集
weixin_慕圣524561 2016-08-24

明文

截图
0赞 · 0采集
qq_该用户无昵称_0 2016-08-16

canvans

截图
1赞 · 1采集
慕神7509951 2016-08-13

这个界面使用什么快捷键出现的呀？

截图
0赞 · 0采集

数据加载中...